Jquery - programmatically submitting a form with multiple buttons
I have a form with two buttons. I check which one is clickable on the server side using an name
element attribute in the data POST
and do this:
<input id="reply" name="reply" type="submit" value="{%trans "REPLY"%}">
<input id="delete" name="delete" type="submit" value="{%trans "DELETE"%}">
I am trying to add a confirmation box (using the Boxy plugin) to the click event of a button DELETE
using JQuery. Here is the code:
$(document).ready(function() {
$("#delete").click(function(e){
Boxy.ask('Delete?', {'1':'YES', '2':'NO'}, function(val){
if (val=='1') $("#form").submit();
});
return false;
});
});
Of course, this code causes the form to submit with the button name DELETE
missing from the data POST
. Is there a way to add this data to the data, POST
or a better way to achieve what I am trying to do?
source to share
You can use the named event, unbind on confirmation, then restart:
$(document).ready(function() {
var $delete = $("#delete");
$delete.bind("click.guard", function() {
Boxy.ask("Delete?", {"1": "YES", "2": "NO"}, function(val) {
if (val == "1") {
$delete.unbind("click.guard").click();
}
});
return false;
});
});
source to share
There are several ways to do this.
- If the button name should be GET rather than POST, in the callback,
Boxy
add it to the form action as a request parameter. - You have a hidden field in your form, and then set the value of that field to the name of the button (or whatever you want to use to send the command to the server) in the callback
Boxy
. I can't hack the jQuery example (rather the prototype itself), but it should be pretty trivial. If you're doing a graceful degradation (allowing form submissions without JavaScript), unfortunately, that means you need to validate both the hidden field (JavaScript enabled) and the button name (it isn't) on the server side. - Use # serialize to grab the form data, add a button field to it, and submit the result via jQuery.post . This is not the same as submitting a form because it does not replace the page with the result; you would like to handle this in a callback
post
.
source to share