HTML表格多个表单Ajax提交

Question

我有一个包含多行和多个表单的表格，我正在尝试将每个表单发送到我的 PHP 脚本。

当不使用 Ajax 时，所有表单都会正确更新。但是，使用 Ajax，我无法让 PHP 脚本正常工作。如何让 Ajax 工作？

在 HTML 部分，我有多个行属于一个表单（在下面的示例中，所有行都属于一个表单，我有多个）。我确实读过 FORM 标签不能在 TR 标签下，甚至知道当我查看代码时它看起来很丑陋，但我不确定我还能如何构建表格。

阿贾克斯

$(document).ready(function(){
        // click on button submit
        $("#submit").on('click', function(){
            // send ajax
            $.ajax({
                url: 'post.php', // url where to submit the request
                type : "POST", // type of action POST || GET
                dataType : 'json', // data type
                data : $(this).serialize(), // post data || get data
            })
        });
    });

HTML

<tbody>
<tr>
    <form id="form1" method="POST" action=""></form>
    <input type="hidden" name="ID" value="">
    <td rowspan="6">bls</td>
    <td rowspan="6">qasachin.dwxmp41@mailinator.com</td>
    <td>Records</td>
    <td>10</td>
    <td>1</td>
    <td><input type="text" size="1" value="" name="Records"></td>
    <td>Contact</td>
    <td></td>
    <td><input type="text" size="1" value="" name="Contact"></td>
    <td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td>
    <td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td>
</tr>
<tr>
    <td>Centers</td>
    <td>15</td>
    <td>1</td>
    <td><input type="text" size="1" value="" name="Centers"></td>
    <td>Company</td>
    <td>Tadas</td>
    <td><input type="text" size="1" value="" name="Company"></td>
</tr>
<tr>
    <td>Duration</td>
    <td>10</td>
    <td>0</td>
    <td><input type="text" size="1" value="" name="Duration"></td>
    <td>Address</td>
    <td></td>
    <td><input type="text" size="1" value="" name="Address"></td>
    <td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td>
</tr>
<tr>
    <td>GCP</td>
    <td>0</td>
    <td></td>
    <td><input type="text" size="1" value="" name="GCP"></td>
    <td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td>
    <td><a target="_blank" href="mailto:qasachin.dwxmp41@mailinator.com" class="btn btn-success>Email</a></td>
</tr>
<tr>
    <td>RAND</td>
    <td>0</td>
    <td>0</td>
    <td><input type="text" size="1" value="" name="RAND"></td>
    <td>City</td>
    <td>Amsterdam</td>
    <td><input type="text" size="1" value="" name="City"></td>
</tr>
<tr>
    <td>Price</td>
    <td>€39</td>
    <td>€18</td>
    <td><input type="text" size="1" value="" name="Price"></td>
    <td>Departm</td>
    <td>IT</td>
    <td><input type="text" size="1" value="" name="Departm"></td>
</tr>

Answer 1

您的 HTML 标记无效。

只有td 和th 元素可以作为tr 的子元素。

您将立即关闭您的form 标签。这意味着您的表单中没有任何字段。

您应该将整个table 放入您的form。

<form id="form1" method="POST" action="">
    <input type="hidden" name="ID" value="">
    <table>
        <tbody>
            <tr>
                <td rowspan="6">bls</td>
                <td rowspan="6">qasachin.dwxmp41@mailinator.com</td>
                <td>Records</td>
                <td>10</td>
                <td>1</td>
                <td><input type="text" size="1" value="" name="Records"></td>
                <td>Contact</td>
                <td></td>
                <td><input type="text" size="1" value="" name="Contact"></td>
                <td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td>
                <td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td>
            </tr>
            <tr>
                <td>Centers</td>
                <td>15</td>
                <td>1</td>
                <td><input type="text" size="1" value="" name="Centers"></td>
                <td>Company</td>
                <td>Tadas</td>
                <td><input type="text" size="1" value="" name="Company"></td>
            </tr>
            <tr>
                <td>Duration</td>
                <td>10</td>
                <td>0</td>
                <td><input type="text" size="1" value="" name="Duration"></td>
                <td>Address</td>
                <td></td>
                <td><input type="text" size="1" value="" name="Address"></td>
                <td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td>
            </tr>
            <tr>
                <td>GCP</td>
                <td>0</td>
                <td></td>
                <td><input type="text" size="1" value="" name="GCP"></td>
                <td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td>
                <td><a target="_blank" href="mailto:qasachin.dwxmp41@mailinator.com" class="btn btn-success>Email</a></td>
            </tr>
            <tr>
                <td>RAND</td>
                <td>0</td>
                <td>0</td>
                <td><input type="text" size="1" value="" name="RAND"></td>
                <td>City</td>
                <td>Amsterdam</td>
                <td><input type="text" size="1" value="" name="City"></td>
            </tr>
            <tr>
                <td>Price</td>
                <td>€39</td>
                <td>€18</td>
                <td><input type="text" size="1" value="" name="Price"></td>
                <td>Departm</td>
                <td>IT</td>
                <td><input type="text" size="1" value="" name="Departm"></td>
            </tr>
        </tbody>
    </table>
</form>

您还需要处理表单上的submit 事件，否则您的页面将被重新加载。
您可以通过在处理程序中调用 e.preventDefault() 来做到这一点。

$(function(){
    // click on button submit
    $("#form1").on("submit", function(e){
        e.preventDefault(); // prevent page reload on submit
        // send ajax
        $.ajax({
            url: 'post.php', // url where to submit the request
            type : "POST", // type of action POST || GET
            dataType : 'json', // data type
            data : $(this).serialize(), // post data || get data
        })
    });
});