How to call php function from html select option onChange?

Question

So Ive been struggling with this problem all day and can't seem to get around it. I need to call a php query whenever an option from a dropdown menu is selected.

<select class="selectpicker" id="headSelector">
 <?php
  $cname = $_GET['cname'];

 $linkID = mysql_connect("localhost","USER","PASS");
 mysql_select_db("USR", $linkID);               

 $SQLCurr = "SELECT `AName` FROM `Char-Armor` WHERE `CName` = '$cname' AND `AType`= 'Head'";
 $currHeadValues = mysql_query($SQLCurr, $linkID);
 $currRow = mysql_fetch_row($currHeadValues);
 $curr = $currRow[0];
 if($curr == '' || $curr == NULL){
     $curr = 'None';
 }

 $SQLHead = "SELECT AName FROM  `Armor` WHERE AType = 'Head'";
 $allHeadValues = mysql_query($SQLHead, $linkID);
 echo "<option>".$curr."</option>";
 while($row = mysql_fetch_assoc($allHeadValues)){
     echo "
         <option>".$row['AName']."</option>
     ";
 }
 ?>
 </select>

The php part needs to take the 'AName' from the option and use it to insert into a table.

I have done a lot of reading about AJAX but I do not quite understand how it is supposed to work. I think it is like html -> js -> Ajax -> php

I need it to stay on the same page when an option is selected.

Any explanation would be great, thanks!

Put your PHP in a separate file then make a call to it with AJAX. Here are the basics. — Jay Blanchard
– Jay Blanchard, Commented Dec 7, 2015 at 22:57

Akshay · Accepted Answer · 2015-12-07 23:03:14Z

1

Here's what you can do.

1). As soon as an option is selected, run a jquery onchange event and get the value of the selected option.

2). Now, run an ajax request with the value of the selected value and post this data to a backend php file.

3). Now on this backend php file, receive data and process (run the query).

Code Sample.

Change your option line in this way.

<option value="$row['AName']">".$row['AName']."</option>

jQuery-Ajax

$("#headSelector").change(function(e){
//get the value of the selected index.
value = $(this).val();
//make an ajax request now
$.ajax({
url: 'yourPhpBackendScript.php',
type: 'POST',
data: {value: value},
success:function(response)
{
alert(response);
}
})
})

yourPhpBackendScript.php

//You can now receive the selected value as $_POST['value'];
//get the value now
$value = $_POST['value'];
//you can apply validations if you want.
//Now, run the query and send a response. Response can be a simple message like data submitted etc. So
runQueryHere

echo "inserted"; //response returned to ajax rquest

answered Dec 7, 2015 at 23:03

Akshay

2,2393 gold badges17 silver badges35 bronze badges

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

1 Comment

Kyle Brown Over a year ago

Can you comment a link that can explain what exactly AJAX does. Everything I have found is to dense for me to get a general sense of things.

Akshay · Accepted Answer · 2015-12-07 23:31:22Z

0

First of all, return the string like this:

$options_arr = '';
while($row = mysql_fetch_assoc($allHeadValues)){

         $options_arr .= "<option>".$row['AName']."</option>
     ";
 }

echo $options_arr;

Use the change event like this:

$("#headSelector").change(function(){
    $.ajax({
        data: '',
        url: 'your_url',
        type: 'POST',//Or get
        success: function(options_array){
            $("#headSelector").empty().append(options_str);
        }
    });
});

edited Dec 7, 2015 at 23:31

Akshay

2,2393 gold badges17 silver badges35 bronze badges

answered Dec 7, 2015 at 23:01

Tariq

2,8813 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to call php function from html select option onChange?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related