Get URL parameters with jQuery and display them inside an HTML input text field

Question

I been through dozens of articles on this on here and on Google but none of them seemed to have worked. I am trying to get parameters from the URL and display them inside an input text field.

This is the code I'm working on:

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

getQueryVariable("inputline1");
getQueryVariable("inputline2");

<input type="text" id="inputline1" value="getQueryVariable('inputline1')" />
<input type="text" id="inputline2" value="getQueryVariable('inputline2')" />

The URL i am trying:

?inputline1=sampletext1&inputline2=sampletext2

My jQuery knowledge is very limited and any help on the right direction on this would be very helpful.

Thanks in advance.

yes, thanks @baao i have tried that and it didn't worked for me, hence I'm here as mentioned above. — pv619, Jun 05 '18 at 08:20
`value="getQueryVariable('inputline1')"` - don’t expect this to call any function, this is just a static text you have specified as the input field value. — CBroe, Jun 05 '18 at 08:23
@baao _“use `window.location` instead of `window.loaction.search`”_ - no, don’t. — CBroe, Jun 05 '18 at 08:32
@CBroe why not? https://jsfiddle.net/3847rkwL/2/ You can't create an URL from search — baao, Jun 05 '18 at 08:36
@baao _“You can't create an URL from search”_ - no one asked for anything like that to begin with. They want to get URL parameter values from the query string, and `location.search` provides direct access to that. — CBroe, Jun 05 '18 at 08:40
Yes, they asked for how to get url params. That's explained in the duplicate, using a new URL object. @CBroe ... If the question really is about to set the value of an input field to something with javascript like you've already guessed, then it's a duplicate of at least 100 other questions. So or so, nothing worth to discuss about.. :-) — baao, Jun 05 '18 at 08:46
@CBroe, thanks bro for a helpful suggestion on the `input value` being static. @baao thanks to you too, I know it's duplicate and I have been that thread and several others + on Google. I am doing something wrong and came here to get help on. I am not an expert on jQuery probably like you, and if it worked for 1000 people, that doesn't mean it will work for everyone especially if someone is new like me. Thanks anyway. — pv619, Jun 05 '18 at 08:51
@CBroe, could you please suggest on how I can add a dynamic URL value to the `input` field? I am also searching to do so at the same time. Thanks again :) — pv619, Jun 05 '18 at 08:53
`$(function () { $('#inputline1 input').val(getQueryVariable(variable)); });` this is what I have got, it doesn't seems to work though. Can you please help. Thanks — pv619, Jun 05 '18 at 09:01
I've reopened the question. Please update it with the code you are using — baao, Jun 05 '18 at 09:02
@baao, thanks bro for re-opening it and posting a working example. I tried it but unfortunately it didn't worked for me. I needed it to dynamically update the text input from the url. Nonetheless, I managed to rectify it and thanks for your help, really appreciate it and have a nice day :) — pv619, Jun 05 '18 at 09:31

score 2 · Accepted Answer · answered Jun 05 '18 at 09:27

Got it finally to work, updated a working script below to help anyone in the future:

function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var parms = query.split('&');
                for (var i = 0; i < parms.length; i++) {
                    var pos = parms[i].indexOf('=');
                    if (pos > 0 && variable == parms[i].substring(0, pos)) {
                        return parms[i].substring(pos + 1);;
                    }
                }
                return "";
}

getQueryVariable("inputline1");

$(function () {
        $('#inputline1').val(getQueryVariable('inputline1'))
});

<input type="text" id="inputline1" />

The URL with parameter:

?inputline1=Sample

Get URL parameters with jQuery and display them inside an HTML input text field

1 Answers1

Linked