I want to use the user selected option value without submitting a form. Here is my HTML code
Combo Box<br>
<select name="select1">
<option value="IVP" selected>IVP</option>
<option value="SURTEK">SURTEK</option>
<option value="GUITARTUNER">GUITARTUNER</option>
<option value="OTHER">OTHER</option>
</select>
I want to take the selected option value to a php variable, so that according to option value a new set of data could be displayed. Thanks
as other people suggested, you should use AJAX. I'd recommend looking into javascript/Jquery examples of a AJAX call.
I guess you want to modify a portion of the web depending on the option the user selects, the best way to do this is have a separate PHP script that receives the selected option (captured in javascript/JQuery) and returns the new HTML you want to display.
For example in Jquery to get the selected option:
var selected_option_value=$("#select1 option:selected").val();
Also in Jquery to do a AJAX call, passing the value using POST:
$.post("script_that_receives_value.php", {option_value: selected_option_value},
function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed.
$("#place_where_you_want_the_new_html").html(data);
}
);
Hope this helps!
EDIT: let's give a bit more of detail to the example above:
let's say you have a index.html page where you have the <select name="select1">given in your question:
the first step would be to link an event when someone select one of the options, how to do this:
1- First way to do it:
<select name='select1' id='select1' onchange='load_new_content()'>
This way when someone changes the selected value of the <select> list the javascript function load_new_content() will be executed. Notice I have added id='select1' to the tag, this is used to search this element in javascript/JQuery, you should always use the id attribute if you need to use that tag in javascript/JQuery.
2- Second way, link the event using JQuery:
To do this you should have a <script> tag inside the <head> of index.html. Inside this <script> tag you should have:
$(document).ready(function(){
// everything here will be executed once index.html has finished loading, so at the start when the user is yet to do anything.
$("#select1").change(load_new_content()); //this translates to: "when the element with id='select1' changes its value execute load_new_content() function"
});
Regardless the option you want to use you now need this load_new_content() function. It should also be declared inside the <script> tag of the <head> tag, just like the $(document).ready function.
function load_new_content(){
var selected_option_value=$("#select1 option:selected").val(); //get the value of the current selected option.
$.post("script_that_receives_value.php", {option_value: selected_option_value},
function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed.
$("#place_where_you_want_the_new_html").html(data);
alert(data); //just to see what it returns
}
);
}
Now the only thing left is this script_that_receives_value.php:
<?php
$selected_option=$_POST['option_value'];
//Do what you need with this value, then echo what you want to be returned.
echo "you have selected the option with value=$selected_option";
?>
Use AJAX, while selecting a option in dropdown trigger a jQuery function and send values to server page by AJAX
HTML page :
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
PHP page (getuser.php) :
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
You cannot get option value in a php variable, without making an http request, since the selected value lies in the client, and php - in the server.
You can use ajax, but it's still submitting the form. If you don't want to perform query to the server, you have to load all of the data in the client and use JavaScript to manage it
