How to populate an input with query string value(s) using jQuery?

Question

I have an input as below and I would like to prefill the value with the value of the query string so that when I access example.com/my.html?phone=12345 the value 1234 should be displayed in the input field. Sorry if my question seems stupid but I have no kind of experience with jquery and javascript

<input type="phone" value="" class="form-control" id="phonenumber"
placeholder="Phone number">

which server side language (php, jsp, asp) using? – Girish Aug 07 '14 at 08:57 — Girish, Aug 07 '14 at 08:57
Perhaps you could also do this on the server side? – Scimonster Aug 07 '14 at 08:58 — Scimonster, Aug 07 '14 at 08:58

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

8

You can use this script:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

And for setting the values:

$("#phonenumber").val(getParameterByName("phone"));

Reference: How can I get query string values in JavaScript?

Fiddle: http://jsbin.com/hikoyaki/1?phone=12345

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 07 '14 at 08:58

Praveen Kumar Purushothaman

164,888
24
203
252

You can also loop through all the inputs in the form: $('#someform input.form-control').each(function () { var name = $(this).attr('name'); var val = getParameterByName(name); $('input[name="' + name + '"]').val(val); }); – Halceyon Sep 20 '18 at 05:32
@Halceyon yep, possible. – Praveen Kumar Purushothaman Sep 20 '18 at 11:36
It shows the code, but the query string is not updating any info. – kwyntes Dec 03 '18 at 07:16
@qjnr You need to know how JSBin works. There's a clear message. Please fork and try it out. `:)` – Praveen Kumar Purushothaman Dec 03 '18 at 09:17
Oh, my bad! I didn't see it said 'Expired'! :P – kwyntes Dec 03 '18 at 15:47

Manwal · Answer 2 · 2014-08-07T08:59:13.183

1

Use javascript split()

var test = 'example.com/my.html?phone=12345';
var res = test.split("=");
$("#phonenumber").val(res[1]);

Note: Use this if you have only one query string in url.

edited Aug 07 '14 at 08:59

answered Aug 07 '14 at 08:57

Manwal

23,450
12
63
93

in case `?name=test&phone=12345` ?? – Girish Aug 07 '14 at 09:01
Yes @Girish this is for OP if he have only one query parameter `phone` – Manwal Aug 07 '14 at 09:01
there can also `#` with 1 param, you should provide vital solution. – Girish Aug 07 '14 at 09:03
This solution is for OP only regarding `example.com/my.html?phone=12345` situation – Manwal Aug 07 '14 at 09:05

score 1 · Answer 3 · answered Aug 07 '14 at 10:31

1

Here is a Plain javascript way of doing it

CSS-TRICKS

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);
}

answered Aug 07 '14 at 10:31

saikiran

2,247
5
27
42

The question is clearly tagged with `jQuery` and NOT `JavaScript`. – Praveen Kumar Purushothaman Aug 07 '14 at 11:03
8

if Javascript can do it then why bother with jquery ? – Gaurav Shah Aug 07 '14 at 11:20

prakashstar42 · Answer 4 · 2014-08-07T12:25:18.617

-2

Below example may help you

var location = 'example.com/my.html?phone=12345';
var phoneNo = location.split("?phone=")[1];

edited Aug 07 '14 at 12:25

answered Aug 07 '14 at 08:58

prakashstar42

677
1
6
16

I guess the whole thing is about how to get it from the query string not from a string – hey Aug 07 '14 at 08:59
there is no test variable in the solution given – saikiran Aug 07 '14 at 10:54

How to populate an input with query string value(s) using jQuery?

4 Answers4

Fiddle: http://jsbin.com/hikoyaki/1?phone=12345