I should start off by saying that I am very new to server side programming. I am trying to get a value on its change using AJAX.
My AJAX code (ajaxCode.php)
$(document).ready(function() {
$('select[name="selectBox"]').change(function(){
var value = $(this).val();
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {valueChange: value },
dataType: 'html'
});
alert(value );
});
});
My HTML code with the select box (calculator.php)
<select name ="selectBox">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<?php
$status = $_POST['changeStatus'];
echo $status;
?>
This doesn't seem to work. The status will alert but won't be echoed. What am I doing wrong? Thanks in advance?
You probably want to send value of selected box through ajax and then change the status which you get from ajax.
Server site: calculator.php
Client side:
<script>
$(document).ready(function() {
$('select[name="selectBox"]').change(function(){
var value = $(this).val();
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {valueChange: value },
dataType: 'html'
}).done(function(response){
$('.response-holder').html(response);
});
});
});
</script>
<select name ="selectBox">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<div class="response-holder"></div>
This works ok:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("change", ".selectBox", function(){
var v = $(this).val();
$.post( "ajax.php", { changeStatus: v , time: "123" }, function( data ) {
alert("From file: " +data);
});
});
});
</script>
</head>
<body>
<select name ="selectBox" class="selectBox">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</body>
</html>
and ajax.php
<?php
$status = $_POST['changeStatus'];
echo $status;
?>
The code that receives the ajax call should be in its own file, and echo only what you need to retrieve, not the whole content you started with. For example, just echo the status.
Let's say this is your HTML
<select name ="selectBox">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<script>
$(document).ready(function() {
$('select[name="selectBox"]').change(function(){
var value = $(this).val();
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {valueChange: value },
dataType: 'html'
});
alert(value );
});
});
<script>
Then this could be your calculator.php
<?php
$status = $_POST['changeStatus'];
echo $status;
?>
But then, again, you're making an ajax call and not doing anything with its response. To receive that calculator.php is answering, you could do
<select name ="selectBox">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<div id="response"></div>
<script>
$(document).ready(function() {
$('select[name="selectBox"]').change(function(){
var value = $(this).val();
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {valueChange: value },
dataType: 'html'
}).then(function(response) {
jQuery('#response').html('Ajax answered: '+response);
});
alert(value );
});
});
<script>