使用两个提交按钮提交jQuery ajax表单
我有一个看起来像这样的表单：
当我绑定到表单的提交（ $("vote_form").submit() ）时，我似乎无法访问用户单击的图像。 所以我试图绑定点击图像本身（ $(".vote_down, .vote_up").click() ），总是提交表单，无论我是否尝试
- 返回虚假;
- event.stopPropogation（）; 要么
- event.preventDefault（）;
因为所有这些都是forms事件。
-
我应该将$ .post（）附加到form.submit（）事件，如果是这样，我如何判断用户点击了哪个输入，或者
-
我应该将$ .post（）附加到图像点击，如果是这样，我该如何阻止表单提交。
这是我的jQuery代码现在的样子：
$(".vote_up, .vote_down").click(function (event) { $form = $(this).parent("form"); $.post($form.attr("action"), $form.find("input").serialize() + { 'submit': $(this).attr("value") }, function (data) { // do something with data }); return false; // <--- This doesn't prevent form from submitting; what does!? });
根据Emmett的回答，我对此的理想解决方法就是用Javascript本身来杀死表单的提交，如下所示：
$(".vote_form").submit(function() { return false; });
这完全奏效了。
为了完整起见，我在原帖中的一些JS代码需要一点爱。 例如，我添加到序列化函数的方式似乎不起作用。 这样做：
$form.serialize() + "&submit="+ $(this).attr("value")
这是我的整个jQuery代码：
$(".vote_form").submit(function() { return false; }); $(".vote_up, .vote_down").click(function(event) { $form = $(this).parent("form"); $.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) { // do something with response (data) }); });
另一种解决方案是使用隐藏字段，并让onclick事件更新其值。 这使您可以从javascript以及隐藏字段将被发布的服务器上进行访问。
您可以通过单击图像来触发表单提交。 这将与preventDefault（）一起使用。
var vote; $(".vote_up, .vote_down").click(function(event) { vote = $(this).attr("class"); $(".vote_form").trigger("submit"); }); $(".vote_form").submit(function(event) { $form = $(this); $.post($form.attr("action"), $form.serialize() + "&submit="+ vote, function(data) { // do something with response (data) }); event.preventDefault(); });
我没有得到如何return false和preventDefault无法完成他们的工作。 也许尝试用链接的图像替换图像按钮：
$('#vote_form > a').click(function(e) { e.preventDefault(); //one way to know which image was clicked alert($(this).attr('class')); $.post(... });
您始终可以确保通过绑定到提交事件来提交表单，例如：
$('#vote_form').submit(function() { return false; });
尝试添加onsubmit =“return false;” 到您的表单，然后使用javascript提交您的表单：
您还可以尝试使用jquery From Plugin作为各种通过ajax提交表单的好工具。
如果不使用Form插件（您应该使用它），您应该处理提交事件。 代码将保持非常接近原始：
$("form").submit(function()) { $.post($(this).attr("action"), $(this).serialize(), function(data) { // work with the response }); return false; });
var form = jQuery('#myform'); var data = form.serialize(); // add the button to the form data var btn = jQuery('button[name=mybuttonname]').attr('value'); data += '&yourpostname=' + btn; var ajax = jQuery.ajax({ url: url, type: 'POST', data: data, statusCode: { 404: function () { alert("page not found"); } } }); ... rest of your code ...