Форма представления элементов ввода, не входящих в форму

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 ...