Using HTML forms values for AJAX/PHP MySqli query

Question

I am trying to use AJAX with both php and MySqli to get results from a database. I am very new to ajax and javascript so any help will be appriciated

This is my form:

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

This is my AJAX in 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();
}

And this is my 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);
?>

I can see the values in my address but nothing happens. The query works if I just include in php and make the user refresh every time.

UPDATE: changed both getElementByIds to have .value on the end

What you see in your browser inspect element network tab for getGames.php. Click on that and see the response tab — MindGamer
– MindGamer, Commented Aug 23, 2016 at 20:21
When I go to getGames.php I get undefinded indexes for both GameId and Price. When I use inspect element and try to submit, getGames.php doesn't appear — Ryan
– Ryan, Commented Aug 23, 2016 at 20:32

MindGamer · Accepted Answer · 2016-08-23 20:48:34Z

1

Change your button from input type="submit" to input type="button"

answered Aug 23, 2016 at 20:48

MindGamer

1361 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hiago Silvério · Accepted Answer · 2021-10-20 15:08:50Z

1

Try doing that. Maybe you're not passing the gameId and price the value in html form

var gameId = document.getElementById("gameId").value;

var price = document.getElementById("price").value;

#edit

Other alternative with the submit button is attach the submit event on your form and prevent the form going to other page with 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>

edited Oct 20, 2021 at 15:08

answered Aug 23, 2016 at 20:23

Hiago Silvério

262 bronze badges

1 Comment

Ryan Over a year ago

I just changed it to do that, i forgot to

Collectives™ on Stack Overflow

Using HTML forms values for AJAX/PHP MySqli query

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related