未使用AJAX傳遞給PHP文件的HTML輸入變量

Question

我正在處理的操作需要用戶輸入他們的姓名，然後他們將單擊一個提交按鈕，他們的詳細信息將根據PHP收集的內容顯示在下方。事情是所有這些都需要在同一頁面上完成，我已經使用Ajax來做到這一點，但是文本框的輸入沒有被傳遞到PHP頁面。可能有人建議在我要去哪裏錯了，因爲我真的跑出來的答案就這一個

HTML端：

<form action="summonerSearch.php" method="post"> 
     <input type="text" name="summNameEntered"> 
</form> 




<button type="button">Click Me</button> 
<p></p> 
<script type="text/javascript"> 
    var sname = $("#summNameEntered").val(); 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      $.ajax({ 
       type: 'POST', 
       url: 'summonerSearch.php', 
       data: { // this is new 
       summNameEntered: $("input[name='summNameEntered']").value 
       }, 
       success: function(data) { 
        $("p").html(data); 
       } 

      }); 
    }); 
}); 
</script> 

PHP端：

echo('their name is'.$_POST["summNameEntered"]); 

Answer 1

你需要給輸入字段ID summNameEntered，因爲這是你在AJAX呼叫中所要求的：

<form action="summonerSearch.php" method="post"> 
     <input type="text" id="summNameEntered" name="summNameEntered"> 
</form> 

或者你也可以簡單地改變var sname = $("#summNameEntered").val();到var sname = $(".summNameEntered").val();

而且summNameEntered: $("input[name='summNameEntered']").value應該是summNameEntered: $("input[name='summNameEntered']").val()