Question

我有一个网页，其中表单输入元素位于不同的位置，并且不能在物理上包含在同一表单中。在表单提交中包含这些输入值的最佳方法是什么？

请注意，我想要提交实际的帖子，而不是AJAX提交。

Answer 1

向表单添加onsubmit处理程序，并在处理程序中将各种输入中的值复制到表单中的隐藏输入。

但请注意，对于关闭JavaScript的用户来说，这显然不起作用。

<form id="mainForm" action="yoururl">
   <!-- visible form fields here, then hidden
        fields to hold values from non-form fields -->    

   <input type="hidden" id="field1" name="field1">
   <input type="hidden" id="field2" name="field2">
   <input type="hidden" id="field3" name="field3">
   <input type="hidden" id="field4" name="field4">
</form>

<!-- other fields to be submitted with mainForm -->    
<input type="text" id="displayfield1">
<input type="text" id="displayfield2">
<input type="text" id="displayfield3">
<input type="text" id="displayfield4">

<script>
   document.getElementById("mainForm").onsubmit = function(e) {
       e = e || window.event;
       var theForm = e.target || e.srcElement;

       // could copy fields across manually, one by one:
       document.getElementById("field1").value =
                             document.getElementById("displayField1").value;

       // or you could copy based on matching field ids:
       var fields = theForm.getElementsByTagName("input"),
           i,
           df;

       for (i=0; i < fields.length; i++) {
           if (fields[i].type === "hidden") {
              df = document.getElementById("display" + fields[i].id);
              if (df != null)
                 fields[i].value = df.value;
           }
       }

       // could return false here if there was some failed
       // validation and you wanted to stop the form submitting
       return true;
   };
</script>

对于有点丑陋的代码感到抱歉 - 只是把我的头脑里的东西扯了出来。如果你有兴趣，你可以在大约三行jQuery中完成以上所有......

表单提交未包含在表单中的输入元素

1 个答案: