jquery - programmatically submitting form with multiple buttons

Question

I have a form with two buttons. I check which one is clicked at the server side using the name attribute of the element in the POST data and do stuff accordingly:

<input id="reply" name="reply" type="submit" value="{%trans "REPLY"%}">
<input id="delete" name="delete" type="submit" value="{%trans "DELETE"%}">

I'm trying to add a confirmation box (using the Boxy plugin) to the click event of the DELETE button 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 results in the form being submitted with the DELETE button's name absent in the POST data. Is there a way to add that data to the POST data or a better way to achieve what I am trying?

Answer 1

The easiest way would be to have your delete button defined in a separate form.

Answer 2

A couple of ways to do this.

1. If it's okay for the button name to be GET rather than POST data, in your Boxy callback append it to the form's action as a query parameter.
2. Have a hidden field in your form, and then set the value of that field to the button name (or whatever you want to use to pass the command to the server) in your Boxy callback. I can't whip off a jQuery example (more of a Prototype man myself) but it should be fairly trivial to do. If you're doing graceful degradation (allowing the form to be submitted without JavaScript), sadly this would mean you need to check for both the hidden field (JavaScript was enabled) and also the button name (it wasn't) on the server side.
3. Use #serialize to grab the form data, append the button field to it, and submit the result via jQuery.post. This isn't the exact same thing as submitting the form because it doesn't replace the page with the result; you'd want to handle that in the post callback.

Answer 3

You could use a namespaced event, unbind on confirmation, then retrigger:

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

});