CODEWITHSUNDEEP
javascriptjqueryajax
Uday Khatry
Uday Khatry

Reputation: 469

event.preventDefault(); not working in ajax

I am firing an ajax call on a signup form wherein i am checking whether the email id entered by the user has already been used or not. Ajax Function : 

<script>


$( "#becomesignup" ).submit(function( event ) {
        $.ajax({
            url : 'login', // Your Servlet mapping or JSP(not suggested)
            data : {"email":$("#becomeemail").val()},
            type : 'GET',
            dataType : 'html', // Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
            success : function(response) {
                if(response == "true"){
                    $('#emailerrorbecome').slideDown();
                    $('#become-submit').prop('disabled', true);
                  event.preventDefault();
                }else{
                    $('#emailerrorbecome').slideUp();
                    $('#become-submit').prop('disabled', false);
                }
                 $('.black-screen').hide();

              },
              error : function(request, textStatus, errorThrown) {
                alert(errorThrown);

            }
        });
});
</script>

In the above ajax function, if the response is true then the email id is already been used and i need to show an error div($('#emailerrorbecome').slideUp();) and then prevent the form to get submitted. But even event.preventDefault() is not working causing the emaild id to be registered again. Please help me with this. TIA

Upvotes: 5

Views: 13357

Answers (4)

Sangeeth Joseph
Sangeeth Joseph

Reputation: 332

you can make use of return false instead of eventPreventDefault. I had been using the location.reload() as a dirty hack to refresh the page to prevent submission, but return false works well even without a refresh, it doesn't submit the form.

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You should submit the form programatically and always preventing default behaviour in jq submit handler. E.g, using context and calling submit() DOM API method:

$("#becomesignup").submit(function(event) {
    event.preventDefault(); /* prevent form submiting here */
    $.ajax({
        context: this, /* setting context for ajax callbacks*/
        url: 'login', // Your Servlet mapping or JSP(not suggested)
        data: {
            "email": $("#becomeemail").val()
        },
        type: 'GET',
        dataType: 'html', // Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
        success: function(response) {
            if (response == "true") {
                $('#emailerrorbecome').slideDown();
                $('#become-submit').prop('disabled', true);  
                $('.black-screen').hide(); /* hide it here */
            } else {
                $('#emailerrorbecome').slideUp();
                $('#become-submit').prop('disabled', false);
                this.submit(); /* 'this' refers to the FORM, and calling submit() DOM native method doesn't fire again jq handler */
            }
        },
        error: function(request, textStatus, errorThrown) {
            alert(errorThrown);

        }
    });
});

For explanation of the why, see Quentin's answer

Upvotes: 9

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You cannot prevent the submit long after the submit function has returned. The Ajax result occurs much later.

You can instead flag the submit (e.g. use a sentinel variable) and cancel it unless allowed. Then trigger a submit from code in the Ajax callback.

Example:

var allowSubmit = false;
$( "#becomesignup" ).submit(function( event ) {
    if (!allowSubmit){
        $.ajax({
            url : 'login', // Your Servlet mapping or JSP(not suggested)
            data : {"email":$("#becomeemail").val()},
            type : 'GET',
            dataType : 'html', // Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
            success : function(response) {
                if(response == "true"){
                    $('#emailerrorbecome').slideDown();
                    $('#become-submit').prop('disabled', true);
                  // Enable next submit to proceed
                  allowSubmit = true;
                  // And trigger a submit
                  $( "#becomesignup" ).submit();

                }else{
                    $('#emailerrorbecome').slideUp();
                    $('#become-submit').prop('disabled', false);
                }
                 $('.black-screen').hide();

              },
              error : function(request, textStatus, errorThrown) {
                alert(errorThrown);

            }
        });
    }
    // return false does e.preventDefault(), and true allows it to proceed
    return allowSubmit;
});

Upvotes: 4

Quentin
Quentin

Reputation: 943193

You are calling preventDefault to late.

Order of execution is this:

  1. Event handler fires
  2. HTTP request is sent
  3. Event handler finishes
  4. Prevent Default was not called so the default behaviour occurs
  5. HTTP response is recieved
  6. Success handler fires
  7. Prevent Default is called … too late to have any effect

You can't wait for the HTTP response to come back before preventing the default behaviour.

You either need to always prevent the default behaviour and then conditionally resubmit the form with JS in the submit handler, or move the logic for when you use Ajax to perform your tests so it doesn't depend on the form submission event in the first place (e.g. run it as soon as the data has been entered and be prepared for the possibility that the form might get submitted before your JS has finished running).

Upvotes: 5

Related Questions