Form validation with jQuery and AJAX not setting variable correctly

Question

I'm validating a form using Javascript and jQuery.

At the end of the validation function I just AJAX to check an entry against a SQL database to see if it already exists. I have that working fine but I don't seem to be able to update the Javascript variable to indicate whether the check returned that the entry exists or not. Below is a pared down version of the validation function.

At the end when I do the AJAX call if the customer exists, I try to set the isformcomplete variable to false but that doesn't work, it's almost as if it's not reading that line and without that set properly, the form gets erroneously submitted.

What am I missing here? The AJAX call is working properly. Thanks.

<form method="post" action="../../../scripts/create-customer.asp" id="create-customer" onsubmit="return create_customer();">

function create_customer()
{
    var isformcomplete = true;
    message = "The following tasks need to be completed before continuing:\n\n";
    if ( $("#customerno").val() == "" )
    {
        message += "* Select the customer's country and enter its unique identifier\n";
        isformcomplete = false;
    }
    if ( $("#product").val() == "" )
    {
        message += "* Select a product\n";
        isformcomplete = false;
    }

    if (isformcomplete == false)
        { alert(message); }
    else
    {
        $("#alertsDynamic").slideUp();
        $.post("/global-marketing/scripts/check-new-customer.asp",{ fromsubmit: true, customer: $("#customerno").val()+"|"+$("#product").val()}, 
        function(data, status)
            {
                if ( data == "true" )
                {
                    $("#error-message").html($("#customerno").val()+" "+$("#product").val()+" already exists");
                    $("#alertsDynamic").slideDown();
                    isformcomplete = false;
                }
            }
        );
    }
    return isformcomplete;

Can try one of this if (data == true) or if (data) in place of if ( data == "true" ) — jignesh patel
– jignesh patel, Commented Jul 26, 2017 at 13:36
The ajax call is async. Execution has probably reached the end of the function before you receive the reply from the ajax request. — astrocrack
– astrocrack, Commented Jul 26, 2017 at 13:41
@jingesh That's not the issue, it gets to the block of code after that, it's just not setting the isformcomplete variable — Tom
– Tom, Commented Jul 26, 2017 at 13:42
@astrocrack Ah I see. Doesn't seem to be a way to get this to work for this purpose. — Tom
– Tom, Commented Jul 26, 2017 at 13:54
Yes you should always be careful with async requests The top answer seems to deal with that. — astrocrack
– astrocrack, Commented Jul 26, 2017 at 14:11

Ghulam Mohayudin · Accepted Answer · 2017-07-26 14:01:26Z

3

you should always return false in your function

function create_customer()
{
  message = "The following tasks need to be completed before continuing:\n\n";
  if ( $("#customerno").val() == "" )
  {
    message += "* Select the customer's country and enter its unique 
               identifier\n";
    isformcomplete = false;
}
if ( $("#product").val() == "" )
{
    message += "* Select a product\n";
    isformcomplete = false;
}

if (isformcomplete == false)
    { alert(message); }
else
{
    $("#alertsDynamic").slideUp();
    $.post("/global-marketing/scripts/check-new-customer.asp",{ fromsubmit: true, customer: $("#customerno").val()+"|"+$("#product").val()}, 
    function(data, status)
        {
            if ( data == "true" )
            {
                $("#error-message").html($("#customerno").val()+" "+$("#product").val()+" already exists");
                $("#alertsDynamic").slideDown();
                // Here you need to send the form in case every thing is fine

            }else{
                $("form").submit();
            }
        }
    );
}
return false;

edited Jul 26, 2017 at 14:01

answered Jul 26, 2017 at 13:47

Ghulam Mohayudin

1,11310 silver badges20 bronze badges

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

4 Comments

Tom Over a year ago

If data=="true" then I need to not submit the form

Ghulam Mohayudin Over a year ago

see the updated answer you can submit form in else case of your condition

Tom Over a year ago

Yeah, that doesn't work either. I'm guessing the .submit triggers the onsubmit call on the form again. Nothing happens.

Tom Over a year ago

Ok, with some tweaking I got it to work. I moved it out from the onsubmit and changed the submit button to an href linked button that calls the validation code and submits it if it passes, thanks.

Collectives™ on Stack Overflow

Form validation with jQuery and AJAX not setting variable correctly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related