提交有两个jQuery的Ajax表单提交按钮

Question

我有一个看起来像这样的形式：

<form action="/vote/" method="post" class="vote_form"> 
    <input type="hidden" name="question_id" value="10" /> 
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" /> 
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" /> 
</form> 

当我绑定到表单的提交（$("vote_form").submit()），我似乎没有能够访问该图像用户点击。所以我试图绑定点击图像本身（$(".vote_down, .vote_up").click()），它总是提交表单，不管我是否尝试

• return false;
• event.stopPropogation（）;或
• event.preventDefault（）;

因为所有这些都是窗体事件。

1. 我应该附上我的$。员额（）到form.submit（）事件，如果是这样，我怎么告诉用户点击该输入，或

2. 我应该附上我$ .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!? 
}); 

Answer 1

基于艾美特的回答，我的这个理想的修复只是杀形式是用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) 
    }); 
}); 

Answer 2

我不明白怎么return false和preventDefault没有做好自己的工作。也许尝试与链接的图像替换图像按钮：

<a href="#" class="vote_down"><img src="vote_down.png"/></a> 

$('#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; 
}); 

Answer 3

尝试添加的onsubmit =“返回false ;”你的表单，然后使用javascript提交表单：

<form action="/vote/" method="post" name="vote_form" class="vote_form" onsubmit="return false;"> 
    <input type="hidden" name="question_id" value="10" /> 
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" onclick="imageClicked(this)"/> 
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" onclick="imageClicked(this)"/> 
</form> 

<script> 
function imageClicked(img) { 
    alert(img.className); 
    document.forms["vote_form"].submit(); 
} 
</script> 

Answer 4

你也可以尝试一下的jQuery插件从它作为通过AJAX提交表单各种漂亮的工具。

http://malsup.com/jquery/form/

Answer 5

而不诉诸表格插件（你应该使用它），你应该被处理，而不是提交事件。该代码会留下非常接近原始：

$("form").submit(function()) { 
    $.post($(this).attr("action"), $(this).serialize(), function(data) { 
    // work with the response 
    }); 
    return false; 
}); 

Answer 6

另一种解决方案是使用隐藏域，并有onclick事件更新它的值。 这使您可以从javascript访问，也可以在隐藏字段 发布的服务器上访问。

Answer 7

您可以通过单击图像来触发表单提交。这将与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(); 
}); 

Answer 8

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 ...