Below is the ajax code to perform the subjected action but it is implemented in a manner of elaboration instead of do it with simple one.
Here implemented separate code for each ajax request and response.
please see the below code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery- 1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#country").change(function(){
var country=$("#country").val();
$.ajax({
type:"post",
url:"getstate.php",
data:'typeId='+country,
success:function(data){
$("#state").html(data);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#state").change(function(){
var state=$("#state").val();
$.ajax({
type:"post",
url:"getdistrict.php",
data:'typeId='+state,
success:function(data){
$("#district").html(data);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#district").change(function(){
var district=$("#district").val();
$.ajax({
type:"post",
url:"getward.php",
data:'typeId='+district,
success:function(data){
$("#ward").html(data);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#ward").change(function(){
var ward=$("#ward").val();
$.ajax({
type:"post",
url:"getslum.php",
data:'typeId='+ward,
success:function(data){
$("#slum").html(data);
}
});
});
});
</script>
</head>
<body>
Country :
<select name="country" id="country">
<option>-select your country-</option>
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include "dbconfig.php";
$result=sqlsrv_query($conn,"SELECT [CountryId],[Country] from toilet_Country order by Country");
while($country=sqlsrv_fetch_array($result)){
echo "<option value = $country[CountryId]>$country[Country]</option>";
} ?>
</select> <br><br>
State :
<select name="state" id="state">
<option>-select your state-</option>
</select> <br><br>
District :
<select name="district" id="district">
<option>-select your District-</option>
</select> <br><br>
Ward :
<select name="ward" id="ward">
<option>-select your ward-</option>
</select> <br><br>
Slum :
<select name="slum" id="slum">
<option>-select your slum name-</option>
</select> <br><br>
</body>
</html>
And i have written code in separate files to retrieve country,state,district information from database.
I am unaware of these ajax call request and response an looking for advise how can i make this code portable.
Thanks in advance.
Related
I do not use submit button
I want the selected value from the user sent to the test1.php page, but when the user selects an option nothing happen in the page, and the value is not sent to the test1.php page
Is there any mistake in my code, or did I miss something ?
test2.php
<?php include_once 'database.php';
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('.category').change(function() {
var category = $('.category option:selected').val();
alert('category changed to ' + category);
$.ajax({
method: "POST",
url: "test1.php",
data: {
category1: $(this).val()
},
success: function(data) {
console.log(data);
}
});
});
});
</script>
</head>
<p> Filter By Category</p>
<select id="category" class="category">
<?php
$query = mysqli_query($conn,"select * from category ");
while($category = mysqli_fetch_array($query)) {
echo "<option value='" . $category['cat_name'] . "'>" . $category['cat_name'] . "</option> ";
}
?>
</select>
test1.php
<?php
include_once 'database.php';
if (isset($_POST['category1'])) {
$category = $_POST['category1'];
echo $category;
}
?>
is that all your file ? did you forget to include jquery ?
I just did the same script as yours but in html, and console said $ not found, after add jquery that's working
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('.category').change(function() {
$.ajax({
method: "POST",
url: "https://webhook.site/2d574d22-5570-46f2-b5bd-343d715adff4",
data: {
category1: $(this).val()
},
success: function(data){
console.log(data);
}
});
});
});
</script>
</head>
<body>
<p> Filter By Category</p>
<select id="category" class="category">
<option value='1'>One</option>
<option value='2'>two</option>
</select>
</body>
</html>
here is the webhook to check your request, it is like test1.php but just for debugging purpose https://webhook.site/#!/2d574d22-5570-46f2-b5bd-343d715adff4/e3406220-f58e-45be-a4ef-13d8d3e0b0d3/1
here are some advices:
inspect your page using developer tools, maybe there are some errors
check with console.log .val()
hope this help
I can't seem to get the selected option value from the select.php into the value_selected.php file.The console.log(data) displayed nothing. Why is that?
select.php
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="js/jquery-3.2.0.min.js"></script>
<form method="POST" action="">
<label for "sel_opt">Select value: </label>
<select name="sel_opt" id="sel_opt">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input name="submit" type="submit" id="submit" value="Submit">
</form>
<div id="result"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
url:"http://localhost/value_selected.php",
type:"POST",
success:function(data)
{
console.log(data);
$('#result').html(data);
}
});
});
});
</script>
</body>
</html>
value_selected.php
<?php
$output = "";
if(isset($_POST["submit"])) {
if(isset($_POST["sel_opt"])) {
$val = $_POST["sel_opt"];
if ($val == 1) {
$output = "<p>Value 1 selected</p>";
} else {
$output = "<p>Value 2 selected</p>";
}
echo $output;
}
?>
Add data: to your ajax config object with form values.
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
url:"http://localhost/value_selected.php",
type:"POST",
data: $('form').serialize(),
success:function(data)
{
console.log(data);
$('#result').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 drop down form, which has a list of four choices the user can select from. After selecting the choice
and clicking the "Advertise in Public Chat" button the option value (1, 2, 3, 4) needs to be passed to advertise.php?advertise=1 (2, 3, or 4)
without the page refreshing. After clicking Advertise in Public Chat I would like a message that says "Message sent to Chat!" and the user can click OK.
My issue:
Code will not execute on Firefox or Internet Explorer (I have tried on Debian Linux & Windows PCs-- all share the same result). Works perfectly on Chrome\Opera.
<!DOCTYPE html>
<html>
<body>
<form id="myform" action="" method="post">
<select name="Type">
<option value="1">(1 on 1)</option>
<option value="2">(2 on 2)</option>
<option value="3">(3 on 3)</option>
<option value="4">(4 on 4)</option>
</select>
<input type="submit" value="Advertise in Public Chat">
</form>
<div id="message"><h2>This will change when the request is sent</h2></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(event) {
$('form').on('submit', function(){
event.preventDefault();
var myVal = $('select[name="Type"]').val();
$.ajax({
type: "GET",
url: "advertise.php",
data: {
advertise: myVal
}
}).done(function( response ) {
// response is equal to what advertise.php will echo/print
$('#message h2').html("Message sent to Chat!");
});
});
});
</script>
</body>
</html>
If you -submit- a form, the page will be refreshed. You have to stop or prevent default action for the submit event of your form. Here is a example using jquery:
$('#myForm').on('submit', function(e){
e.preventDefault();
// your ajax function
});
Instead of using
<input type="submit" value="Advertise in Public Chat">
You can use
<input type="button" id="submit-btn" value="Advertise in Public Chat">
and for the ajax you can do like this:
$("#submit-btn").click(function(){
$.ajax({
type: "POST",
url: "advertise.php",
data: dataString,
success: function() {
$('#message').html("<h2>Message sent to Chat!</h2>")
}
});
});
});
Like that you will be able to access $_GET['advertise'] in advertise.php
UPDATE
I forgot to put the curly braces in the data declaration in the first time, now it will work
<script type="text/javascript">
$('#myForm').on('submit', function(e){
e.preventDefault();
var myVal = $('select[name="Type"]').val();
$.ajax({
type: "GET",
url: "advertise.php",
data: {
advertise: myVal
},
success: function() {
$('#message').html("<h2>Message sent to Chat!</h2>");
}
});
});
</script>
UPDATE 2
I just tested this in local and it works assuming that advertise.php is at the same level as this file.
<!DOCTYPE html>
<html>
<body>
<form id="myform" action="" method="post">
<select name="Type">
<option value="1">(1 on 1)</option>
<option value="2">(2 on 2)</option>
<option value="3">(3 on 3)</option>
<option value="4">(4 on 4)</option>
</select>
<input type="submit" value="Advertise in Public Chat">
</form>
<div id="message"><h2>This will change when the request is sent</h2></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').on('submit', function(event){
event.preventDefault();
var myVal = $('select[name="Type"]').val();
$.ajax({
type: "GET",
url: "advertise.php",
data: {
advertise: myVal
}
}).done(function( response ) {
// response is equal to what advertise.php will echo/print
$('#message h2').html("Message sent to Chat!");
});
});
});
</script>
</body>
</html>
i want to implement a dynamic drop down which will select , batch of students from first drop down and then the corresponding subjects as the options for second drop down ..
this is the code for my Page :
<head>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
};
</script>
</head>
<?php
$dept =$_COOKIE[dept];
include_once("../Include/connectdb.php");
include_once("../Include/data_menu.php");
include_once '../Include/pagemaker.php';
?>
<script type="text/javascript">
$(document).ready(function()
{
$(".batch").change(function()
{
var id=$(this).val();
var dataString = 'year_join='+ id;
$.ajax
({
type: "POST",
url: "ajax_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subject").html(html);
}
});
});
});
</script>
</head>
<body>
<br><br><br><br><br>
<fieldset class="cbox"><legend>Batch</legend>
<form name="frm" action=<?php print "edit_attendencePHP_NEW.php"; ?> method="GET"
id="content">
<br><br>
<div style="margin:80px">
<label>Batch :</label> <select name="batch">
<option selected="selected">--Select Batch--</option>
<?php
$result = mysql_query("select distinct year_joining from student_profile
order by year_joining ")or die(mysql_error());
while($year = mysql_fetch_assoc($result)){
if($year[year_joining]!="" && $year[year_joining]>"2008"){
print "<OPTION value='$year[year_joining]'>$dept $year[year_joining]</OPTION>";
} }
?>
</select>
<label>Subject :</label> <select name="subject" class="subject">
<option selected="selected">--Choose Subject--</option>
</select>
Date :<input type="text" size="12" id="inputField" name="date"/>
<input class="bluebutton" type="submit" value="Go">
</form><br>
<label class="comment">select a batch frm the list and press "Go"</label>
</fieldset>
the second ajax page works fine ... as i tested that with ($_GET)
this is wat with $_GET[year_join] ( view source code ) shows ...
ajax_subject.php
<option value="ENGG.MATHS-I">ENGG.MATHS-I</option><option value="COMPUTER PROGRAMMING
LAB">COMPUTER PROGRAMMING LAB</option><option value="WORKSHOPS">WORKSHOPS</option>
<option value="ENGG.PHYSICS">ENGG.PHYSICS</option><option
value="ENGG.CHEMISTRY">ENGG.CHEMISTRY</option><option ...........
Everything else seems fine ..
Right now it looks like no change event, which leads to the AJAX request, is being fired because your batch select element does not have a class of batch, only a name of batch. That is what you intended with $(".batch").change(function(){} right? Once you change, I would put an alert or console log in your callback function just to make sure it is even firing.