Submitting a jQuery ajax form with two submit buttons
Based on Emmett's answer, my ideal fix for this was just to kill the form's submit with Javascript itself, like this:
$(".vote_form").submit(function() { return false; });
And that totally worked.
For completeness, some of my JS code in the original post need a little love. For example, the way I was adding to the serialize function didn't seem to work. This did:
$form.serialize() + "&submit="+ $(this).attr("value")
Here's my entire jQuery code:
$(".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)
});
});
You can trigger the form submit on the click of the images. This will work with the 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();
});
Another solution is to use a hidden field, and have the onclick event update its value. This gives you access from javascript, as well as on the server where the hidden field will get posted.