.submit() not working with other jQuery function?

Question

This is a fairly basic survey form; I'm using JQuery to conditionally show/hide fields based on user selections.

//FORM CONDITIONALS Hides all the helpfulness radios and only shows them when "Yes" for a particular question is checked
$("#datainp .occurrence").click(function () {
    var nexttd = $(this).next('td');
    if ($(this).children("input:first").is(':checked')) {
        $(nexttd).show();
        $(nexttd).children("input").removeAttr("checked");
    } else {
        $(nexttd).hide();
    }

I have a client-side validation function as well:.

//Client side validation and submissions
$('#submit').click(function(e) {

    e.preventDefault();

    var level = $('#Level').val();
    var schoolid = $('#school').val();

    if (!schoolid) {
        alert("Please select a school!");
        return;
    }
    if (!level) {
        alert("Please select a grade level!");
        return;
    }
    alert("foo");
    $('#frmTeacherEvalGuidance').submit(function() {alert("bar") });

});

Everything works EXCEPT the .submit() at the end of my validation (alerts verify). Is something in my form conditional section conflicting with .submit()? When I comment out the first section of javascript, the form submits as it's supposed to. JsFiddle is here: http://jsfiddle.net/r4Y4g/1/ (The html is a tad clunky, I know, but not mine; updating an old team project)

Renato Galvones · Accepted Answer · 2014-02-20T20:43:32.133

1

You should use .stopPropagation() instead of .preventDefault()

Try this:

//Client side validation and submissions
    $('#submit').click(function(e) {

        e.stopPropagation();

        var level = $('#Level').val();
        var schoolid = $('#school').val();

        if (!schoolid) {
            alert("Please select a school!");
            return false;
        }
        if (!level) {
            alert("Please select a grade level!");
            return false;
        }

        return true;   
    });

edited Feb 20 '14 at 20:43

answered Feb 20 '14 at 20:18

Renato Galvones

533
1
3
14

'foo' alert fires, but still no form submission – WillardSolutions Feb 20 '14 at 20:29
I've edited my answer. Now I've got what you saying. http://jsfiddle.net/r4Y4g/1/ – Renato Galvones Feb 20 '14 at 20:44
@ChrisWillard take a look. ;) – Renato Galvones Feb 20 '14 at 20:44
This works. Thanks Renato! But any idea why .submit() was misbehaving? What does stopPropogation() do differently than preventDefault()? – WillardSolutions Feb 20 '14 at 21:11
.submit put a listener of the "submit" event to the form but NOT triggers it. – Renato Galvones Feb 20 '14 at 21:22
About the diference between preventDefault() and stopPropagation, take a look at this. http://stackoverflow.com/questions/18147242/event-preventdefault-vs-event-stoppropagation – Renato Galvones Feb 20 '14 at 21:23

score 0 · Answer 2 · answered Feb 20 '14 at 20:22

0

You could add a listener instead:

$("#frmTeacherEvalGuidance").on("submit", function () {
   alert("bar"); 
});

answered Feb 20 '14 at 20:22

steve

381
3
4

Just tried rewriting function as listener on the submit as suggested, but that means either 1) I loose the ability to validate (ie it submits regardless of my if statements); or 2) if I use preventDefault I still have to use a .submit() after my validation. In either case, I still don't have the functionality I need. – WillardSolutions Feb 20 '14 at 20:39

.submit() not working with other jQuery function?

2 Answers2