jquery (ajax) click makes php script to run multiple times

Question

I'm having a button, and when is clicked, it renders (with the help of ajax), the content of a php script (basically it's a contact form). My problem is that when the button is clicked, this calls the php script twice or more times. I've tried many solutions, but none worked.

HTML

<ul class="nav navbar-nav navbar-right">
    <li><a href="" id="contact">CONTACT</a></li>
</ul>

JavaScript

$(document).ready(function(){
    $('#contact').off();
    // the above line I've replaced it with:
    // 1. $('#contact').off('click');
    // 2. $('#contact').unbind();
    // 3. $('#contact').unbind('click');
    $('#contact').click(function(e){
        $.ajax({
            type: "POST",
            url: "contact.php",
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
});

The response I get when I run the page which contains the HTML and JS:

The contact.php receives the data send with ajax (from index.php - the page which contains the above code), and then sends the new contact to another php script (which is a class), who stores the new contact in the database, and gives back (to contact.php) a response.

contact.php

<form id="form">
    <div class="form-group col-xs-12 col-md-4">
        <input type="text" class="form-control" id="nume" value="<?php echo Escape::esc($nume);?>" style="pointer-events:none;background:#EFEFEF;"/>
    </div>
    <div class="col-xs-12"></div>
    <div class="form-group col-xs-12 col-md-4">
        <input type="text" class="form-control" id="prenume" value="<?php echo Escape::esc($prenume);?>" style="pointer-events:none;background:#EFEFEF;"/>
    </div>
    <div class="col-xs-12"></div>
    <div class="form-group col-xs-12 col-md-10">
        <textarea class="form-control" id="mesaj" rows="20" data-toggle="mesaj" data-placement="bottom" title="Va rog introduceti mesajul dvs."></textarea>
    </div>
    <div class="col-xs-12"></div>
    <div style="clear:both"></div>
    <button class="btn btn-default" onclick="return validate();" style="margin-left:15px;">TRIMITE</button>
</form>
<script type="text/javascript">
function validate(){
    var nume    = $('#nume').val();
    var prenume = $('#prenume').val();
    var mesaj   = $('#mesaj').val().trim();

    if (mesaj == '' || mesaj.length < 3){
        $(function(){
            $('[data-toggle="mesaj"]').tooltip();
            document.getElementById('mesaj').focus();
        });
        return false;
    }
    $('#form').off();// here I tried to unbind all the previous submit events too
    $('#form').on('submit',function(e){
        $.ajax({
            type: "POST",
            url: "../../app/classes/Contact.php",
            data: {nume:nume, prenume:prenume, mesaj:mesaj},
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
}
</script>

Any tip is welcomed! Thank you!

so first ajax will print the form, second ajax to process the form submit, and your problem with second one .. right ? — Mohammad Alabed
– Mohammad Alabed, Commented Sep 17, 2015 at 9:04
I guess it's with the 1st one. That is called when I press CONTACT in the navbar. The 2nd one is called after an user fills in the contact form and presses Send button. — Dan Costinel
– Dan Costinel, Commented Sep 17, 2015 at 9:06
Try to implement the JavaScript from the contact.php in your index.php and just render the HTML part, when the user clicks on "Contact" — jahller
– jahller, Commented Sep 17, 2015 at 9:08

Thornview · Accepted Answer · 2015-09-19 23:15:29Z

From what I understand, JavaScript does not execute functions sequentially by nature. In your first jQuery snippet it looks like your code assumes that it will first unbind any events bound to $('#contact') and then create a new binding, but that's not necessarily true.

Also, the off() command only works if you bound the event to the element using a corresponding on() command, but your code uses click() instead of on().

You may want to try something like this instead:

$(document).ready(function(){
      $('#contact').on('click', function(e){
        $.ajax({
            type: "POST",
            url: "contact.php",
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
});

Using $('#contact').on('click', function(e) ... will allow you to call $('#contact').off() after the e.preventDefault(); if you want to try to use that to troubleshoot the double-posting problem.

I'm not sure that will fix your issue, but hopefully it's a step in the right direction.

Collectives™ on Stack Overflow

jquery (ajax) click makes php script to run multiple times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related