Cease the continuous reloading of the website during the

Question

Cease the continuous reloading of the website during the

Hi there! I have come across a little script that runs when the user clicks on "submit":

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

    var username = $("#username-field").val();
    if(username) { 
        $.ajax({
            url: 'check.php',
            data: {data: JSON.stringify(username)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if(data.result == 0) {
                    alertify.error( data.error );
                    return false;
                }
            }
        });
    } else { 
        alertify.alert( "Oops! You forgot to enter your username" );
        return false;
    }
  });
});

I am facing an issue where, despite entering something in the username input field, the script does not display any error message using alertify. Instead, it redirects or refreshes the page, which is unexpected. According to my understanding, since I have set "return false", the page should not be refreshed.

However, interestingly, if I leave the input field empty, the if-clause becomes false and executes this block of code:

    } else { 
        alertify.alert( "Oops! You forgot to enter your username" );
        return false;
    }

This block works fine and prevents the page from being refreshed. So, I'm left wondering why does this block work while the ajax example above fails? Any insights would be appreciated!

jquery ajax plugins return alert

Answer 1

Answer №1

Use the following code snippet to resolve your problem:

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

        var username = $("#username-field").val();
        
        if (username) {
            $.ajax({
                context:this, //set the context here
                url: 'check.php',
                data: {
                    data: JSON.stringify(username)
                },
                type: 'POST',
                dataType: "json",
                success: function (data) {
                    if (data.result == 0) {
                        alertify.error(data.error);
                    }
                    else this.submit(); //submitting the form using DOM node property instead of calling jQuery handler
                }
            });
        } else {
            alertify.alert("You have forgotten to enter a username");            
        }
        return false;
    });
});

Answer 2

Use the following code snippet to resolve your problem:

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

        var username = $("#username-field").val();
        
        if (username) {
            $.ajax({
                context:this, //set the context here
                url: 'check.php',
                data: {
                    data: JSON.stringify(username)
                },
                type: 'POST',
                dataType: "json",
                success: function (data) {
                    if (data.result == 0) {
                        alertify.error(data.error);
                    }
                    else this.submit(); //submitting the form using DOM node property instead of calling jQuery handler
                }
            });
        } else {
            alertify.alert("You have forgotten to enter a username");            
        }
        return false;
    });
});

Answer 3

Answer №2

To ensure correct functionality, remember to explicitly return false outside of the $.ajax call. It's important to note that the callback return does not have the same effect as the overall function's return value.

Answer 4

To ensure correct functionality, remember to explicitly return false outside of the $.ajax call. It's important to note that the callback return does not have the same effect as the overall function's return value.

Answer 5

Answer №3

Move the placement of the "return false" statement to the end, outside of the if statement within the JavaScript code. This adjustment ensures that the function always returns false regardless of the condition.

$(document).ready(function(){
  $("form").submit(function(){
    var form = this;
    var username = $("#username-field").val();
    if(username) { 
        $.ajax({
            url: 'check.php',
            data: {data: JSON.stringify(username)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if(data.result == 0) {
                    alertify.error( data.error );
                    //return false;
                }
                else {
                    form.submit();
                }
            }
        });
    } else { 
        alertify.alert( "You forgot to type username" );
        //return false;
    }
    return false;
  });
});

One reason why it didn't function properly in its original state is because when you attempted to return in the success callback, your page had already been refreshed. Therefore, the success callback was not even executed.

Answer 6

Move the placement of the "return false" statement to the end, outside of the if statement within the JavaScript code. This adjustment ensures that the function always returns false regardless of the condition.

$(document).ready(function(){
  $("form").submit(function(){
    var form = this;
    var username = $("#username-field").val();
    if(username) { 
        $.ajax({
            url: 'check.php',
            data: {data: JSON.stringify(username)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if(data.result == 0) {
                    alertify.error( data.error );
                    //return false;
                }
                else {
                    form.submit();
                }
            }
        });
    } else { 
        alertify.alert( "You forgot to type username" );
        //return false;
    }
    return false;
  });
});

One reason why it didn't function properly in its original state is because when you attempted to return in the success callback, your page had already been refreshed. Therefore, the success callback was not even executed.

Cease the continuous reloading of the website during the

Answer №1

Answer №2

Answer №3

Similar questions

How to target and manipulate a specific element in the DOM using VueJS

Strange alignment issues occurring solely on certain PCs

Which is better for implementing pagination: PHP/MySQL or jQuery?

Issue with undefined bindingContext.$data in IE9 on knockout binding handler

Iterate over the JSON data and evaluate the timestamps for comparison

Is there a way to align a button in the center of the browser's footer?

How to Use jQuery Slice to Display the Top N Items from a Dropdown Menu

Navigating to a particular div using a click event

Tips on Enhancing a Fetch Query in Laravel with the Help of Ajax

The jQuery AJAX post request is displaying an error message stating that the website xxx is not permitted by

Unusual CSS rendering hiccup

Guide to verify the user selection within a select form

Retrieve ViewState variables using an Ajax call to a Static Method

How can I retrieve the content of my DIVs using Jquery to submit via post method?

Which combination of jquery version and jquery ui version is considered the most optimal?

Utilize AJAX JQuery to Transmit POST Data

Stay connected with AJAX's latest updates on Twitter with just 13 bytes

The AJAX request encountered an error while trying to send a POST request to the http://localhost/upload/undefined endpoint. The

utilize jQuery and AngularJS to transform a JSON object into a nested JSON structure

What is the reason for needing a page reload in Javascript or JQuery?