0

I've got simple ajax request (it just sends form) and it is called when I click the button. The problem is when I click login and it's failed, php does echo "FAIL" and when I click it again then php "echoes" it two times, then three times etc. It happens until I refresh the pages then "the counter" resets. It is inside $(document).ready() and it uses POST. My code:

EDIT#1 "CODE EDIT"

$('#register').click(function (event)
{
    if (true)
    {
        var frm = $('#registerForm');
        alert('debug1'); //DOESN'T REPEAT
        frm.submit(function (ev) // THIS FUNCTION REPEATS, DONT KNOW WHY.
        {
        alert('debug2'); //DOES REPEAT
            $.ajax(
            {
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: frm.serialize(),
                success: function (text)
                {
                    $("#reg_dialog").dialog({
                    hide:{effect:"drop",duration: 1000}}).dialog('close');
                    $("#info").html(text).fadeIn(400).delay(2500).fadeOut(500,function(){
                        if(text!=="User Created"){
                        location.reload(); // THIS ONE RESETS "THE COUNTER" AS I SAID BEFORE, BUT I DONT WANT TO RELOAD WHOLE PAGE
                        }})
                }
            });
            ev.preventDefault();
            return false;
        });
    }

EDIT #2 (code explanation)

How I want this to work.

  1. User fills the form (this works)
  2. User clicks "Register" button, php does the database code (if everything is filled right the user is created)
  3. If there is an error like username taken php does echo "Username already taken"
  4. Now here is the problem. If user wants to use other username and he clicks "Register" and user-filled data is ok, the php does echo "User Created" and then "Username already taken". This is because ajax sends the form two times. If user have filled it wrong again and then right he gets "User Created" and 2x "Username already taken" and it goes like that over and over again until he refreshes the page.
Lucassith
  • 49
  • 10
  • Do you `POST` or `GET` the form? It sounds like you're using `GET` and with each click the request URI gets longer and longer and longer? – Mario Werner Jul 13 '14 at 16:43
  • Are you sending two requests (show us the click handler code) or are you receiving two texts in one response (show us the failing PHP code)? – Bergi Jul 13 '14 at 16:43
  • Is this code at the top level of your `$(document).ready()` function? Or is inside a click handler? – Barmar Jul 13 '14 at 16:48
  • Possible duplicate of [jQuery click events firing multiple times](http://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times) – Heretic Monkey Mar 01 '17 at 15:54

3 Answers3

2

You're binding to the Submit event multiple times. Before 

frm.submit()

use:

frm.unbind("submit");
Dave Salomon
  • 3,287
  • 1
  • 17
  • 29
0

If your click handler is firing multiple times, it is binding to the click event more than once. You don't show how the code is being included on the page. To fix it, you need to engineer it so the click handler only binds once.

If you're having trouble having it bind only once, you could try using .unbind() to unbind any existing events before you bind the click handler again.

$('#register').unbind('click');
// this does the unbind
$('#register').click(function (event)
{
    // the rest of your code etc...
cleaver
  • 370
  • 7
  • 12
0

A better solution for this would be

.one()

$(".foo").one('click',function() {
    //your code
});
NegroShaman
  • 1
  • 2