jQuery submit() doesn't include submitted butt

问题:

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()

回答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.

回答2:

The submit button data is only submitted if it is clicked on. So you would also be out of luck if somebody pressed enter instead of clicking on the submit button.

I strongly recommend to remove the delete-button from the form, as it probably won't need most of the form's information anyway (only the ID of the data record you want to delete), change it to a button (with type="button") that submits a different form or, if you can, put a link there. (That links to a delete page - this is better for usability reasons anyway, because it removes the focus from the delete-option and reduces the risk of your users accidentially clicking on the delete button.)

回答3:

This sort of thing is can be resolved by incorporating an 'action' parameter somehow, which tells the server what the purpose of the submission is. For example, assuming your form is submitted via GET:

$("form :input").click(function() {
    var $form = $(this).closest("form");
    var submitTo = $form.attr("action") + '?action=' + $(this).val();
    alert(submitTo);
    // window.location.href = submitTo;
    return false;
});

http://jsfiddle.net/karim79/JT3GV/5/