Prevent page reload after ajax form submission

I'm trying to submit a form in wordpress with ajax. But after the first submision the page itself is called again.

My Form

<form class="et_pb_contact_form clearfix" method="post" action="" id="loginform">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last" data-id="mail" data-type="input">
    <label for="et_pb_contact_mail_1" class="et_pb_contact_form_label">E-Mail-Adresse</label>
    <input type="email" name="mail" id="mail" value="" placeholder="E-Mail-Adresse" required=""/>
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_last" data-id="pw" data-type="input">
    <label for="et_pb_contact_pw_1" class="et_pb_contact_form_label">Passwort</label>
    <input type="password" name="pw" id="pw" value="" placeholder="Passwort" />
</p>
<div class="et_contact_bottom_container">                       
    <button type="submit" class="et_pb_contact_submit et_pb_button">Einloggen</button>
</div>                  

Javascript:

jQuery(document).ready(function() {
    jQuery(document).on('submit', '#loginform' ,function(e) {
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: 'backend_login.php',            
            data: jQuery(this).serialize(),            
            success: function(data) {
                if (data === 'true') {
                    window.location = 'main.php';
                }
                else if (data.indexOf("Fehler") !== -1) {
                    alert(data);
                }
                else {
                    jQuery('#loginnote').fadeIn();
                }
            }
        });
    });
});

If I open the page ([domain]/login) and hit the Submit Button the first two XHR occur of which the first one is correct. But where does the second XHR come from, and how to prevent from this? After the site is new loaded and I hit the submit button again, only the correct and third XHR occur.

I'm trying to submit a form in wordpress with ajax. But after the first submision the page itself is called again.

My Form

<form class="et_pb_contact_form clearfix" method="post" action="" id="loginform">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last" data-id="mail" data-type="input">
    <label for="et_pb_contact_mail_1" class="et_pb_contact_form_label">E-Mail-Adresse</label>
    <input type="email" name="mail" id="mail" value="" placeholder="E-Mail-Adresse" required=""/>
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_last" data-id="pw" data-type="input">
    <label for="et_pb_contact_pw_1" class="et_pb_contact_form_label">Passwort</label>
    <input type="password" name="pw" id="pw" value="" placeholder="Passwort" />
</p>
<div class="et_contact_bottom_container">                       
    <button type="submit" class="et_pb_contact_submit et_pb_button">Einloggen</button>
</div>                  

Javascript:

jQuery(document).ready(function() {
    jQuery(document).on('submit', '#loginform' ,function(e) {
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: 'backend_login.php',            
            data: jQuery(this).serialize(),            
            success: function(data) {
                if (data === 'true') {
                    window.location = 'main.php';
                }
                else if (data.indexOf("Fehler") !== -1) {
                    alert(data);
                }
                else {
                    jQuery('#loginnote').fadeIn();
                }
            }
        });
    });
});

If I open the page ([domain]/login) and hit the Submit Button the first two XHR occur of which the first one is correct. But where does the second XHR come from, and how to prevent from this? After the site is new loaded and I hit the submit button again, only the correct and third XHR occur.

• ajax
• forms

Share Improve this question asked Sep 18, 2018 at 10:29 Hans DampfHans Dampf 2111 silver badge22 bronze badges 7

• Might there be another event attached to your form during the first call? Check in the DOM inspector. – Hans Commented Sep 18, 2018 at 10:39
• @Michael thanks, that's it. Sometimes you are blind. The Divi Theme is adding two Event Listener. Now I have to get rid of them. – Hans Dampf Commented Sep 18, 2018 at 11:15
• Which should be doable with unbind() or better yet, prevent the binding in the first place. Sometimes this is possible with wp_dequeue_script(), you just need to know the handler. – Hans Commented Sep 18, 2018 at 11:36
• It seems not so easy. jQuery('#loginform').off('submit'); doesn't work. removeEventListener also does not work. I think it is because of an anonymous function. – Hans Dampf Commented Sep 18, 2018 at 11:49
• Like I said, try to find the enqueue handler of the script that binds the events. Of course you cannot dequeue it if it contains other functionality aswell, but maybe you're lucky. Also make sure that your script executes after the binding has occured. – Hans Commented Sep 18, 2018 at 11:59

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 0

To solve this, you need to unbind the event that triggers the second AJAX request. You need to make sure that your unbind() function is called after the event binding has occurred.

So why not just load it in the footer? One reason is that the other script that binds the event might be loading in the footer, too.

To control the loading order of scripts, you can actually use the dependencies parameter of wp_enqueue_scripts(). You just need to know the handler of the script that you wish do add as a dependency:

wp_enqueue_script( 'my-handler', 'script.js', array( 'another-script-handler' ) );

my-handler is now depending upon and is therefore loaded after another-script-handler.

Remove this line of code window.location = 'main.php';

Then it's better you use this

jQuery('#loginform').on('submit',function(e) {e.preventDefault();.....});

Than this that you have

jQuery(document).on('submit', '#loginform' ,function(e) {....})