HTML输入变量未使用AJAX传递到PHP文件

Question

The i'm working on needs the user to enter their name and then they will click a submit button and their details will appear below based on what the PHP collects on them. Thing is all this needs to be done on the same page, i've used Ajax to do this however the input of the text box isn't being passed to the PHP page at all. Could someone advise on where i'm going wrong as i've really ran out of answers on this one

HTML side:

<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 side:

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

Answer 1

You need to give the input field the ID summNameEntered as that is what you're requesing in the AJAX call:

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

Or you can simply change var sname = $("#summNameEntered").val(); to var sname = $(".summNameEntered").val();

And summNameEntered: $("input[name='summNameEntered']").value should be summNameEntered: $("input[name='summNameEntered']").val()