在关联数组中发送所有数据的发布请求

Question

I want to create a table in which it is editable in each of it row. At the same time I want to be able to take all the rows of data and put it in a file.

The problem I am having is when I click the button with id = download, I couldnt get all the data in all rows but only the first row as if I clicked the submit button for the id = firstRow.

Anyone know how can I retrieve all the rows of data in one click of a button? I am just using PHP currently so it would be a great help to solve this using PHP, or HTML for that matter.

<form method="post" action="allRows.php">
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Single</th>
            <th>Test button</th>
        </tr>
        <tr>
            <form action="oneRow.php" method="post">
                <td><input type="text" name="person[0][name]"></td>
                <td><input type="text" name="person[0][age]"></td>
                <td><input type="text" name="person[0][sex]"></td>
                <td><input type="text" name="person[0][spouse]"></td>
                <td><input id="firstRow" type="submit" name="test"></td>
            </form>
        </tr>
        <tr>
            <form action="oneRow.php" method="post">
                <td><input type="text" name="person[1][name]"></td>
                <td><input type="text" name="person[1][age]"></td>
                <td><input type="text" name="person[1][sex]"></td>
                <td><input type="text" name="person[1][spouse]"></td>
                <td><input id="secondRow" type="submit" name="test"></td>
            </form>
        </tr>
    </table>
    <input id="download" type="submit" name="Download" value="Download">
</form>

Answer 1

You can not nest forms inside forms, that is invalid html, so if you want to have all those features, you will need to employ javascript to submit all the forms at once by assembling them into a js form but pure PHP is not possible unless you submit one form with all the fields at one time.

<!-- You need the jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Single</th>
            <th>Test button</th>
        </tr>
        <tr>
            <!-- You need to add class="rowform" to each form tag -->
            <form action="oneRow.php" method="post" class="rowform">
                <td><input type="text" name="person[0][name]"></td>
                <td><input type="text" name="person[0][age]"></td>
                <td><input type="text" name="person[0][sex]"></td>
                <td><input type="text" name="person[0][spouse]"></td>
                <td><input id="firstRow" type="submit" name="test"></td>
            </form>
        </tr>
        <tr>
            <form action="oneRow.php" method="post" class="rowform">
                <td><input type="text" name="person[1][name]"></td>
                <td><input type="text" name="person[1][age]"></td>
                <td><input type="text" name="person[1][sex]"></td>
                <td><input type="text" name="person[1][spouse]"></td>
                <td><input id="secondRow" type="submit" name="test"></td>
            </form>
        </tr>
    </table>
<!-- Create the empty download all form, add id="allrows" -->
<form method="post" action="allRows.php" id="allrows">
    <input id="download" type="submit" name="Download" value="Download">
</form>

<script>
// Start document listener
$(document).ready(function(e) {
    // Listen for the download form to submit
    $('#allrows').on('submit',function(e) {
        // Stop it from reloading the page (submitting the form)
        e.preventDefault();
        // Create a storage array
        var data = [];
        // Loop through each form (each form tag needs the "rowform" class
        $.each($('.rowform'),function(k,v) {
            // Fetch all the data from the form
            data[k] = $(v).serialize();
        });
        // Create a storage array for the form
        var form = [];
        // Start building a form
        form.push('<form action="allRows.php" method="post">');
        // Implode the form data from each form
        form.push('<input name="allfields[]" value="'+data.join('" /><input name="allfields[]" value="')+'" />');
        // Create a submit field
        form.push('<input type="submit" value="submit" /></form>');
        // Combine the html form
        form    =   form.join('');
        // Submit the form
        $(form).submit();
    });
});
</script>

In the php, you will need to check for the allfields key so:

if(!empty($_POST['allfields'])) {
    // do code
}

What you will see is something like:

Array
(
    [allfields] => Array
        (
            [0] => person%5B0%5D%5Bname%5D=qewrqwer&person%5B0%5D%5Bage%5D=adsf&person%5B0%5D%5Bsex%5D=fdsdfds&person%5B0%5D%5Bspouse%5D=sdfds
            [1] => person%5B1%5D%5Bname%5D=sssssss&person%5B1%5D%5Bage%5D=sssweeeee&person%5B1%5D%5Bsex%5D=qqqqqq&person%5B1%5D%5Bspouse%5D=222222
        )
)

And you will see that field have a series of arrays and query strings. Process how you want from that point using urldecode() etc.