Submitting a jQuery ajax form with two submit buttons
Solution 1
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)
});
});
Solution 2
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.
Solution 3
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();
});
Solution 4
I don't get how return false
and preventDefault
failed to do their job. Maybe try replacing the image buttons with linked images:
<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(...
});
You can always ensure that a form does not submit by binding to the submit event, e.g.:
$('#vote_form').submit(function() {
return false;
});
Ankit Shah
Updated on July 09, 2022Comments
-
Ankit Shah almost 2 years
I have a form that looks like this:
<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>
When I bind to the form's submit (
$("vote_form").submit()
), I don't seem to have access to which image the user clicked on. So I'm trying to bind to clicking on the image itself ($(".vote_down, .vote_up").click()
), which always submits the form, regardless of whether I try- return false;
- event.stopPropogation(); or
- event.preventDefault();
because all of those are form events.
Should I attach my $.post() to the form.submit() event, and if so, how do I tell which input the user clicked on, or
Should I attach my $.post() to the image click, and if so, how do I prevent the form from submitting also.
Here is what my jQuery code looks like now:
$(".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!? });
-
Ankit Shah over 14 yearsLike I said in the original question, I can do this, but I still need to know what image-input the user clicked on within this function. event.target == the form, unfortunately.
-
Ankit Shah over 14 yearsLike I said in the question, I have done what you've suggested in the second part, but I do not have access to which input the user clicked on. Further, I do not want to switch to linked images -- while that may work with Ajax, I still want my form to work for users w/o Javascript, as it currently does (and wouldn't with plain images).
-
Ankit Shah over 14 yearsWhile I'm not convinced this is an elegant solution, it really led me to a workable fix, which is to add: $(".vote_form").submit(function() { return false; }); (I certainly don't want to add "onsubmit='return false;'" to the form since I want the form to work w/o Ajax.)
-
mhenrixon almost 13 yearsThanks a bunch for this. Shortened my existing attempt quite a bit!
-
Bengt over 11 yearsWhy not avoid hardcoding
"&submit="
by using$this.attr("name")
? -
PaulSkinner about 11 years@bngtlrs I'd guess because that's a function call overhead that's simply unnecessary.
-
Bengt about 11 years@PaulSkinner Yes, the function call is unnecessary here, but I would reject calling it overhead, since it will typically not be called very frequently. My bet would be that the reusability will be worth omitting possibly premature optimization.
-
user1954544 over 9 yearsI'm using
.ajaxForm()
, my solution for auto send is.ajaxForm({}).submit();
. Will send ajax call without submit button and on custom event.