Why can't I see the query parameters in the form present in the url?

Question

I'm having a problem getting the form values by passing the two query parameters, id and type, from the url.

Let's assume the URL is:

... page.html?id=14&type=Title

I want the values of these to be shown in the form to then make the change later.

function getQueryVariable () {
             var query = window.location.search.substring (1);
             var vars = query.split ("&");
             for (var i = 0; i <vars.length; i ++) {
                 var pair = vars [i] .split ("=");
             }
         }

         function onLoad () {
             var value = getQueryVariable ();
             var id = document.getElementById ('id');
             var type = document.getElementById ('type');
             id.value = value;
             type.value = value;
         }

<div class = "container">
         <form method ="post" id="save" action="javascript: myFunction()" onload="onLoad()">
             <div class = "field">
                 <label for = "id"> ID: </label>
                 <input type = "number" id = "id" name = "id" />
             </div>
             <div class = "field">
                 <label for = "type"> Fragment Type: </label>
                 <input type = "text" id = "type" name = "type" />
             </div>
             <div class = "field">
                 <button type = "submit" class = "full"> Save changes </button>
             </div>
         </form>
     </div>

As you can see from the code, I call the onLoad() function to load the data into the form.

I don't get any errors; the values of the getQueryVariable() function variables are correct, but I notice that it is not called.

myFunction() is not shown, but this is the function that will serve me later to modify the fields of the form.

Could you kindly help me?

Answer 1

Your getQueryVariable () function is not returning anything. You can try something like this:

function getQueryVariable () {
             var query = window.location.search.substring (1);
             var vars = query.split ("&");
             var params = {}
             for (var i = 0; i <vars.length; i ++) {
                 var pair = vars [i] .split ("=");
                 params[pair[0]] = pair[1]
             }
             return params
         }

         function onLoad () {
             var params = getQueryVariable ();
             var id = document.getElementById ('id');
             var type = document.getElementById ('type');
             id.value = params.id ;
             type.value = params.type ;
         }