Pass form value to PHP via AJAX

Question

I have a script that uses AJAX to display results from a separate PHP script on my page.

However, now I'd like to pass data from the form (the select menu) to the script. How do I do this? I'd just like to use the value selected in the select menu as part of the WHERE clause in my SQL command.

Web Page:

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script type="text/javascript">

 $(document).ready(function() {

    $("#display").click(function() {                

        $.ajax({    //create an ajax request to load_page.php
          type: "GET",
          url: "display.php",             
          dataType: "html",
          data: {
              "some-var": "some-value"
          },            
          success: function(response){                    
              $("#responsecontainer").html(response);
          }

        });

    });

});
</script>
</head>
<body>

<form>
  <select id="city" name="city">
  <option value="">City:</option>
  <option value="glasgow">Glasgow</option>
  <option value="london">London</option>
  </select>
  <input type="button" id="display" value="Display All Data" />
</form>
<br>
<div id="responsecontainer">&nbsp;</div>

</body>
</html>

PHP script:

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "db";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT * FROM entries";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - City: " . $row["city"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

Jquery form.serialize(). When will you start reading manuals? — u_mulder
– u_mulder, Commented Apr 24, 2017 at 9:41
serialize the form just @u_mulder said. You can also do this with jquery's FOrmData — Rotimi
– Rotimi, Commented Apr 24, 2017 at 9:43
You did use ajax on here : stackoverflow.com/questions/43450121/… how did u pass the values? — Masivuye Cokile
– Masivuye Cokile, Commented Apr 24, 2017 at 9:46

C. Norris · Accepted Answer · 2017-04-24 09:44:40Z

2

$("#display").click(function() {                

        $.ajax({    //create an ajax request to load_page.php
          type: "GET",
          url: "display.php",             
          dataType: "html",
          data: {
              "city": $('#city').val(),
          },            
          success: function(response){                    
              $("#responsecontainer").html(response);
          }

        });

    });

answered Apr 24, 2017 at 9:44

C. Norris

6001 gold badge7 silver badges17 bronze badges

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

2 Comments

michaelmcgurk Over a year ago

That worked perfectly. I just had to add $city = $_GET['city']; $sql = "SELECT * FROM entries WHERE city = '$city'"; to my PHP. Many thanks :)

C. Norris Over a year ago

Glad to hear that I helped. ^^

Harry Walter · Accepted Answer · 2017-04-24 09:47:16Z

1

Using jquery you can get the value of the selected option:

$('#city').val()

So you can then send that with your ajax request:

$('#display').click(function(e) {
   e.preventDefault();
   $.ajax({
      type: "GET",
      url: "display.php",             
      data: {
          "city": $('#city').val()
      },            
      success: function(response){                    
          $("#responsecontainer").html(response);
      }

   });
});

Then in your PHP:

$city = $conn->real_escape_string($_GET['city']);
$sql = "SELECT * FROM entries WHERE city = '".$city."'";

N.B. You should be very careful about trusting user provided variables with queries.

answered Apr 24, 2017 at 9:47

Harry Walter

111 bronze badge

1 Comment

michaelmcgurk Over a year ago

Many thanks, Harry. I 100% agree - I will be passing user input data through some fairly strict filtering and validation tools now I have got the data I need. Thankyou :)

Collectives™ on Stack Overflow

Pass form value to PHP via AJAX

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related