Question

I try to do something and it works with few exceptions… I have a form which sends data throught $.ajax() but sometimes the form sends the data twice or three times…

The code is:

$('div#feedBackPresta-image, div#feedBackPresta-fb').click(function() {
    $('div#bgLayer').css({
        'height': bodyHeight,
        'display': 'block'
    });
    $('div#feedBack').css('display', 'block');
});
$('a#addFeedBack').click(function() {
    $('div#feedBacks').css('display', 'none');
    $('h3#clientsAboutUs').css('display', 'none');
    $('h3#addFeedBackAboutUs').css('display', 'inline-block');
    $('div.pages').css('display', 'none');
    $('div#feedBackForm').css('display', 'block');
    $('a#showFeedBacks').css('font-weight', 'normal');
    $('a#addFeedBack').css('font-weight', 'bold');
    $('input#submitFeedBack').attr('disabled', 'disabled');
    var clientName = $('input#clientName').val();
    var clientEmail = $('input#clientEmail').val();
    var clientWebsite = $('input#clientWebsite').val();
    var clientImage = $('input#clientImage').val();
    var clientFeedBack = $('textarea#clientFeedBack').val();
    var error = false;
    $('input#clientName, input#clientEmail, input#clientWebsite, input#clientImage, textarea#clientFeedBack').focusin(function() {
        $('input#clientName, input#clientEmail, input#clientWebsite, input#clientImage, textarea#clientFeedBack').keyup(function() {
            if($('input#clientName').val().length < 6) {
                $('input#clientName').css('border', '1px solid #ff0000');
                error = true;
            }
            else {
                $('input#clientName').css('border', '1px solid #BDC2C9');
                error = false;
            }
            if($('input#clientEmail').val().length < 10) {
                $('input#clientEmail').css('border', '1px solid #ff0000');
                error = true;
            }
            else {
                $('input#clientEmail').css('border', '1px solid #BDC2C9');
                error = false;
            }
            if($('textarea#clientFeedBack').val().length < 20) {
                $('textarea#clientFeedBack').css('border', '1px solid #ff0000');
                error = true;
            }
            else {
                $('textarea#clientFeedBack').css('border', '1px solid #BDC2C9');
                error = false;
            }
            if(error == false) {
                $('input#submitFeedBack').removeAttr('disabled');
            }
            else {
                $('input#submitFeedBack').attr('disabled', 'disabled');
            }
        });
    });
    $('input#submitFeedBack').click(function() {
        clientName = $('input#clientName').val();
        clientEmail = $('input#clientEmail').val();
        clientWebsite = $('input#clientWebsite').val();
        clientImage = $('input#clientImage').val();
        clientFeedBack = $('textarea#clientFeedBack').val();
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(clientEmail != "" || clientEmail != undefined) {
            if(!emailReg.test(clientEmail)) {
                $('input#clientEmail').css('border', '1px solid #ff0000');
                error = true;
            } 
        }
        if(error == false) {
            $.ajax({
                type: 'POST',
                url: 'modules/feedBackPresta/ajax.php',
                data: {'type': 'add', 'clientName': clientName, 'clientEmail': clientEmail, 'clientFeedBack': clientFeedBack, 'clientWebsite': clientWebsite, 'clientImage': clientImage},
                success: function() {
                    $('input#submitFeedBack').attr('disabled', 'disabled');
                    $('input#clientName').val('').css('border', '1px solid #BDC2C9');
                    $('input#clientEmail').val('').css('border', '1px solid #BDC2C9');
                    $('input#clientWebsite').val('');
                    $('input#clientImage').val('');
                    $('textarea#clientFeedBack').val('').css('border', '1px solid #BDC2C9');
                    $('div#successAdd').append('<div class="feedBack-approve" style="text-align: center;"><p style="margin-top: 15px;">Successful!</p></div>');
                    $('div.feedBack-approve').fadeOut(2500);
                }
            });
        }
    });
});
$('a#showFeedBacks').click(function() {
    $('div#feedBackForm').css('display', 'none');
    $('h3#clientsAboutUs').css('display', 'inline-block');
    $('h3#addFeedBackAboutUs').css('display', 'none');
    $('div.pages').css('display', 'block');
    $('div#feedBacks').css('display', 'block');
    $('a#addFeedBack').css('font-weight', 'normal');
    $('a#showFeedBacks').css('font-weight', 'bold');
});
$('div#bgLayer, div#feedBackRight').click(function() {
    $('div#bgLayer').css('display', 'none');
    $('div#feedBack').css('display', 'none');
    $('div#feedBacks').css('display', 'block');
    $('div#feedBackForm').css('display', 'none');
    $('a#showFeedBacks').css('font-weight', 'bold');
    $('h3#clientsAboutUs').css('display', 'inline-block');
    $('h3#addFeedBackAboutUs').css('display', 'none');
    $('div.pages').css('display', 'block');
    $('a#addFeedBack').css('font-weight', 'normal');
    window.location.hash = '!';
});
$('a.anchors').click(function() {
    $('div#bgLayer').css('display', 'none');
    $('div#feedBack').css('display', 'none'); 
});

So if anybody can help me with this code I’ll be very grateful…

Best regards,
George!

Answer 1

Form submission via the .submit() event rather than a .click() event in jQuery may help avoid this. Your code should be roughly the same, just add return false to the bottom of the .click() method and rename it .submit()