Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Javascript: URL Query Parameter in Input Feld laden

01.08.2023 (๐Ÿ‘4633)


 

Code Beispiel wie man URL in ein Eingabefeld lรคdt

 

    function load_fields_by_url_parameters() {

        //------< load_fields_by_url_parameters() >------

 

 

        load_named_url_paramater_to_namede_input_field("Strasse")

 

       

 

        //------</ load_fields_by_url_parameters() >------

    }

    //*function to load url-parameter value to form-field

    function load_named_url_paramater_to_namede_input_field(key){

        //--------< load_named_url_paramater_to_namede_input_field >--------

        parameter=key.toLowerCase(); //*prevent case sensitive

        var value_url_query = (new URLSearchParams(window.location.search)).get(parameter);

        var input_field = document.getElementById("input_" + key);

        if (value_url_query != null) {

            input_field.value = value_url_query;

        }

        //--------</ load_named_url_paramater_to_namede_input_field >--------

    }

In HTML, javascript asp webseite.

Case-Sensitive abgeschaltet

 

@model IEnumerable<SearchModel>

 

<script src="~/lib/jquery/dist/jquery.min.js"></script>

 

 

@if (Model != null)

{

    //------< Any() >------

    @*---- < Liste Details >----*@

    <div>

 

        <table class="table">

            <thead>

                <tr>

                    <form id="frmSuche" onsubmit="return false" >

                    <th scope="col">Name<br /><input id="input_Name"  type="text" >  </th>

 

                    <th scope="col">Strasse<br /><input id="input_Strasse" type="text">  </th>

                    <th scope="col">PZ</th>

                    <th scope="col">Ort</th>

                    </form>

                   

                </tr>

            </thead>

           

            <tbody>

                @foreach (var item in Model)

                {

                    <tr>

                        <td>@item.Nachname , @item.Vorname</td>

                        <td>@item.Strasse</td>

                        <td>@item.PLZ</td>

                        <td>@item.Ort</td>

                   </tr>

 

                }

 

 

            </tbody>

        </table>

 

 

    </div>

    @*---- </ Liste Details >----*@

    //------</ Any() >------

}

else

{

    <p>kein Treffer</p>

}

 

 

 

<script type="text/javascript">

    //========< SCRIPT >========

 

    //*load new search after filter input

    function send_Search_Filter() {

        //------< send_Search_Filter() >------

        //creates new URL by input values and loads url in browser

        var form = document.getElementById("frmSuche");

        var input_Name = document.getElementById("input_Name");

        var input_Strasse = document.getElementById("input_Strasse");

        var sName = input_Name.value;

        var sStrasse = input_Strasse.value;

 

        var sURL = window.location.origin + "/Suche";

        var loc = window.location;

        var sQuery = "";

        if (sName != "") {

            sName = encodeURI(sName);   //for c#

            sQuery = sQuery + "&name=" + sName;

        }

 

        if (sStrasse != "") {

            sStrasse = encodeURI(sStrasse);   //for c#

            sQuery = sQuery + "&strasse=" + sStrasse;

        }

 

 

        if (sQuery != "") {

            sQuery = sQuery.substr(1);

 

 

            sURL = sURL + "/suche?adresstyp=T&" + sQuery;

        }

 

 

        //< send/load new >

        window.location.href = sURL;    //goto new URL

        //</ send/load new >

 

        return false;                   //stop send form if necessary. the form.submit should be return false

        //</ send >

        //------</ send_Search_Filter() >------

    }

 

    function load_fields_by_url_parameters() {

        //------< load_fields_by_url_parameters() >------

 

        //var value_name = (new URLSearchParams(window.location.search)).get("name"); //*URLSearchParams is CaseSensitive only

 

        let params = new URL(document.location).searchParams;

        let parameter = "Name".toLowerCase()

        let value_parameter = params.get(parameter); // is the string "Jonathan Smith".

       

        var input_field = document.getElementById("input_Name");

        if (value_parameter != null) {

            input_field.value = value_parameter;

        }

 

        load_named_url_paramater_to_namede_input_field("Strasse")

 

       

 

        //------</ load_fields_by_url_parameters() >------

    }

    //*function to load url-parameter value to form-field

    function load_named_url_paramater_to_namede_input_field(key){

        //--------< load_named_url_paramater_to_namede_input_field >--------

        parameter=key.toLowerCase(); //*prevent case sensitive

        var value_url_query = (new URLSearchParams(window.location.search)).get(parameter);

        var input_field = document.getElementById("input_" + key);

        if (value_url_query != null) {

            input_field.value = value_url_query;

        }

        //--------</ load_named_url_paramater_to_namede_input_field >--------

    }

 

 

    //*Set Form Input Fields to run on Enter key after input

    $(document).ready(function () {

        $('input').keyup(function (event) {

            if (event.which === 13) {

                send_Search_Filter();  //*run form->submit() to function

            }

        });

    });

 

 

    load_fields_by_url_parameters();

        //========</ SCRIPT >========

</script>