'How to pass multiple parameters with Ajax
<select name="docname" class="form-control" id="docname" required>
<option Value="">Please Choose Doctor</option>
<?php
foreach($data as $crow){
echo "<option value='$crow->name'>$crow->name</option>";
}
?>
</select>
<input type="date" name="bdate" class="form-control txtDate" id="txtHint" required>
<div class="form-group" id="txtHint1"></div>
<script>
$(document).ready(function(){
$('#docname').on('change',function(){
var doc_id=this.value;
$.ajax({
url:"subcat.php",
type:"POST",
data:{
doc_id:doc_id
},
cache:false,
success:function(result){
$("#txtHint").html(result);
$('#txtHint1').html('<optionvalue="">SelectDateFirst</option>');
}
});
});
$('#txtHint').on('change',function(){
var date_id=this.value;
$.ajax({
url:"catsubcat.php",
type:"POST",
data:{
date_id:date_id
},
cache:false,
success:function(result){
$("#txtHint1").html(result);
}
});
});
});
</script>
Here you can see Ajax and Other Code. How I Fetch First Ajax value with 3rd Id. For e.g First I select Doctor Name then I select an appointment date and Last I want to fetch the Time slot of That doctor for this date.
Can anyone suggest to me how could I do that??
Solution 1:[1]
Pass data like this :
data:{ 'doc_id': doc_id, 'blob_data_username': blob_username, 'blob_data_password': blob_password },
Solution 2:[2]
To get doctor name or selected option use $('#docname').val()
<select name="docname" class="form-control" id="docname" required>
<option Value="">Please Choose Doctor</option>
<option value="test">test</option>
<?php
foreach($data as $crow){
echo "<option value='$crow->name'>$crow->name</option>";
}
?>
</select>
<input type="date" name="bdate" class="form-control txtDate" id="txtHint" required>
<div class="form-group" id="txtHint1"></div>
<script>
$(document).ready(function() {
$('#docname').on('change', function() {
var doc_id = this.value;
$.ajax({
url: "subcat.php",
type: "POST",
data: {
doc_id: doc_id
},
cache: false,
success: function(result) {
// $("#txtHint").html(result); // remove this or your input date overwritten
$('#txtHint1').html('<div>Select Date First</div>'); // instead of "<option>" ?
}
});
});
$('#txtHint').on('change', function() {
var date_id = this.value;
$.ajax({
url: "catsubcat.php",
type: "POST",
data: {
doc_id: $('#docname').val(), // here to get doctor name
date_id: date_id
},
cache: false,
success: function(result) {
$("#txtHint1").html(result); // write <option> here?
}
});
});
});
</script>
Solution 3:[3]
As I do not use jQuery I cannot offer advice/help on that but with some fairly simple vanilla Javascript you can quite easily use AJAX to fetch data and use the response to help construct the next element in your form ( which is how I interpret your needs "First I select Doctor Name then I select an appointment date and Last I want to fetch the Time slot of That doctor for this date." )
The following code sends All ajax requests to the same page ( this could be a totally separate script if needed ) with the value from whichever form element the user used to make the current selection.
The event handler inspects the element that invokes it to see if there is a following HTML element, defined with a dataset attribute data-next. Using that dataset attribute in the ajax callback you can populate the following element with the data returned from the db lookup ( ajax request response )
The ajax request sends two pieces of information in each request - the name/value of the selected element and the dataset value of the next element. With these you can easily setup logic in PHP that runs the appropriate SQL query and returns the correct response. In the code here this is emulated with simple data responses ( date / time ) - the response could be considerably more complex (json for instance) but then the ajax callback would need to be modified accordingly.
Hope it makes sense. Copy to a new PHP file and run it perhaps
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/*
emulate database lookups by returning a simple
value appropriate to the ajax call made.
*/
if( isset( $_POST['docname'] ) ){
/*
$data=$conn->prepare('select `sdate` from `slot` where `name`=?');
$data->execute( array(
$_POST['docname']
));
$row=$data->fetchall( PDO::FETCH_OBJ );
exit( json_encode( $row ) );
*/
exit( date('Y-m-d') );
}
if( isset( $_POST['bdate'], $_POST['docname'] ) ){
/*
$data=$conn->prepare('select * from `timeslot` where `sdate`=? and `docname`=?');
$data->execute( array(
$_POST['bdate'],
$_POST['docname']
));
$row=$data->fetchall( PDO::FETCH_OBJ );
exit( json_encode( $row ) );
*/
exit( date('H:i:s') );
}
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.hidden{visibility:hidden}
</style>
</head>
<body>
<form method='post'>
<select name='docname' data-next='bdate' class='form-control' required>
<option selected hidden disabled>Please Choose Doctor</option>
<option value=1>Dr. Bob
<option value=2>Dr. Nick
<option value=3>Dr. Who
</select>
<input type='date' name='bdate' data-next='timeslot' class='form-control txtDate hidden' required />
<input type='time' name='timeslot' data-next='sub' class='form-control hidden' min='08:00' max='18:00' required />
<input type='submit' name='sub' class='hidden' />
</form>
<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
// this is the ajax payload. It will be updated by each invocation of the event handler.
let fd=new FormData();
qa('select,input').forEach( obj => obj.addEventListener('change',function(e){
let next = this.hasAttribute('data-next') ? this.dataset.next : false;
// add the element name / value
fd.append( this.name, this.value );
// change the next item
fd.set( 'next', next );
fetch( location.href, { method:'post', body:fd } )
// if the response is JSON this needs to be changed to r=r.json()
.then( r=>r.text() )
.then( value=>{
if( value && next ){
let input=q('[name="'+next+'"]');
input.classList.remove('hidden')
/*
The following processes a single result only.
If the real response is JSON and has multiple values as I suspect then
this should be changed to iterate through entire response.
*/
switch( input.type ){
case 'date':input.valueAsDate=new Date( value );break;
case 'time':input.value=value;break;
default:break;
}
}
})
}));
</script>
</body>
</html>
Solution 4:[4]
You have two options.
- Add all element by id of you form
data: $("#frmRegistroDatos").serialize(), - Add one by one {key:value}
data: {name:name, id:id, phone:phone},
I hope this help you.
Solution 5:[5]
you can pass multiple parameters by using these ways
1.
param = {
doc_name: $(selector).val(),
doc_id: $(selector).val()
};
$.ajax({
url: '',
data: param,
type: '',
success: function(response){
}
});
2.
$.ajax({
url: '',
data: {
doc_name: $(selector).val(),
doc_id: $(selector).val()
},
type: '',
success: function(response){
}
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ZakariaOFC |
| Solution 2 | uingtea |
| Solution 3 | Professor Abronsius |
| Solution 4 | andres castellanos |
| Solution 5 | Muhammad ali |