Trying to pass variable from input radio to PHP via jQuery.post()
Question
I'm trying to load a html table created by a php code. The table should be generated by an sql query that depends on a variable from a radio input selector, but somehow i can't pass that variable via jQuery.post(). I made a simple version that has the same issue so I hope someone can help me with that:
test.php:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$.post('ajax.php', {varphp: op});
$("#div1").load('ajax.php', function(){
});
});
});
</script>
<body>
<label class="radio-inline"><input type="radio" value="110" name="selectOP" id="selectOP">110 </label>
<label class="radio-inline"><input type="radio" value="115" name="selectOP" id="selectOP">115 </label>
<div id="div1">
</div>
</body>
</html>
ajax.php:
<?php
$var= "Something";
echo $var;
//$varphp = $_POST['varphp'];
//echo $varphp;
?>
So, with the two last lines of ajax.php commented, code successfully runs and the var $var loads inside div1. But if i uncomment those lines, apparently the code stops, and nothing is loaded on div1. What am I doing wrong?
3 answers
solution1
0 2018-10-18 19:02:02
$.post('ajax.php', {varphp: op});
$("#div1").load('ajax.php', function(){
$});
These two lines are actually making two separate ajax requests, which means the server will pick them up separately. Only the first one has a POST parameter, and only the second one sets the content of the DOM object.
Try something like this:
$("#div1").load('ajax.php', {
varphp: op
});
solution2
0 ACCPTED 2018-10-18 19:05:25
You are calling $.post where you pass the argument and then calling load with no arguments. Of course you can't get $_POST['varphp'] when you call 'load' because you are not passing this variable.
you must use one of them. you can do with this:
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );
or
$("#div1").load('ajax.php', {varphp: op});
but not both
thus, your code can be
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );
});
});
or
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$("#div1").load('ajax.php', {varphp: op});
});
});
solution3
0 2018-10-18 19:40:57
A good practice I like is to use AJAX w/ deferred promises. You can try converting your code to the following:
$.ajax({
type: 'post', // you can switch to GET, POST, etc.
url: 'ajax.php',
data: {varphp: op},
})
.done(function(data) {
$('#div1').html(data);
})
.fail(function(data) {
// if your code fails, you can see the errors here in the console
console.log(data);
})
.always(function(data) {
// do something every time
});
The codes within the done , fail , or always callback functions will run depending on whether the AJAX call is a success, fail, or neither respectively. With this, you can troubleshoot your code easily as well, especially when the AJAX call error'd out (look inside the fail function).
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.