用querystring中的值预填充窗体

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用querystring中的值预填充窗体相关的知识，希望对你有一定的参考价值。

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>

以上是关于用querystring中的值预填充窗体的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 使用查询字符串中的值预填充表单

我想围绕窗体中的按钮控件画一个矩形，然后在矩形里填充图片或颜色，用API怎么做？高分

QueryString 中的填充值

一行代码提取url中querystring的某个key的值

如何使用 access 数据库中的值填充列表或数组

如何将 url 中的参数传递给背包创建表单