How to send the value of select tag using ajax to php residing on the same page
Question
Problem
I want to use the select tag to select a value and send the value using ajax call to a PHP embedded in the same page.
Here, in my code, I am using the select tag and as soon as I select any value from the drop-down, the value is being sent to the javascript and being alerted properly. But when I $_POST['option'] in PHP and echo it, it is not getting printed on the page.
I know PHP is a server-side language and anything written in PHP executes first when a page is loaded.
tablesize.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0 /jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val){
$.ajax({
type: 'post',
url: 'tablesize.php',
datatype:'json',
data: {option:val},
success: function (response) {
alert(val);
//document.getElementById("new_select").innerHTML=response;
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
<select onchange="fetch_select(this.value);">
<option value="10">state</option>
<option value="20">20</option>
</select>
</div>
</body>
</html>
<?php
if(isset($_POST['option'])){
$val=$_POST['option'];
echo $val;
}
?>
Thanks...
4 answers
solution1
1 2018-03-31 10:44:43
same page ajax calling and echo value
<?php
session_start();
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("change","#sel",function(){
var val = $(this).val();
console.log(val);
$.ajax({
type: 'post',
url: 'index.php?action=data',
datatype:'json',
data: {"option":val},
success: function (response) {
alert(val);
location.href="index.php";
}
});
});
});
</script>
</head>
<body>
<div id="select_box">
<select id="sel" name="sel">
<option <?php if($_SESSION['val']=="a") echo "selected" ;?> value="a">a</option>
<option <?php if($_SESSION['val']=="b") echo "selected" ;?> value="b">b</option>
<option <?php if($_SESSION['val']=="c") echo "selected" ;?> value="c">c</option>
<option <?php if($_SESSION['val']=="d") echo "selected" ;?> value="d">d</option>
<option <?php if($_SESSION['val']=="e") echo "selected" ;?> value="e">e</option>
<option <?php if($_SESSION['val']=="e") echo "selected" ;?> value="f">f</option>
</select>
</div>
</body>
</html>
<?php
$val = $_POST['option'];
if($_REQUEST['action']=="data"){
$_SESSION['val']=$val;
echo "Selected value = ".$_SESSION['val'];
}elseif ($val=="") {
echo "Selected value = ".$_SESSION['val'];
}
?>
solution2
0 2018-03-31 08:57:24
Different ajax.php and write code here and url change in your ajax code.
Ajax.php
<?php
if(isset($_POST['option']))
{
$val=$_POST['option'];
echo $val;
}
?>
Your ajax code...
function fetch_select(val){
$.ajax({
type: 'post',
url: 'ajax.php',
datatype:'json',
data: {option:val},
success: function (response) {
alert(response);
//document.getElementById("new_select").innerHTML=response;
}
});
}
solution3
0 ACCPTED 2018-03-31 09:06:15
Here is your solution
The ajax success contains your result. The error is in your printing method.
You need a different file for ajax here I use ajax.php .
One more thing put scripts at last on HTML page always.
tablesize.php
<html>
<head>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center></center>
<div id="select_box">
<select onchange="fetch_select(this.value);">
<option value="10">state</option>
<option value="20">20</option>
</select>
</div>
<p id="print-ajax"></p><!--Result will print here-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0 /jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val){
$.ajax({
type: 'post',
url: 'ajax.php',
datatype:'json',
data: {option:val},
success: function (response) {
$('#print-ajax').html(response);//This will print you result
}
});
}
</script>
</body>
</html>
ajax.php
echo $_POST['option'];die;
solution4
0 2018-03-31 09:11:15
You are printing the wrong variable on ajax post success. You needed response variable to alert of PHP script's output.
Also put the PHP post handler block to the top of the page so that HTML contents will not be included in the response for AJAX.
Updated Code:
<?php
if(isset($_POST['option'])){
$val=$_POST['option'];
echo $val; exit;
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function fetch_select (val){
$.ajax({
type: 'post',
url: 'tablesize.php',
datatype:'json',
data: { option:val },
success: function (response) {
alert(response);
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
<select onchange="fetch_select(this.value);">
<option value="10">state</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.