AJAX submit form、return success

Question

タイトルが示唆するように、私はajaxを使用してフォーム結果を外部ファイルに送信しています。

Ajaxを追加するまで、jQueryは完全に機能します（つまり、関連するリンクをクリックするとフォームが表示されます）。その後、すべてが破損します。

私はそれを何十回も見てきましたが、私が間違っていることは本当に分かりません。

jQueryの+ AJAX：

$(document).ready(function(){ 
    $("#change_shelves").click(function(){ 
     $("#add_to_shelf").fadeIn(function(){}); 

    }); 

    $("#add_to_shelf_submit_button").click(function(){ 
     var shelfID = $('#shelf').val(); 

     $.ajax({       
      type: "post", 
     url: "add_to_shelf.php", 
     data: "shelfID=" + shelfID + "&bookID=" + <?php $_GET['id'] ?>, 
        success: function() { 
         $("#add_to_shelf").fadeOut(function(){}); 
          $("#success").fadeIn(function(){}); 
        } 
    }); 
    }); 
}); 

HTML：

<p id="on_shelf">This book is on your <a href="want_to_read.php">want to read</a> shelf. <span id="change_shelves"><a href="#">Change shelves</a></span>.</p> 

<form style="display: none;" id = "add_to_shelf" method="POST" action="add_to_shelf.php"> 
      <select name = "shelf"> 
       <option value = "1">Read</option> 
       <option value = "2">Want to Read</option> 
       <option value = "3">Reading</option> 
      </select> 
      <input type = "submit" id="add_to_shelf_submit_button" value = "submit" name = "Submit" /> 
     </form> 
    <p style="display: none;" id="success">Shelf updated.</p> 

外部ファイルadd_to_shelf.phpが非問題です - 唯一のjQueryを使用したときのデータが正常に送信され、私は、ファイルがある知っています正しい。

Answer 1

関連IDがshelfの要素はありません。

var shelfID = $('#shelf').val(); 

をプラスあなたのような入力要素上の任意のonClickイベント内preventDefault()を使用してください：これは失敗します

$(...).onClick(function(e){(
    e.preventDefault(); 
}); 

これは典型的な非AJAXいずれかのように提出されたフォームのフォームを防止します。

---

さらに、$('#shelf').val()を使用して選択したオプションを取得する際に問題が発生することがあります。代わりにこれを試してみてください：

$('#shelf option:selected').val(); 

---

は、トラブルシューティングするにはあなたの代わりに.ajax()の.post()を使用してみてください。私はこれをもっと手軽に見つけました。

$("#add_to_shelf_submit_button").click(function(e){ 
    e.preventDefault(); 
    var shelfID = $('#shelf').val(); 
    alert('#add_to_shelf_submit_button clicked'); 
    $.post("add_to_shelf.php", {"shelfID": shelfID, "bookID" : <?php $_GET['id'] ?>}, function(data){ 
      alert(data);//response from add_to_shelf.php 
    }); 
}); 

私はあなたが$_GET['id']は、PHPにPOSTリクエストを送信し、現在のページから取られた値であり、JSのいずれにもロードされる前に得ていることを知っているここと仮定しています。

$ _GET ['id']を使用する前に確認してください。今のところ、誰でもJSに何かを注入することができます（少なくとも）。

Answer 2

選択した「棚」にはIDが添付されていません。

var shelfID = $('#shelf').val(); 

は未定義です。選択にIDを追加し、それがこの

success: function (data) { ... 

Answer 3

てみてください動作するはずです：

$("#add_to_shelf_submit_button").click(function(e){ 
    e.preventDefault(); 
    ... 

は提出を避けるために。

Answer 4

てみてくださいすることにより、このライン

success: function() { ... 

を変更