CODEWITHSUNDEEP
phphtmlsqlajax
Jonny1998
Jonny1998

Reputation: 107

AJAX to send HTML request to PHP function

I've got a small webpage I'm writing that will feature a couple of tables of data from SQL. I need to have a drop down HTML box that will send a value to the listening AJAX script which will then send that value on to the PHP function (to retrieve the appropriate table from SQL).

I believe I have everything set up correctly, but when I select an option from the dropdown box, nothing happens. What am I missing here? Thanks for any and all suggestions!

menu.html

<!DOCTYPE html>

<html lan="en">
<meta charset="UTF-8">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $('#Menu').change(function(){
                //Selected value
                var tableoptions = $(this).val();

                //Ajax for calling php function
                $.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
                });
            });
        });
        </script>
</head>
<body>
    <select id="Menu">
        <option value='' disabled selected>Select Device</option>
        <option value='capacitors'>Capacitors</option>
        <option value='inductors'>Inductors</option>
        <option value='resistors'>Resistors</option>
        <option value='miscellaneous'>Miscellaneous</option>
     </select>
</body>

sqlQuery.php

<?php
function processUserInp($table) {
      //This is where $table is passed as the table name
      //for the SQL query
}
if ($_POST['tableselected']){
    //call the function!
    processUserInp($_POST['tableselected']);
}
?>

Upvotes: 0

Views: 129

Answers (2)

Software Guy
Software Guy

Reputation: 3280

First off, as someone noticed in the comment, you have misspelled the PHP script file name. Make sure it's the same as the actual file name.

Secondly, your current code is not doing anything once it receives the data from the backend PHP script. Look at this part of your code:

$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){               
});

This should contain the logic of what you want to do once you get back some data from the server. For example:

$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
    console.log(data); // or print data somewhere on the DOM            
});

Your frontend code is working fine (I checked it), assuming that your backend code also works fine (you did not share the entire code so could not test it), then all you need to do is to handle the response that you get back from the PHP script in the backend.

UPDATE: To reply to your comment, you can do the following:

First, add an empty element in your HTML code like so:

<div id="output"></div>

and then, update your jQuery method to insert the returned HTML in this div instead of simply logging it on the console using console.log. Here is how it would look like:

$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
    $("#output").html(data); // or print data somewhere on the DOM            
});

Upvotes: 2

user4347792
user4347792

Reputation:

menu.html

<select onchange="$.get('sqlQuery.php?device='+this.value,function(data){$('#devicedetail').innerHTML=data;});">
<option value='1'>Capacitors</option>
<option value='2'>Inductors</option>
<option value='3'>Resistors</option>
<option value='4'>Miscellaneous</option>
</select>
<div id=devicedetail></div>

sqlQuery.php

<?php
echo "here are details of device $_GET[device]...";
?>

the event onchange on the select tag... make a request... send the id of a device in url (sqlQuery.php?device=3 (example))

the page sqlQuery.php should search for data about the device on a database...

when sqlQuery.php send de data back to menu.html... the ajax show details in div devicedetails

Upvotes: 0

Related Questions