jQuery form submit: Any way to know what element triggered the submit?

Question

I'm using asp.net MVC and when I submit a form, a previous developer had embedded some jQuery validation.

$('form').submit(function() {
    ...code done here to validate form fields
});

The problem is that both the "Save" and "Cancel" buttons on the form fire this submit jQuery function. I don't want the validation logic to fire if the "Cancel" input button was fired (id="cancel" name="cancel" value="cancel"). Is there a way that, within this submit function, I can retrieve the ID, name or value of which input button was pressed to submit the form?

score 8 · Accepted Answer · edited May 23 '17 at 11:53

8

I asked this same question: How can I get the button that caused the submit from the form submit event?

The only cross-browser solution I could come up with was this:

$(document).ready(function() {
    $("form").submit(function() { 

    var val = $("input[type=submit][clicked=true]").val()

    // DO WORK

});

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

Not sure if its the answer you're looking for but you should change the "Cancel" button to an anchor tag. There's no need to submit a cancel unless you're doing work on the form values.

edited May 23 '17 at 11:53

Community

1
1

answered Apr 12 '11 at 20:06

hunter

62,308
19
113
113

This worked perfectly, thank you. I just tweaked it and substituted "image" for "submit", since my save and cancel are of type "image". It now gives me the value of the button pressed, whether it's "cancel" or "save". I only validate if it does not say "cancel" as the value now. Thanks! – ghost_mv Apr 12 '11 at 20:29

score 0 · Answer 2 · answered Apr 12 '11 at 19:58

0

well this will only fire if the type of the input button is like so:

<input type='submit' ...

so make sure the cancel button does not have type='submit' and it should work

answered Apr 12 '11 at 19:58

Naftali

144,921
39
244
303

They're actually both marked 'type="image"', as they both are image input buttons. – ghost_mv Apr 12 '11 at 20:12
1

then niether of them should trigger the submit. – Naftali Apr 12 '11 at 20:15
The code is as follows, and IS submitting the form:
<%=ViewData["docId"]%>" method="post" > " type="image" id="save" value="save" style="border:none;<%=ViewData["showsave"]%>"/> " type="image" id="cancel" value="cancel" style="border:none;<%=ViewData["showsave"]%>"/>
– ghost_mv Apr 12 '11 at 20:21
@Michael, neither of them should be triggering submit, there must be some handler that is doing that – Naftali Apr 12 '11 at 20:23
@Neal type=image IS a submit button – mplungjan Feb 20 '12 at 15:35

Robin Maben · Answer 3 · 2011-04-12T20:24:51.953

0

var myForm =   $('form');
$('input[type="submit"]',myForm).click(function(e) {
    var whoClickedsubmit = $(e.target); //further, you can use .attr('id')
    //do other things here
});

EDIT

.submit(function(event){
    var target = event.originalEvent.explicitOriginalTarget.value;
    //But IE does not have the "explicitOriginalTarget" property
});

edited Apr 12 '11 at 20:24

answered Apr 12 '11 at 20:00

Robin Maben

22,194
16
64
99

7

For a submit event this will return the form itself, not the button clicked. – mVChr Apr 12 '11 at 20:02
But this is no longer a submit event handler, it's a click event handler which is completely different from the OPs problem of identifying which element triggered the submit event. – no.good.at.coding Apr 12 '11 at 20:16
1

My guess is the click handler will still execute before the submit handler? – Robin Maben Apr 12 '11 at 20:20
The edited version will only work in some versions of FF, so it's a really bad solution. `explicitOriginalTarget` will also be removed soon, you shouldn't rely on it – Victor Marchuk Jun 28 '16 at 15:01
@VictorMarchuk Fair point. This was 5 years ago so I have lost context. In any case this does not detract from the accepted answer which rightly has all the votes. – Robin Maben Jun 28 '16 at 18:53

score 0 · Answer 4 · answered Apr 12 '11 at 20:09

EDIT

This only works in FF and not in Chrome (and I so, I imagine, not in other WebKit based browsers either) so I'm just leaving this here as a browser specific workaround, an interesting note but not as the answer.

@Neal's suggestion of NOT making the cancel button of type submit is probably the cleanest way. However, if you MUST do it the way you are doing it now:

$('form').submit(function(e){
    if(e.originalEvent.explicitOriginalTarget.id === 'cancel'){
        //don't validate
    }
    else{
        //validate
    }
});

jQuery form submit: Any way to know what element triggered the submit?

4 Answers4

Related