Why is my function returning “undefined” instead of boolean

Question

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

         if (!checkStockOfProduct())
         {
           e.preventDefault();
           return false;
         }
         return true
    });
});

<script src="~/Scripts/storeinputoutput.js"></script>

storeinputoutput.js file:

function checkStockOfProduct() {
    var allowSubmitForm = true;
    $("table#StoreItemdatatable > tbody > tr").each(function () {

    .
    .
    .

        var storeId = $('#StoreID').val();

        var stock = null;
        var URL = '/aaa/bbb' 
        $.ajax({
            async: false,
            url: URL,
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            data: {
                productNServiceID: productNServiceID,
                storeID: storeId
            },
            type: 'POST',
            success: function (data) {
                stock = data.Stock;
            }
            , error: function (jqXHR, exception) {

            }

        });



        if (...) {
            allowSubmitForm = false;
        }
        return allowSubmitForm;

    });
}

In form submit , I called the function and I wouldn't do the submit operation if function return false. But the value of the xx variable is always undefined.

Please advise

Checked using Alert. variable "allowSubmitForm" in function "checkStockOfProduct" in the last line has value and not "undefined" But in Submit it is undefined

Answer 1

1. I understand you want to return boolean, so use true and false rather than 'true' and 'false' Why? The ones without quotes are boolean while the ones with quotes are string. A non-empty string in javascript would always return true while an empty string would return false (youare returnimg non-empty strings there and the result is obviously not what you would want in this case).

2. var is a little tricky and I would suggest we use let next time. Since it doesnt seem as though you are doing a lot in the checkStockOfProduct function I would refactor it to ==>

const checkSumOfProduct = (whatever...) ? false : true

3. I noticed the update on your question, I really don't get what you are trying to do there but to me it looks as though the result of the checkStockOfProduct decides whether you would prevent default form submission on submit and return false or not. I would also be assuming that the CheckSumOfProduct function is synchronous Let's refactor that code to do the same thing you were trying to do but look something like this ==>

$(document).ready(function() {
    $("form").submit(function(e) {
        if(!CheckStockOfProduct()){
           e.preventDefault()
           return false
         } 
           return true
    });
});

Let me know if this works out...I am in transit and on mobile atm

Answer 2

Try

function checkStockOfProduct() {
    var allowSubmitForm = true;
    if (...) {

        allowSubmitForm = false;
    }

    return allowSubmitForm;

  };

And adjust your submit() event handler based on the function return value:

$(document).ready(function () {
    $("form").submit(function (e) {
       if (checkStockOfProduct()) {
          //valid
          return;
       }
       //invalid
       e.preventDefault();
    });
});