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?
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).
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
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.
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);
}
});
}
});
Related
i want to make a ajax call to controller when a value
is selected from select box.
this is my code:
<select class="form-control required" name="law_name" id="law_name">
#foreach($law_name as $lawname)
<option value="{{$lawname->id}}">{{$lawname->law_name}}
</option>
#endforeach
</select>
<script>
$("#law_name").on('change', function(){
alert('123');
$.ajax({
type: 'POST',
dataType: "json",
data: data,
url: "{{ URL::to('admin/SubLawController/index') }}",
success: function (response) {
}
});
});
</script>
my script is not running when i change value from select box
following is jquery code for making ajax call on change event of dropdown box,
$(function() {
$("#law_name").change(function () {
alert( $('option:selected', this).text() );
$.ajax({url: "http://xyz"+ $( this ).text(), success: function(result)
{
$("#div1").html(result);
}});
});
});
Code is in jquery , you have to use xmlhttprequest object for pain javascript.
I am getting records from database in WordPress then creating and adding value in select tag(HTML) dynamically.
<?php
global $wpdb;
$registeredUsers = $wpdb->get_results('SELECT * FROM wp_users where user_login != "Admin"',ARRAY_A);
$select='<select name="users" class="form-control" id="users">';
$select.= '<option value="Select User"> Select User</option>';
foreach($registeredUsers as $user)
{
$select.='<option value="'.$user['user_email'].'">'.$user['user_login'].'</option>';
}
$select.='</select>';
?>
I am using $select variable in Html and drop down is being displayed properly.
<form id="a" action="" method="post">
<div style="margin: 0 auto;width:500px;">
<?php echo $select ?>
</div>
</form>
I have written code to get selected drop down onchange event in jquery. It return success but I am not able to get selected value of dropdown.
<script type="text/javascript">
$(document).ready(function(){
$("select[name='users']").change(function () {
jQuery.ajax({
type: "POST",
data: $("form#a").serialize(),
success: function(data){
alert("SUCCESS");
}
});
});
});
</script>
Below code return nothing
if(isset($_POST['users'])) {
echo $_POST['users'];
}
Set url option to your page in your ajax function:)
<script type="text/javascript">
$(document).ready(function(){
$("select[name='users']").change(function () {
jQuery.ajax({
type: "POST",
url:"yourpage.php"
data: $("form#a").serialize(),
success: function(data){
alert("SUCCESS");
}
});
});
});
</script>
replace yourpage.php
I have a jQuery Ajax problem.
I have a select tag with options of courses, the select holds div id="course". I have a button with id of "go" and an empty div with id of "courseInfo". I need to make it so that when a course number is selected, the teacher name in my php file that goes with it is displayed on the page. I have all my Ajax written, everything is linked, but it wont work and no error when I debug.
$(document).ready(function(){
findCourse = function(){
var file = "Course.php?course="+$("#course").val();
$.ajax({
type: "GET",
url: file,
datatype : "text",
success : function(response) {
$("#courseInfo").html(response);
}
});
}
clear = function(){
$("#courseInfo").html("");
};
$("#course").click(clear);
$("#go").click(findCourse);
});
Form:
<form action="" method="post">
<select name="course" id="course">
<option value="420-121">420-121</option>
<option value="420-122">420-122</option>
<option value="420-123">420-123</option>
<option value="420-221">420-221</option>
<option value="420-222">420-222</option>
<option value="420-223">420-223</option>
<option value="420-224">420-224</option>
</select>
Select a course to see the course name and teacher assigned<br><br>
<input type="button" id="go" value="go!">
</form>
<br><br>
<div id="courseInfo"></div>
Assuming that the PHP side is working properly, the code below should fix the issue.
$(document).ready(function(){
findCourse = function(){
var file = "Course.php?course="+$("#course").val();
console.log(file);
$.ajax({
type: "GET",
url: file,
datatype : "text",
success : function(response) {
$("#courseInfo").html(response);
}
});
}
clear = function(){
$("#courseInfo").html("");
};
$("#course").click(clear);
$("#go").click(findCourse);
});
You miss the = in var file.
Yours was
var file = "Course.php?course"+$("#course").val();
It should be
var file = "Course.php?course="+$("#course").val();
I have a form which has a select tag that contains the numbers from 1-31. What I'm trying to do is update the database with the value in the select tag if the user changes it (the default value is the value in the database i.e $drop_d) WITHOUT reloading the page at all.
The following code doesn't seem to work, I think there is a problem in the way I am sending my data to ajax.
This variable contains the default value:
$drop_d = $e_r[drop_d];
The form:
<form> Number of days: <select name="dropD" id="dropID"> <?php for($i=1; $i<=31; $i++){ ?> <option value="<?php echo $i;?>" <?php if($i==$drop_d){ ?> selected="selected" <?php } ?> > <?php echo $i; } ?> </select> </form> <br />
Ajax:
<script>
$('#dropID').change(function(){
alert(1);
var url = document.URL;
var blah = $('#dropID').val()
alert(blah);
alert(url);
$.ajax({
type: 'POST',
url: url,
data: {newFieldValue: blah},
dataType: 'html'
}).done( function(){
alert(1);
blah.hide();
});
});
</script>
Update on database:
<?php
$newFieldValue = $_POST['newFieldValue'];
$updateD = 'UPDATE en SET drop_d = $newFieldValue WHERE name=$name;
mysql_query($updateD);
?>
$('select#dropID').on('change' , function(){
var url = document.URL;
var blah = $('select#dropID').val();
$.ajax({
type: 'POST',
url: url,
data: {newFieldValue:blah},
dataType: 'html'
});
});
You have defined an id value id="dropID, so your jQuery should be:
$('#dropID').val()
I have a form in a php file that takes user entered values and sends the data into a .txt file.
Now it works fine when the form is filled, the 'submit' button is clicked and the user is sent to a 'confirmation/completed' page, whilst the data received is put into a .txt file.
What i want to do is use ajax and jquery to have the form => completed/confirmation without being sent to the other page.
The problem is the user data is not being transmitted now to the .txt file.
PHP: (confirmation.php)
<?php
$color = $_POST['color'];
$fp = fopen('userdata.txt', 'w');
$valstring = "What Color: " . $color . "\r\n";
fwrite($fp, $valstring);
fclose($fp);
?>
AJAX/JQUERY: (button clicked from form.php)
$(document).ready(function() {
var cir = {
load: $('<div />', { class: 'loading' }),
contain: $('#contain')
}
$('input[type="submit"]').on('click', function(e) {
e.preventDefault();
$.ajax({
url: 'confirmation.php',
type: 'POST',
beforeSend: function() {
cir.contain.append(cir.load);
},
success: function(data) {
cir.contain.html(data);
}
});
});
});
When using the ajax above the userdata.txt file only has the What Color: entered into it. The $color value that the user selected has not been recognised.
I know the code works without the ajax, but i would like to have the ajax (no page refresh) method, if possible.
Thanks in advance for any help.
You must set the data parameter in your ajax call, something like this should work:
<form>
<select name="color" id="color">
<option value="Red">Red</option>
<option value="Green">Green</option>
</select>
<select id="age">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="name" />
<input type="submit" value="SEND" />
</form>
$('input[type="submit"]').on('click', function(e) {
$.ajax({
url:'confirmation.php',
type:'POST',
// get the selected values from 3 form fields
data:'color=' + $('#color').val() +
'&age=' + $('#age').val() +
'&name=' + $('#name').val(),
success:function(data) {
// ...
}
});
return false;
});
You should probably read more about jQuery.ajax
you are not sending any data in your ajax post, for this reason the variable $color it's empty in the confirmation.php
try changing this:
$.ajax({
url: 'confirmation.php',
type: 'POST',
beforeSend: function() {
cir.contain.append(cir.load);
},
success: function(data) {
cir.contain.html(data);
}
with:
var formColor = $("#colorId").val(); //where ColorId it's the color input type ID
$.ajax({
url: 'confirmation.php',
type: 'POST',
data: { color: formColor },
beforeSend: function() {
cir.contain.append(cir.load);
},
success: function(data) {
cir.contain.html(data);
}