My Return false is not working in this code..using jquery

Question

$(function () {
    $('#form4').submit(function () {
        var val = $("#txtNewServiceTypeCategory").val();

        $("#ServiceTypeCategoryName").children("option").each(function () {
            var $this = $(this);
            if (val == $this.val()) {
                alert("ServiceTypeCategory Name is already added! Please Choose Differnt Category Name");
                return false;
            }
        });
        $('#someHiddenDiv2').show();
        $('#STSave').attr('disabled', 'disabled');
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#someHiddenDiv2').hide();
                alert('Saved NewServiceTypeCategory Successfully. Thank you!');
            },
            error: function () {
                alert('Error occured!  Plese try again later!.');
                $('#someHiddenDiv2').hide();
                $('#STSave').removeAttr('disabled');
            }
        });
        return false;
    });
});

This return false is not working in the above code even if its showing the popup message other things are executing here,

$("#ServiceTypeCategoryName").children("option").each(function () {
    var $this = $(this);
    if (val == $this.val()) {
        alert("ServiceTypeCategory Name is already added! Please Choose Differnt Category Name");
        return false;
    }
});

What I am doign wrong in this?

Thanks

Answer 1

the return false; in the each loop only breaks the loop, it doesn't return from your submit function, so the rest of your submit function will keep running.

You could set a variable in the loop as to whether to continue the submit and after the loop you could then check whether you need to submit or not.

var exitSubmit = false;
$("#ServiceTypeCategoryName").children("option").each(function () {
                  var $this = $(this);
                  if (val == $this.val()) {
                      exitSubmit = true;
                      return false;
                  }
              });
if (exitSubmit) {
    alert("ServiceTypeCategory Name is already added! Please Choose Differnt Category Name");
    return false;
}

Answer 2

You're only exiting the function that starts on line #1 (in your second code block) which will then cause the next line executed to be where you show your hidden div.