Question

I have one form that has several elements and two submit buttons, one is “Save” the other is “Delete”. On the “Delete” button I am using jQuery dialog to confirm user wants to delete. Then if they confirm, I submit the form. The problem is jQuery.submit() doesn’t include the original submit button when it is posted so I can’t distinguish on the server a Delete from a Save since they are both using the same form. If I remove the jQuery dialog then the submit button value is posted as expected. This HAS to be very common and I am hoping someone can share a solution. I’ve searched around and can’t find anything useful (is it just me or is google sucking lately?)

Thanks for any help…

EDIT:

The submit buttons do have names and values set. It works fine if don’t use jQuery.submit()

Answer 1

Based on karim79’s answer:

$("input[type=submit], input[type=button], button").click(function(e) {
    var self= $(this),
        form = self.closest(form),
        tempElement = $("<input type='hidden'/>");

    // clone the important parts of the button used to submit the form.
    tempElement
        .attr("name", this.name)
        .val(self.val())
        .appendTo(form);

    // boom shakalaka!
    form.submit();

    // we don't want our temp element cluttering up the DOM, do we?
    tempElement.remove();

    // prevent default since we are already submitting the button's form.
    e.preventDefault();
});

---

UPDATE:

I just realized the above code is probably not what you are looking for:

If you are calling submit on the form element itself ($("form").submit();) you will need something like this:

$("form").submit(function(){
    var form = $(this);
    $("input[type=submit], input[type=button], button", form).eq(0).each(function(){
        var self= $(this),
            tempElement = $("<input type='hidden'/>");

        // clone the important parts of the button used to submit the form.
        tempElement
            .attr("name", this.name)
            .val(self.val())
            .appendTo(form);
    });
});

Which will add the first button element’s name and value to the DOM right before the form is submitted (I’m not sure what the default browser behavior is here). Note that this doesn’t remove the tempElement from the DOM. If there is an error and the form isn’t submitted the element will remain and you will have problems if you don’t take care of this.