<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>
在這里您可以看到 Ajax 和其他代碼。我如何使用第三個 ID 獲取第一個 Ajax 值。例如，首先我選擇醫生姓名，然后選擇預約日期，最后我想獲取該醫生在該日期的時間段。
任何人都可以向我建議我該怎么做？
uj5u.com熱心網友回復：
像這樣傳遞資料：
資料：{'doc_id'：doc_id，'blob_data_username'：blob_username，'blob_data_password'：blob_password}，
uj5u.com熱心網友回復：
要獲取醫生姓名或選擇的選項，請使用$('#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>
uj5u.com熱心網友回復：
因為我不使用 jQuery，所以我無法提供建議/幫助，但是使用一些相當簡單的 vanilla Javascript，您可以很容易地使用 AJAX 來獲取資料并使用回應來幫助構建表單中的下一個元素（這就是我解釋您的方式需要"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."）
以下代碼將所有 ajax 請求發送到同一頁面（如果需要，這可以是一個完全獨立的腳本），其值來自用戶用于進行當前選擇的任何表單元素。
事件處理程式檢查呼叫它的元素，以查看是否有使用 dataset 屬性定義的以下 HTML 元素data-next。在 ajax 回呼中使用該資料集屬性，您可以使用從 db 查找（ajax 請求回應）回傳的資料填充以下元素
ajax 請求在每個請求中發送兩條資訊——選定元素的名稱/值和下一個元素的資料集值。有了這些，您可以輕松地在 PHP 中設定運行適當 SQL 查詢并回傳正確回應的邏輯。在這里的代碼中，這是用簡單的資料回應（日期/時間）模擬的——回應可能要復雜得多（例如 json），但是需要相應地修改 ajax 回呼。
希望這是有道理的。復制到一個新的 PHP 檔案并運行它
<?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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461532.html
標籤：javascript php html jQuery 阿贾克斯