To better explain my issue, let's consider a simple example:
Imagine I have a form that collects information about a user:
<form action="#" method="post" id="myform">
<input type="text" name="fname" />
<input type="text" name="sname" />
<input type="text" name="birthdate" />
<select name="hobbies">
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
I want to send this form data to the server using an AJAX call for a quick response without reloading the page:
$.post("myserverscript.php", $('#myform').serialize(), function(){...callback...});
So far, everything is working well.
Now, I need to gather the same information for multiple users on the same page. To achieve this, I simply add [] to the input names:
<form action="#" method="post" id="myform">
<input type="text" name="fname[]" />
<input type="text" name="sname[]" />
<input type="text" name="birthdate[]" />
<select name="hobbies[]">
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
Again, everything seems to be in order.
However, when I attempt to allow users to select more than one hobby each:
<form action="#" method="post" id="myform">
<input type="text" name="fname[]" />
<input type="text" name="sname[]" />
<input type="text" name="birthdate[]" />
<select name="hobbies[]" multiple>
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
This is where things get tricky. When I use the serialize() function now, all hobbies are grouped into one array, making it difficult to link users with their respective hobbies.
I attempted using [][] instead of [], but this still doesn't provide the desired user-to-hobby mapping.
The only solution I can think of is creating a custom serialize() function to format the data as needed.
Is there a simpler or more elegant approach to tackle this issue?