Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery submit() doesn't include submitted button

Tags:

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

like image 251
B Z Avatar asked Jan 05 '11 15:01

B Z


People also ask

Can a form submit without button?

The form can be submitted without using submit button by implementing a specific event attribute or by clicking the link. This task can be done by using the OnClick event attribute or by using the form. submit() method in Javascript.

Does the submit button go inside the form?

Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML. But visually you can position the submit button anywhere you want with appropriate CSS (float, absolute/relative positioning, etc).

Is submit in jQuery?

jQuery submit() MethodThe submit event occurs when a form is submitted. This event can only be used on <form> elements. The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.


1 Answers

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.

like image 174
David Murdoch Avatar answered Oct 21 '22 23:10

David Murdoch