フォームは2回提出されました（jQueryを使ったajax）

Question

私は単純なフォームを持っています：javascript/jqueryを使わずに投稿すると、うまく動作し、データベースに挿入が1つしかありません。

入力ボタンの上にajaxという結果が出るようにjqueryを書きました。エラーがあった場合は赤いメッセージ、挿入が成功した場合は緑色でした。私はまた、小さなGIFローダーを表示します。

このjqueryを使用すると、2つのローダーが同時に表示され、2つの挿入がデータベースで行われる理由がわかりません。

私はJavaScriptをコメントするとき、それはうまくいきます、私は完全に私のPHPが大丈夫だと確信しています。

$('#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; 
}); 

それが動作しない理由を私は念のため、送信ボタン

基本PHPの基本的な動作を変更するには「falseを返す」を使用するので、私は本当に、理解していない：

を

<?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(); 
} 

、データベースに追加するには、PHPで私の機能をfinnaly、基本的なもの

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 ; 
     } 

} 

私はめったにお願いします助けを求めていますが、今私は本当に立ち往生しています。ありがとうございます。

Answer 1

あなたのお電話は$('.messages')です。あなたはクラスmessagesの2つの要素を持っていると思います。その後、両方ともあなたのサーバーに投稿されます。

Answer 2

ボタンまたは送信を使用してajaxリクエストを送信している可能性があります。 これを試してみてください

$('#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; 
});