Использование значений форм HTML для запроса AJAX/PHP MySqli

Question

Я пытаюсь использовать AJAX с php и MySqli для получения результатов из базы данных. Я очень новой для AJAX и JavaScript, так что любая помощь будет appriciated

Это моя форма:

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

Это мой AJAX в JS:

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: изменено как getElementByIds иметь .Value на конце

Answer 1

Изменить кнопку от input type="submit" к input type="button"

Answer 2

Попробуйте сделать это, может быть, вы не переходящая в GameID и цена значение вставляется в HTML форме

вар GameID = document.getElementById ("GameID") значение.

var price = document.getElementById ("цена"). Значение;

#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>