是否可以拆分一个 <form> 在页面上标记？

Question

Is it actually possible to split Tags like this:

Form with a ComboBox field (submites with onchange)

Some random content

Another form with an ComboBox (submites with onchange)

Is it actually possible to send the data together if i change the state of just one box?

Answer 1

HTML 5 introduces the form attribute for input and other form controls, which allows an element to be part of a form without actually appearing inside it.

<input form="form_id" name="foo">

Browser support is still somewhat limited though so you would probably be better off just making the form contain the middle content too.

If you wanted to add JavaScript, then (when either of the forms was submitted) you could just loop through all the form controls in the second form and append them to the first form. The second form would then trigger the submission of the first one.

(untested)

var form1 = document.getElementById('f1');
var form2 = document.getElementById('f2');

function copy() {
    for (var i = 0; i < form2.elements.length; i++) {
        var inp = document.createElement('input');
        inp.type = "hidden";
        inp.name = form2.elements[i].name;
        inp.value = form2.elements[i].value;
        form1.appendChild(inp);
    }
}

form1.addEventListener('submit', copy);
form2.addEventListener('submit', function (e) {
    e.preventDefault();
    copy();
    form1.submit();
});

Just making the form big enough to hold all the controls is still the simplest and most reliable approach though.

Answer 2

A likely solution might be using jQuery to append either form's data to the other while the targeted form is submitting. The other option is to use .serialize() function and add the two form data together and then submit the form via aJax.

However, a downside to this solution is that it will not work when java is disabled from the client end.

A simple template would be:

jQuery("#form1").submit(function() {
  //option 1 - add form 2 data to form 1.
  //option 2 -it is possible to use .serialize() function as well, just add two form value after .serialize() together and send the form via aJax.
})