javascript - 检查选择了哪个选项
问题描述
单击按钮时,我使用 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');
})
模态
$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>';
解决方案
推荐阅读
- vue.js - 在移动设备上将 vuetify 导航栏切换为 mini
- ruby-on-rails - 输出错误:#
- python - 使用 GeoPandas 在 Python 中读取 GRASS 矢量数据源
- amazon-web-services - 我可以将aws保留实例与弹性beantalk一起使用吗
- rust - 从一个向量多次使用迭代器作为函数的参数
- asp.net-core - 访问 Actor 服务时未找到 FabricCommon.dll
- google-cloud-bigtable - 将 bigtable 表导出到谷歌云存储时遇到 OutOfMemoryException
- windows - Qt5快速qml测试和opengl渲染的问题
- arrays - 如何循环遍历对象数组,遍历每个对象并将每个对象推入单独的数组中,以便 ngFor 以角度循环
- c# - 如何检查 ReSharper.ReSharper_SilentCleanupCode 是否已完成?