フォームに含まれていない入力要素のフォームの提出

Question

フォーム入力要素が異なる場所にあり、物理的に同じフォームに含まれないWebページがあります。これらの入力値をフォーム提出に含める最良の方法は何ですか？

実際の投稿送信を行いたいのですが、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の約3行で上記のすべてを行うことができます。