单击按钮时,我正在使用AJAX来显示一个PHP模态,其中包含一个表单。这是一种编辑表单,因此字段中会填充从AJAX接收的数据,这些数据是通过处理程序调用PHP函数的。但是,我需要一种select
输入的方法来知道选择了哪个,但是要用于该数据的是JavaScript。通常我会使用诸如
$occasionTypes = getPublishedOccasionTypes($connection);
if($occasionTypes != NULL){
foreach ($occasionTypes as $occasionType) {
$selected = (isset($booking['reservation_type']) && ($booking['reservation_type'] == $occasionType['id'])) ? 'selected' : NULL;
$occasionSelect .= '<option value='.$occasionType['id'].' '.$selected.'>'.$occasionType['name'].'</option>';
}
}
但是在这种情况下,$booking['reservation_type]
是没有用的,因为我需要的实际值在输入(我创建的隐藏值)中,但是由JavaScript填充。有任何想法吗?这也是我的JavaScript
$.ajax({
type: 'POST',
url: "/modules/ajax/ajax_handler.php",
data: data
})
.done((result)=>{
result = JSON.parse(result);
console.log(result);
$('#firstName').val(result.customer_first_name);
$('#lastName').val(result.customer_last_name);
$('#email').val(result.customer_email);
$('#number').val(result.customer_mobile);
$('#date').val(result.reservation_date);
$('#time').val(result.reservation_time);
$('#size').val(result.party_size);
$('#occasion').val(result.occasion_type);
$('#comment').val(result.special_requirements);
$('#code').val(pcode);
$('#customerCode').val(result.customer_code);
$('#editModal').modal('show');
})
MODAL
$modalpopup =
'
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Booking</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form id="editBooking" class="form form-horizontal" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="number" id="number" placeholder="" required>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" name="date" id="date" placeholder="" required>
</div>
<div class="form-group">
<label>Time</label>
<select id="time" name="time" class="form-control" required>
<option value="">Please select ...</option>
'.$timeSelect.'
</select>
</div>
<div class="form-group">
<label>Party Size</label>
<input type="number" class="form-control" name="size" id="size" placeholder="" required>
</div>
<div class="form-group">
<label>Occasion</label>
<select id="occasion" name="occasion" class="form-control" required>
<option value="" selected>Please select</option>
'.$occasionSelect.'
</select>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="status" placeholder="">
<option value="accepted">Accepted</option>
<option value="not-accepted">Not Accepted</option>
</select>
</div>
<div class="form-group">
<label>Comment</label>
<textarea type="text" class="form-control" name="comment" id="comment" placeholder=""></textarea>
</div>
<input type="hidden" class="form-control" name="code" id="code" placeholder="">
<input type="hidden" class="form-control" name="customerCode" id="customerCode" placeholder="">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>';