Hello I am trying to choose an option from the select to show me the option chosen on the page by ajax but the code is not working if you can help me thanks
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0 /jquery.min.js"></script>
<script>
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>
<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-->
ajax.php
echo $_POST['option'];
Sometimes jQuery file not working while you put it at the top of Body tag. Currently your code is perfect. But my suggest is try this.
<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>
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>
Sometimes "post" small format creates issues. So always use "POST" as a capital format.
Hope it will be work for you.
Related
This question is SOLVED - solution is on the bottom of the question.
Let's say I have this form:
<form id="form1" action="" method="POST">
<select name="cars">
<option value="">Choose a car</option>
<option value="Ferrari">Ferrari</option>
<option value="Lamborghini">Lamborghini</option>
</select>
<select name="colors">
<option value="">Choose a color</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
Php:
$cars = $_POST['cars'];
$colors = $_POST['colors'];
echo "Car: ".$cars." - Color: ".$colors."";
Ajax:
<script type='text/javascript'>
$('select[name="colors"]').on('change', function(){
$.ajax({
type: "POST",
url: "phpfile.php",
data: $("#form1").serialize(),
success: function(data){
$('#target1').html(data);
}
});
return false;
})
</script>
I want to show on html the results:
<div id="target1"></div>
I want to show the results when I choose the color (The 2nd dropdown):
onchange="this.form.submit()"
IT IS DONE:)
I used this code and it I am getting what I want:
<script type='text/javascript'>
$("#colorID").on("change", function() {
var $form = $("#form1");
var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
$.ajax({
url: 'phpfile.php',
data: $form.serialize(),
type: method,
success: function(data){
$('#target1').html(data);
}
});
});
</script>
Technically you dont need ajax to get what your asking for but heres jQuery ajax example:
Change your HTML to:
<select name="colors" onchange="this.form.submit()">
<option value="">Choose a color</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
$( "#form1" ).submit(function( event ) {
event.preventDeafault();
alert('form submitted');
$.ajax({
type: "POST",
url: "<YOUR PHP FILE PATH>",
data: $("#form1").serialize(),
success: function(data){
alert('ajax success');
$('#target1').html(data);
}else{
alert('ajax error');
}
});
return false;
})
In your PHP:
print_r($_POST);
$car = $_POST['car'];
$color = $_POST['color'];
echo "<p>Car: ".$car." - Color: ".$color."</p>";
This is untested - I've just typed it out on my phone during my lunch break!
To debug the php add this line ( to unsure the post worked):
print_r($_POST);
Use your browser developer tools to debug your AJAX and JS
I've add alerts to help you debug - you can remove these when its working
How to post one variable in ajax call to multiple php file's using URL method..
My data is as follow..
<select name="districts" id="district_list" class="update" onChange="getDist(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
I want to pass these id value to another two php files using ajax and i tried as follow..
function getState(val) {
$.ajax({
type: "POST",
url: "get_dist.php",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
Please try this
<select name="districts" id="district_list" class="update" onChange="getDist(this.value) ; getCity(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
<script>
function getDist(val){
$.ajax({
type: "POST",
url: "get_dist.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
function getCity(val){
$.ajax({
type: "POST",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#city_list").html(data);
}
});
}
</script>
Why I can not get response from php by using jQuery Ajax? When I click the "page" buttons, the weblink will change from:
http://localhost/jQuery1.html
to something like:
http://localhost/jQuery1.html?state_chosen=Alabama&Type=&page=1
However, no echo-ed results from PHP.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").change(function(){
$.ajax({
type:"POST",
url:"passdata.php",
data: $('form').serialize(),
success: function(data){
$('#result').html(data);
} });
}); });
</script>
</head>
<body>
<form >
<select class="dd1" name="state_chosen">
<option selected value = ""> Location </option>
<option value="Alabama" > US: Alabama </option>
</select>
<select class="dd2" name="type">
<option selected value = ""> Type </option>
<option value="Plumber" > Plumber </option>
</select>
<button name="page" value="1" >1</button>
<button name="page" value="2" >2</button>
</form>
<div id="result"></div>
</body>
</html>
passdata.php
<?php
echo '<div>' .$_POST['state_chosen']." <br>". $_POST['type']."<br>". $_POST['page']. '</div>';
?>
I fully tested your code.
The error was just the extra semi-colon ; after the closing brace of the ajax success function.
I often label end braces so I can keep track. E.g. //END ajax block
Use this, it will work:
<script>
$(document).ready(function(){
$("form").change(function(){
$.ajax({
type:"POST",
url:"passdata.php",
data: $('form').serialize(),
success: function(data){
$('#result').html(data);
} //*****here was the error*****
}); //END ajax
}); //END form.change()
}); //END document.ready
</script>
Your jQuery should look something like:
<script>
$(document).ready(function(){
// Sorry, I put the form event in the (document) which is wrong.
$("form").change(function(form) {
$.ajax({
type:"POST",
url:"passdata.php",
data: $(this).serialize(),
success: function(data){
$('#result').html(data);
}
});
// This will stop the form being submitted
// form.preventDefault; Remove if you need submission
});
});
</script>
Also, as mentioned by #Robert Cathey, check your $_POST on your passdata.php page. You will get an Undefined index error.
Add a console.log to your success function so you can see what your PHP file is actually returning.
$(document).ready(function(){
$("form").change(function(){
$.ajax({
type:"POST",
url:"passdata.php",
data: $(this).serialize(),
success: function(data){
console.log(data)
//$('#result').html(data);
}
});
});
});
It's a problem with BUTTON. The form consider button as type=submit
So when you pressed to the button it's a submit event was issued. please try the following code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function onFormChange(){
$.ajax({
type:"POST",
url:"passdata.php",
data: $('form').serialize(),
success: function(data){
$('#result').html(data);
}
})
}
$(document).ready(function(){
$( "form > *" ).change(function(event){
event.preventDefault();
onFormChange()
})
$( "form" ).submit(function( event ) {
event.preventDefault();
onFormChange()
});
})
</script>
</head>
<body>
<form >
<select class="dd1" name="state_chosen">
<option selected value = ""> Location </option>
<option value="Alabama" > US: Alabama </option>
</select>
<select class="dd2" name="type">
<option selected value = ""> Type </option>
<option value="Plumber" > Plumber </option>
</select>
<button name="page" value="1" >1</button>
<button name="page" value="2" >2</button>
</form>
<div id="result"></div>
</body>
</html>
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 form with render partial in yii which make update and create
i write this jquery code to check success only :
$("#AmakenPlaces_place_main_category").change(function()
{
alert("hi");
}
it works good to me in create but in update nothing do
i think this error because i get select value from database
can any one help me .. iam tired to solve this problem
note: i use this code for main categories and sub categories for my site
my html in update
<div class="controls col-sm-6">
<select class="form-control" name="AmakenPlaces[place_main_category]" id="AmakenPlaces_place_main_category">
<option value="">Select main category</option>
<option value="1" selected="selected">cafe and resturants</option>
<option value="2">men and wommen</option>
<option value="3">hoho</option>
</select>
</div>
my code in javascript
<script type="text/javascript">
$(document).ready(function()
{
$("#AmakenPlaces_place_main_category").change(function()
{
var id=$(this).val();
$.ajax
({
type: "POST",
url: '<?php echo yii::app()->createAbsoluteUrl("site/subcategory");?>',
data: "id="+id,
dataType: 'json',
cache: false,
success:function(data,textStatus,jqXHR)
{
$("#AmakenPlaces_place_sub_category").html('');
$("#AmakenPlaces_place_sub_category").append('<option selected="selected">--Select Sub category--</option>');
$.each(data.town,function(i,v)
{
$("#AmakenPlaces_place_sub_category").append('<option value='+v.id+'>'+v.name+'</option>');
});
},
});
});
});
</script>
thanks all for attention
my solve to this problem when i delete
$(document).ready(function()
{
}