在jquery中使用多个引导按钮
在jquery中使用多个引导按钮
提问于 2016-02-26 15:52:26
我使用多个引导按钮，每个按钮使用jquery从数据库中删除特定项。下面是一些HTML示例。
<form name = "reply" id="replyForm" ><tr>
<td><a href="projectdetails.php?id=vofQxri7mZvW1nsdpUZuaQDMIws82OOX">Demo</a></td>
<td>Internal Projects <input type="hidden" name="id" value="vofQxri7mZvW1nsdpUZuaQDMIws82OOX"></td>
<td><button id = "newThread" class="btn btn-primary" type="submit">Delete</button></td></form>
</tr>
<form name = "reply" id="replyForm" ><tr>
<td><a href="projectdetails.php?id=lYQPeqRzrwjjOpd7dgsLMf5IP2vBqZKV">Demo1 Project</a></td>
<td>Demo Client <input type="hidden" name="id" value="lYQPeqRzrwjjOpd7dgsLMf5IP2vBqZKV"></td>
<td><button id = "newThread" class="btn btn-primary" type="submit">Delete</button></td></form>我使用以下Javascript向服务器发送信息
$('.btn').on('click', function(e){
e.preventDefault(); // prevent the default click action
var $form = $('#replyForm');
$.ajax({
url: 'delproject.php',
type: 'Post',
data: $form.serialize(),
success: function (data, textStatus, request) {
alert(data);
// ajax success callback
},
error: function (response) {
alert('ajax failed');
// ajax error callback
},
});
});没有数据被发送到服务器。我认为这是因为Ajax没有选择这个表单。如何确保将正确的数据发送到服务器？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-26 15:57:53
看起来，您只需要抓取按钮所属的特定表单。目前，您的$form变量正在抓取页面上的两个表单，您不想要这两个表单。
因此，改变这一点：
var $form = $('#replyForm');对此：
var $form = $(this).parent('form');现在，当您单击一个按钮时，它只抓取它所属的一个表单，然后序列化并发送。
这里有一个演示：https://jsbin.com/wesutajebe/1/edit?html,js,output。单击Delete按钮，您将看到正确的表单数据正在序列化。
附带注意:使用相同ID的多个表单(或任何元素)通常不是一个好主意。
实际上，如果您只需要将这个id变量发送到服务器，表单通常就有点过分了。这里有一种不同的方法，您可能会发现它更简单：
https://jsbin.com/vurajogaye/1/edit?html,js,output
我已经删除了所有的表单标签，甚至隐藏的输入。按钮本身就有您需要的ID。javascript处理程序使用更简单的jQuery post方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35656145
复制相关文章
相似问题
腾讯云开发者
