Display text depending on a choice made in select box
Question
How can I run a PHP query which only runs when an option is chosen from a select dropdown but also which refreshes each time a different option is chosen?
For example, here is the HTML:
<html>
<head>
<script type="text/javascript" src="/hr/includes/jui/js/jquery-ui-1.8.20.min.js"</script>
<script>
$(document).ready(function() {
$('#select_box_1').change(function() {
if($(this).val() != '')
$.ajax({
type: 'get',
url: 'balance1.php',
data: 'value' + $(this).val() ,
success: function(data) {
$("#result-div").html(data);
}
});
}
});
});
</script>
</head>
<body>
<form name="form" id="form" method="post" action="validate.php">
<div id="select_box_1">
<select name="drop_down">
<option value="">Please choose</option>
<option value="1">John</option>
<option value="2">Bob</option>
<option value="3">Mike</option>
</select>
</div>
<div id="result-div">
</div>
<input type="submit">
</form>
</body>
</html>
balance1.php
<?php
print "GET Value:".$_GET['value'];
?>
I would like to run a query below the select box depending on the value chosen - for example, when nothing is chosen there is no query ran. If the user chooses John from the list then the query runs where the id=1 and displays results for John. If the user then chooses Bob, the query should run again where the id=2 and so on?
4 answers
solution1
1 2012-05-24 13:51:54
i suggest you to use jquery.ajax, which is way more powerful than you think mate ! below is the example code to make it working
$('#select_box_1').change(function() {
if($(this).val() != '')
$.ajax({
type: 'get',
url: 'URL To Your PHP Script',
data: 'value' + $(this).val() ,
success: function(data) {
$("#result-div").html(data);
}
});
}
});
EDIT : $_GET['value'] will hold the value in your php script, you can query database using that value and return your result or output to ajax call and then you can simply populate the data in your html view
solution2
1 ACCPTED 2012-05-24 19:15:35
This is working:
[...]
<select name="drop_down" id="sel_something">
[...]
$('#sel_something').change(function() {
if($(this).val() != '') {
$.ajax({
type: 'get',
url: 'someurl',
data: { 'value' : $(this).val() } ,
success: function(data) {
// do your stuff
}
});
}
});
I gave an id to the select and modified the data line (and added a few syntax corrections).
solution3
0 2012-05-24 13:50:16
Try something like this:
$("#select_box_1").change(function(){
if ($(this).val() != "") {
$.ajax({
type: "POST",
url: "foo.php",
data: "id=" + $("#select_box_1").val(),
success: function(msg){
$("#result").text(msg);
}
});
}
});
solution4
0 2012-05-24 14:05:10
If you are reloading the page everytime the value is changes in the dropdown, then you can use onchange attribute in your SELECT tag.
Reload the page when value is changed and set a GET variable in the URL. If this GET variable is NULL then do not process the PHP code ... else process accordingly.
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.