Pre-populate form fields with query string paramaters

Hi,

I'm using a reg ex script to separate query string values, but can't get the values displayed in the form input fields. I'm not sure that one can use JavaScript document.write inside the form field value. The format of the url should be something like this example.htm?a=aValue&b=bValue

Here is the HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Tuesday</title>
 <script>
 function getQuerystring(key, default_)
 {
 if (default_==null) default_=""; 
 key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
 var qs = regex.exec(window.location.href);
 var a_value = getQuerystring('a');
 var b_value = getQuerystring('b');
 $("#a").val(a_value);
 if(qs == null)
 return default_;
 else
 return qs[1];
 }
</script>
</head>
<body>
 <form id="myform">
 <table>
 <tr><td>Val A: </td><td><input type="text" id="a" value=""/></td></tr>
 <tr><td>Val B: </td><td><input type="text" id="b" value="" /></td></tr>
 </table>
 </form>
</body>
</html>

I have tried to update the form field with

$("#a").val(a_value);

. It would be nice to get this done with jQuery. Am I doing it completely wrong or am I on the right track?

Also, the form action should be POST, to post the new data, but will I require a GET action to pull in the parameters?

The pre-populated form fields will be read-only. There will be additional fields that will be filled out.

Thank you an advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">

<title>Monday</title>

</head>
<body>

<div>
<a href="tuesday.html?a=aValue&b=bValue">Tuesday</a>
</div>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Tuesday</title>

<style type="text/css">
#inp1,#inp3 {
background-color:#ccc;
}
</style>

<script type="text/javascript">
function getQueryString(){

var url=location.href;

if(url.split('?')[1]!=undefined) {
var qs=url.split('?')[1];

String.prototype.splitQueryString=function() {
return this.split(/[=+&]/);
}

for(var c=1;c<qs.splitQueryString().length;c+=2) {
document.getElementById('inp'+c).value=qs.splitQueryString()[c];
}
}
}
window.addEventListener?
window.addEventListener('load',getQueryString,false):
window.attachEvent('onload',getQueryString);
</script>

</head>
<body>

<form action="">
<table><tr>
<td>Val A: </td><td><input type="text" id="inp1" name="A" readonly="readonly"></td>
</tr><tr>
<td>Val B: </td><td><input type="text" id="inp3" name="B" readonly="readonly"></td>
</tr></table>
</form>

</body>
</html>


<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
function getQueryString() { 
  var qs = document.location.search,
    pairs,
    pair,
    key,
    value,
    el,
    i,
    n;
  if (qs.length > 0) {
    qs = qs.substr(1); // strip off the ?
    pairs = qs.split(/&/); // [foo=0, bar=1, ...]
    for (i = 0, n = pairs.length; i < n; i++) {
      pair = pairs[i].split(/=/); // [foo,0]
      key = pair[0];
      value = decodeURIComponent(pair[1].replace(/\+/g, " "));
      el = document.getElementById(key);
      if (el) {
        el.value = value;
      }
    }
    pairs = null;
    pair = null;
    el = null;
  }
} 
window.addEventListener ? window.addEventListener('load',getQueryString,false) : window.attachEvent('onload',getQueryString); 
</script>
<form method="get">
<input id="foo" name="foo">
<input id="bar" name="bar">
<input id="baz" name="baz">
<input type="submit" value="submit">
</form>
</body>
</html>

Pre-populate form fields with query string paramaters

SilverLining

Fotiman

SilverLining

birdbrain

Fotiman

SilverLining

birdbrain

Fotiman

SilverLining

Fotiman

SilverLining

Fotiman

SilverLining

Fotiman

SilverLining

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week