Using Javascript to pass a parameter from a URL to a hidden form field

Question

I wasn to be able to pass and ID such as '123456' from a URL:

http://www.mysite.com/page.html?ID=123456

to a hidden form field.

I found a Javascript that lets me write the ID to a page but I don't know how to add the value to the value="" bit of a hidden input field.

Any ideas much appreciated!

The JS I am using is:

<script> 
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]; 
    }
  } 
  alert('Query Variable ' + variable + ' not found'); 
}   
</script>

Cyclonecode · Accepted Answer · 2022-05-10 07:14:22Z

2

If you already have the value you could do like this with jQuery:

 $('#your-input-field').val(the_value);

 <input type="hidden" id="your-input-field" />

without jQuery you would do like this:

 e = document.getElementById('your-input-field');
 e.value = the_value;

Here is an example using your code, I recommend that you look into jQuery - it's much easier to use than plain javascript and your code will work on all browsers:

  <script type="text/javascript">
  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]; 
     }
   } 
 }
 function onLoad() {
    var value = getQueryVariable("ID");
    var e = document.getElementById('your-field');
    e.value = value;
 }
 </script>
 <body onload="onLoad()">
     <!-- your form and hidden field goes here -->
     <input type="hidden" name="your-field" id="your-field" />

edited May 10, 2022 at 7:14

answered Nov 24, 2011 at 2:00

Cyclonecode

30.4k11 gold badges77 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lawrence Over a year ago

Hi, I've edited the question to include the JS I am using to get the paramater from the URL. Not sure where to put your code... thanks!

Lawrence Over a year ago

This works perfectly, thanks! I'll try and get it working using jQuery now.

Matthew · Accepted Answer · 2011-11-24 02:03:35Z

1

window.location.search

...will give you the query string part of your URL

So in this case it will return "?ID=123456".

Anything else or is that enough to go on?

answered Nov 24, 2011 at 2:03

Matthew

8,47610 gold badges41 silver badges67 bronze badges

2 Comments

Lawrence Over a year ago

I've got this covered (I think) with the code I have already - see edited question. Thanks.

Matthew Over a year ago

so does document.getElementById("yourInput").value = getQueryVariable("id"); Sound ok?

Ricardo Marimon · Accepted Answer · 2011-11-24 02:03:49Z

0

This link that uses a jQUery might help you url-parameters. Once you have the value you can do:

$('#input-id').val($.getUrlVar('url-parameter'));

answered Nov 24, 2011 at 2:03

Ricardo Marimon

10.8k9 gold badges55 silver badges62 bronze badges

1 Comment

Lawrence Over a year ago

Hi, how would I about adding a value to a hidden field? Bear in mind I don't know JS.

Collectives™ on Stack Overflow

Using Javascript to pass a parameter from a URL to a hidden form field

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related