I have two forms that look like this:
<h2>First form</h2>
<form id="first-form">
<table>
<tr>
<td>
<input type="text" name="left[]" value="">
</td>
<td>
<input type="text" name="right[]" value="">
</td>
</tr>
<tr>
<td>
<input type="text" name="left[]" value="">
</td>
<td>
<input type="text" name="right[]" value="">
</td>
</tr>
<tr>
<td>
<input type="text" name="left[]" value="">
</td>
<td>
<input type="text" name="right[]" value="">
</td>
</tr>
<tr>
<td>
<input type="text" name="left[]" value="">
</td>
<td>
<input type="text" name="right[]" value="">
</td>
</tr>
</table>
</form>
<!-- some more HTML -->
<h2>Second form</h2>
<form id="second-form">
<label>
<input type="search" name="sentence" value="i like the bananas">
</label>
<label>
<input type="text" name="parse-as" value="S">
</label>
<label>
<select name="include-features">
<option>Yes</option>
<option selected="selected">No</option>
</select>
</label>
<label>
<select name="show-earley">
<option>Yes</option>
<option selected="selected">No</option>
</select>
</label>
<button type="submit">Parse</button>
</form>Note that the first form can contain more rows; the user can add more rows to the form. As you can see, there's only one submit button. That's because both forms have to be submitted together. In jQuery I'd do something like this:
$("#second-form").submit(function(event) {
$("first-form").submit();
event.preventDefault();
});
As the front-end developer of the team, I need to pass down the values of both forms to the back-end. Unfortunately I'm at loss how to do this. I figured I could do something like this:
$("#second-form").on("submit", function(event) {
$("#first-form").submit();
$.post("php/do.php", $("#second-form").serialize());
event.preventDefault();
});
$("#first-form").on("submit", function(event) {
$.post("php/do.php", $("#first-form").serializeArray());
event.preventDefault();
});
.serializeArray() seems necessary because of the array-like values in the HTML for #first-form. In the second form, however, we don't need an array. The issue I'm having now is, what code do I need in do.php that can handle the input. How do you access the data, i.e. the serialized forms in PHP?
I tried a number of things such as
<?php
$data = parse_str($_POST["right[]"]);
var_dump($data);
$date1 = parse_str($_POST["right[][0]"]);
var_dump($data);
$data2 = parse_str($_POST["right[][1]"]);
var_dump($data);
?>
But all of these return an Undefined index error, which seems to mean that my "selector" is wrong. How would I go about selecting the array from the first form, and the values of the second form in PHP? And is my jQuery method of submitting first-form together with the second correct?
