HTML表多表单Ajax提交
HTML表多表单Ajax提交
提问于 2015-11-10 06:23:44
我有一个包含多行和多个表单的表，我正在尝试将每个表单发送到我的PHP脚本。
当不使用Ajax时，所有表单都会正确更新。但是，使用Ajax时，我无法让PHP脚本工作。怎样才能让Ajax正常工作？
在HTML部分，我有多行属于一个表单(在下面的例子中，所有行都属于一个表单，我有多个这样的表单)。我确实读到过表单标签不能在TR标签下，甚至知道当我查看代码时它看起来非常丑陋，但我不确定我还能如何构建表。
Ajax
$(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>Stack Overflow用户
发布于 2015-11-10 08:07:07
您的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
})
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33619441
复制相关文章
相似问题
腾讯云开发者
