Advanced Search

Prepopulate form with values from querystring

/ Published in: JavaScript
Save to your folder(s)
Code matches querysting data to form feilds on the page based on the feild name.
I've added the example querystring to the body of the page.

Found at: http://codingforums.com/showthread.php?t=198419
Code by: Old Pedant

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function populate(form)
  5. {
  6.     if ( location.search == null || location.search.length < 1 ) return; // no querystring
  7.  
  8.     var pairs = location.search.substring(1).split("&");
  9.     for ( var p = 0; p < pairs.length; ++p )
  10.     {
  11.         var pair = pairs[p].split("=");
  12.         var name = pair[0];
  13.         var value = unescape( pair[1].replace(/\+/g, " ") );
  14.         var fld = form.elements[name];
  15.         var ftype = null;
  16.         var farray = false;
  17.         var atype = Array;
  18.  
  19.         if ( fld != null )
  20.         {
  21.             if ( fld.length != null && fld.length >= 1 && fld[0].type != null && fld[0].type != undefined )
  22.             {
  23.                 ftype = fld[0].type;             
  24.                 farray = true;
  25.             } else {
  26.                 ftype = fld.type;
  27.             }
  28.         }
  29.         switch ( ftype )
  30.         {
  31.             case "text": case "hidden": case "textarea":
  32.                 if ( farray ) fld = fld[0]; // only handle first-named for this type
  33.                 fld.value = value;
  34.                 break;
  35.             case "select-one": case "select-multiple":
  36.                 if ( farray ) fld = fld[0]; // only handle first-named for this type
  37.                 for ( var o = 0; o < fld.options.length; ++o )
  38.                 {
  39.                     var opt = fld.options[o];
  40.                     var oval = opt.value;
  41.                     if ( oval == null || oval == "" ) oval = opt.text;
  42.                     if ( oval == value )
  43.                     {
  44.                         opt.selected = true;
  45.                         break;
  46.                     }
  47.                 }
  48.                 break;
  49.             case "checkbox": case "radio":
  50.                 if ( ! farray )
  51.                 {
  52.                     // single checbox or radio of that name:
  53.                     fld.checked = true;
  54.                 } else {
  55.                     for ( var cr = 0; cr < fld.length; ++cr )
  56.                     {
  57.                         if ( fld[cr].value == value )
  58.                         {
  59.                             fld[cr].checked = true;
  60.                             break;
  61.                         }
  62.                     }
  63.                 }
  64.                 break;
  65.             default:
  66.                 alert("Unknown field type encountered for field " + name + ": " + ftype);
  67.                 break;
  68.         } // end of switch
  69.     } // end of loop on fields from qs
  70. }
  71. </script>
  72. </head>
  73. <body onload="populate(document.TheForm);">
  74. <p>
  75. Example querystring to try:<br/> ?sel1=Three&sel2=2&sel2=4&cb1=2&cb1=3&rb1=C&text1=put+some+random+text+here&ta1=all+fun+and+games...
  76. </p>
  77. <form name="TheForm">
  78. Text1<input type="text" name="text1" /><br/><br/>
  79. Checkboxs: 1:<input type="checkbox" name="cb1" value="1" />
  80. 2: <input type="checkbox" name="cb1" value="2" />
  81. 3: <input type="checkbox" name="cb1" value="3" />
  82. <br/><br/>
  83. RB1<br/>
  84. A<input type="radio" name="rb1" value="A" /><br/>
  85. B<input type="radio" name="rb1" value="B" /><br/>
  86. C<input type="radio" name="rb1" value="C" /><br/>
  87. <br/><br/>
  88. <textarea name="ta1" rows=4 cols=40></textarea>
  89. <br/><br/>
  90. Sel1:
  91. <select name="sel1">
  92.    <option>One</option>
  93.    <option>Two</option>
  94.    <option>Three</option>
  95.    <option>Four</option>
  96. </select>
  97. <br/><br/>
  98. Sel2:
  99. <select name="sel2" multiple>
  100.    <option value="1">One</option>
  101.    <option value="2">Two</option>
  102.    <option value="3">Three</option>
  103.    <option value="4">Four</option>
  104. </select>
  105. <br/>
  106. </form>
  107. </body>
  108. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.