CODEWITHSUNDEEP
javascriptphpjqueryajax
Monsieur Ourer
Monsieur Ourer

Reputation: 37

Form submited two times (ajax with jquery)

i have a simple form: when i submit it without javascript/jquery, it works fine, i have only one insertion in my data base, everything works fine.

I wrote some jquery to have result in ajax above the input button, red message if there was an error, green if the insertion was done successfully. I also display a small gif loader.

I don't understand why when i use this jquery, two loaders appear at the same time and two insertions are done in my database.

I reapeat that when i comment the javascript, it works fine, i'm totally sure that my php is ok.

$('#addCtg').submit(function () {
    var action = $(this).attr('action');
    var name = $('#name').val() ; 

    $('.messages').slideUp('800', function() {

        $('#addCtg input[type="submit"]').hide().after('<img src="spin.gif" class="loader">');

        $.post(action, {
            name: name
        }, function (data) {
            $('.messages').html(data);
            $('.messages').slideDown('slow');
            $('.loader').fadeOut();
            $('#addCtg input[type="submit"]').fadeIn();
        });
    });     
    return false;
});

I really don't understand why it doesn't work, because i use the 'return false' to change the basic behaviour of the submit button

Basic php just in case: 

<?php

require_once('Category.class.php');

  if (isset($_POST['name'])) {

   $name = $_POST['name'] ; 

   if ($name == "") {
      echo '<div class="error">You have to find a name for your category !</div>' ;
      exit();
   } else {
       Category::addCategory($name) ; 
       echo '<div class="succes">Succes :) !</div>' ;
       exit();
   }
} else {
   echo '<div class="error">An error has occur: name not set !</div>';
   exit();
}

And finnaly my function in php to add in the database, basic stuff

public static function addCategory($name) {

    $request = myPDO::getInstance()->prepare(<<<SQL
            INSERT INTO category (idCtg, name)
            VALUES (NULL, :name)
SQL
            );

        $r = $request->execute(array(':name' => $name));

        if ($r) {
            return true ;
        } else {
            return false ;
        }

}

I rarely ask for help, but this time i'm really stuck, Thank you in advance

Upvotes: 1

Views: 61

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281606

One possible reason could be because you are using button or submit to post ajax request. Try this,

$('#addCtg').submit(function (e) {
    e.preventDefault();
    var action = $(this).attr('action');
    var name = $('#name').val() ; 

    $('.messages').slideUp('800', function() {

        $('#addCtg input[type="submit"]').hide().after('<img src="spin.gif" class="loader">');

        $.post(action, {
            name: name
        }, function (data) {
            $('.messages').html(data);
            $('.messages').slideDown('slow');
            $('.loader').fadeOut();
            $('#addCtg input[type="submit"]').fadeIn();
        });
    });     
    return false;
});

Upvotes: 1

Poul Bak
Poul Bak

Reputation: 10929

You're calling: $('.messages') - I bet you have 2 elements with the class messages. Then they will both post to your server.

Upvotes: 1

Related Questions