Javascript / jQuery return false does not stop execution

Question

I have a code block that checks certain elements before allowing a form to submit, the loop loops through OK.

I would anticipate, or at least had hoped that the first time it finds a problem, an alert is shown and then execution stops. What is actually happening is that alerts show multiple times, right down to the last one, and only the last one actually returns false!

I don't understand why this is, what am I doing wrong? The JavaScript is below.

$('#deliverInForm').submit(function(){
    $('.childRow').each(function(){
        if($(this).find('.thisBinName').val()!='' || $(this).find('.unitQty').val()!=''){
            if($(this).find('.thisBinName').val()==''){
                alert('You have entered a quantity but no Bin, please correct and try again!');
                return false;
            }else if($(this).find('.unitQty').val()==''){
                alert('You have entered a Bin but no quantity, please correct and try again!');
                return false;
            }else if($(this).find('.unitQty').val()==0){
                alert('Can\'t move zero units into a bay, please correct and try again!');
                return false;
            }else if($(this).find('.unitQty').val()<0){
                alert('Can\'t deliver in minus units into a bay, please correct and try again!');
                return false;
            }
        }
    });

    if($('#supDocNo').val()==''){
        alert('Can\'t leave Supplier Reference blank, please correct and try again!');
        return false;
    }
    return true;
});

Matt Fellows · Accepted Answer · 2012-04-03 13:05:45Z

4

make your function take an event argument, then call event.preventDefault()

e.g.

$('#deliverInForm').submit(function(event){
$('.childRow').each(function(){
    if($(this).find('.thisBinName').val()!='' || $(this).find('.unitQty').val()!=''){
        if($(this).find('.thisBinName').val()==''){
            alert('You have entered a quantity but no Bin, please correct and try again!');
            event.preventDefault();
            return false;
        }else if($(this).find('.unitQty').val()==''){
            alert('You have entered a Bin but no quantity, please correct and try again!');
            event.preventDefault();
            return false;
        }else if($(this).find('.unitQty').val()==0){
            alert('Can\'t move zero units into a bay, please correct and try again!');
            event.preventDefault();
            return false;
        }else if($(this).find('.unitQty').val()<0){
            alert('Can\'t deliver in minus units into a bay, please correct and try again!');
            event.preventDefault();
            return false;
        }
    }
});

if($('#supDocNo').val()==''){
    alert('Can\'t leave Supplier Reference blank, please correct and try again!');
    event.preventDefault();
    return false;
}
return true;
});

answered Apr 3, 2012 at 13:05

Matt Fellows

6,5324 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sje397 Over a year ago

The problem with this method is that the final check (if($('#supDoc...) will still be performed, potentially resulting in multiple alerts.

Matt Fellows Over a year ago

Simple to resolve that, rather than alerting on error, put the alert message into a variable, check if the variable is empty, if not, alert its contents. Or put the first alert before the foreach ;)

sje397 · Accepted Answer · 2012-04-03 13:06:32Z

3

The problem is that inside your each loop, the return false just exits the function you have passed to each. According to the docs, this will exit the each loop, but it wont exit your submit handler.

You could do something ugly like this:

$('#deliverInForm').submit(function(){
  var exit = false;
  $('.childRow').each(function(){
    if($(this).find('.thisBinName').val()!='' || $(this).find('.unitQty').val()!=''){
      if($(this).find('.thisBinName').val()==''){
        alert('You have entered a quantity but no Bin, please correct and try again!');
        exit = true; // <----------------set flag
        return false;
        //...
  });

  if(exit) return false;
  // ...
});

answered Apr 3, 2012 at 13:06

sje397

41.9k9 gold badges90 silver badges106 bronze badges

Comments

bart s · Accepted Answer · 2012-04-03 13:07:40Z

0

from jquery each documentation

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.

I think you must move your return false to the each loop and not inside the find()

answered Apr 3, 2012 at 13:07

bart s

5,1202 gold badges38 silver badges58 bronze badges

Comments

web-nomad · Accepted Answer · 2012-04-03 13:14:09Z

Try this:

$('#deliverInForm').submit(function(){
    var errLog = '';
    $('.childRow').each(function(){
        if($(this).find('.thisBinName').val()!='' || $(this).find('.unitQty').val()!=''){
            if($(this).find('.thisBinName').val()==''){
                errLog += 'You have entered a quantity but no Bin, please correct and try again!\n';
            }
            if($(this).find('.unitQty').val()==''){
                errLog += 'You have entered a Bin but no quantity, please correct and try again!\n';
            }
            if($(this).find('.unitQty').val()==0){
                errLog += 'Can\'t move zero units into a bay, please correct and try again!';
            }
            if($(this).find('.unitQty').val()<0){
                errLog += 'Can\'t deliver in minus units into a bay, please correct and try again!';
            }
        }
    });

    if($('#supDocNo').val()==''){
        errLog += 'Can\'t leave Supplier Reference blank, please correct and try again!\n';
    }

    if( errLog != '' ) {
        alert( errLog );
        errLog = '';
        return false;
    }
    return true;
});

Hope it helps.

Shanimal · Accepted Answer · 2012-04-03 16:38:05Z

0

the event handler function needs to return the value.

$(".link").submit(function(){
    return false;
});

To show the first error dialog and return false you have to do something like this...

$(".link").submit(function(){
    var submit=true;
    $("div").each(function(){
        if(submit) // comment this out to show all dialogs
            if(!condition){
                submit = false; 
                alert("problem");
                return ""; // return here is irrelevant

            }
    })
    return submit;
});

One more thing, if your function throws an error it will not return false and the submit will occur anyway...

$(".link").submit(function(){
    throw new Error("foo");
    return false; // never happens form submits as if returning true;
});

edited Apr 3, 2012 at 16:38

answered Apr 3, 2012 at 16:13

Shanimal

11.8k7 gold badges67 silver badges82 bronze badges

Collectives™ on Stack Overflow

Javascript / jQuery return false does not stop execution

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related