I'm at my wits' end with this issue. Hours of searching online and reading the manual have been fruitless. I need insights from experts on how to handle a form that is spread across multiple divs. Initially, I tried wrapping all the divs in a single form like this and resorted to hoping for the best:
snippet (JSfiddle):
<div class='A'>
<form id='fooForm' method='post' action='foo.php'>
<div class='B1'>
...
</div>
<div class='B2'>
<div class='B2-1'>
...
</div>
<div class='B2-2'>
...
</div>
</div>
</form>
</div>
Unfortunately, everything just ended up jumbled together.
result:
So, instead, I moved the form outside into a dummy form and planned to update the values later using jQuery's submit method. Here's how I approached it:
snippet (JSfiddle):
<div class='A'>
<div class='B1'>
...
</div>
<div class='B2'>
<div class='B2-1'>
...
</div>
<div class='B2-2'>
...
</div>
...
</div>
</div>
<form id='fooForm' method='post' action='foo.php'>
</form>
Now, the layout appears as desired.
result:
However, now I face the task of manually creating and updating all the values by adding dummy input and select elements whenever the user makes changes or doing so right before calling form.submit. Hence, my question: Can we achieve the functionality of a form using jQuery's post() method? Forms do streamline data packaging and submission to the server, but they can be restricting.