Posted By

Carolyne on 11/05/10


Tagged

form querysting


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

poorpaddy


Prepopulate form with values from querystring


 / Published in: JavaScript
 

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

  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
Posted By: poorpaddy on January 4, 2011

I can only seem to get this code to work in internet explorer. Any reason it would work in Firefox?

You need to login to post a comment.