Jquery & Ajax - Return False is not working

Question

I have ajax call inside in another ajax call. The return false in my success function of the second ajax call is not working and the form is always submit.

Basically I calculate the sum of my database column records (percent_shares) and the user when he try to insert new record, the ajax is check if the total is greater than 100. When the user is save value in the input and the total of the records is greater than 100 is showing my error message but the form is submitted. I try to stop the submit but is not working.

$('#officer_entity_helper_category').on('change', function() {
   var entity_helper_category = $(this).val();

   $("#shareholder_name_id").on('change', function(e){
       contactID = e.target.value;
       contacts_user_function();
   });
}); 

function contacts_user_function() { 
        $.ajax({
            url:'/companies/ajax/contactsDetails',
            method: 'post',
            data: {id: contactID},
            dataType: 'json',
            async: false,
            success: function(response){                
                var len = response.length;
                $('#fname').text('');
                if(len > 0){
                    // Read values
                    var fname = response[0].fname;
            
                    $('#fname').text(fname);

                    $( ".btn-primary" ).click(function(e) {
                        totalPercent();
                    });                  
                }
            }
        });
}

function totalPercent() {
        $.ajax({
            url:'/companies/ajax/totalPercentShares',
            method: 'post',
            data: {company_id: $("#company_id").data('id'),
            contact_id: contactID                    
            },
            dataType: 'json',
            async: 'false',
            success: function(data){
                var x = data;
                var percent_share = parseFloat($("#percent_shares").val());                
                var percent_share_sum = parseFloat(x);                
                var total = (percent_share) + (percent_share_sum);

                if (total > 100) {
                    $(".errorTxt").html("Your total of percent shares should be 100.");
                    return  false;
                } else {
                    $(".errorTxt").html("");
                    return true;
                }    
            }          
        });   
    }

user_16662138 · Answer

the click method needs to return true or false, but in this case you're not returning the value of totalPercent - so even though you return values in the $.ajax call, it doesn't have any effect. given how your code is structured, you could consider using a callback, or you could restructure it to use async and await

something like this would probably work..

$('#someElement').on('click', async () => {
    return new Promise((res,rej) => {
        try {
            totalPercent(result => {
                res(result);
            });
        catch ( err ) {
            rej(err);
        }
    });
});

// add callback to totalPercent
function totalPercent(callback) {
        $.ajax({
            url:'/companies/ajax/totalPercentShares',
            method: 'post',
            data: {company_id: $("#company_id").data('id'),
            contact_id: contactID                    
            },
            dataType: 'json',
            async: 'false',
            success: function(data){
                var x = data;
                var percent_share = parseFloat($("#percent_shares").val());                
                var percent_share_sum = parseFloat(x);                
                var total = (percent_share) + (percent_share_sum);

                if (total > 100) {
                    $(".errorTxt").html("Your total of percent shares should be 100.");
                    return callback(false);
                } else {
                    $(".errorTxt").html("");
                    return callback(true);
                }    
            }          
        });   
    }

Jquery & Ajax - Return False is not working

1 Answers