AJAX/PHP MySqliクエリのHTMLフォーム値の使用

Question

データベースから結果を取得するために、phpとMySqliの両方でAJAXを使用しようとしています。私は任意のヘルプが

をにappriciatedされますので、AJAXやJavaScriptに非常に新しいですこれは私のフォームです：これは、JSの私のAJAXある

<form method="get"> 
    <input type="number" min=0 name="gameId" id="gameId" placeholder="Game Id" required><br> 
    <input type="number" min=0 step=0.01 name="price" id="price" placeholder="Price" required><br> 
    <button type="submit" onClick="getGames()">Submit</button> 
</form> 

：

function getGames() { 
    var gameId = document.getElementById("gameId").value; 
    var price = document.getElementById("price").value; 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("jumbotron").innerHTML = xmlhttp.responseText; 
     } 
    }; 
    xmlhttp.open("GET","getGames.php?gameId="+gameId+"&price="+price, true); 
    xmlhttp.send(); 
} 

そして、これは私のPHP

です

<?php 
$servername = "localhost"; 
$serverusername = "root"; 
$dbname = "ryangames"; 

$gameId = intval($_GET["gameId"]); 
$price = intval($_GET["price"]); 

$conn = mysqli_connect($servername, $serverusername, "", $dbname); 
if (!$conn) { 
    die("Connection failed: " . mysqli_connect_error()); 
} 

$sql = "SELECT * FROM GAMES WHERE GameId = ".$gameId." AND Price = ".$price; 
$result = mysqli_query($conn, $sql); 

if (mysqli_num_rows($result) > 0) { 
    while ($row = mysqli_fetch_assoc($result)) { 
     echo "<div class=\"gameHolder\"> 
       <img class=\"gameImg\" src=\"images/".$row["Code"].".png\" alt=\"".$row["Name"]."\"> 
       <div class=\"gameText\"> 
        <h3 class=\"gameName\">".$row["Name"]."</h3> 
        <p class=\"gameDesc\">".$row["Description"]."</p>"; 
        if ($row["Price"] == 0) { 
         echo "<p class=\"gamePrice\">FREE</p>"; 
        } else { 
         echo "<p class=\"gamePrice\">£".$row["Price"]."</p>"; 
        } 
     echo" </div> 
      </div>"; 
    } 
} else { 
    echo "0 results"; 
} 

mysqli_close($conn); 
?> 

私のアドレスに値が表示されますが、何も起こりません。私がphpにインクルードして、毎回ユーザーを更新させるだけであれば、クエリは機能します。

UPDATE：多分あなたはgameIdを渡していない、ことをやってみて、HTMLフォームで

するvar gameId =のdocument.getElementByIdを（挿入された値の価格を終了

Answer 1

がinput type="submit"から、あなたのブラウザで見る何input type="button"

Answer 2

に.VALUEを持って、両方のgetElementByIdsを変更"gameId"）。value;

var price = document.getElementById（ "price"）。value;送信ボタンと

#edit

他の代替は）（あなたのフォームに提出するイベントを添付しe.preventDefaultで他のページに行くのフォームを防ぐためです。

document.getElementById("myform").addEventListener("submit",function(e){ 
 
    e.preventDefault(); 
 
    var gameId = document.getElementById("gameId").value; 
 
    var price = document.getElementById("price").value; 
 
    document.write("gameId:"+gameId+"price"+price); 
 

 
    //... to be continued 
 
});

<form id="myform" method="get"> 
 
    <input type="number" min=0 name="gameId" id="gameId" placeholder="Game Id" required><br> 
 
    <input type="number" min=0 step=0.01 name="price" id="price" placeholder="Price" required><br> 
 
    <button type="submit">Submit</button> 
 
</form>