提问人:Ian Gunter 提问时间:7/20/2023 更新时间:7/20/2023 访问量:37
Bootstrap 5 AJAX 模态中的 JQuery 函数未获取新值
JQuery Function in Bootstrap 5 AJAX Modal NOT Getting NEW Values
问:
我在 Bootstrap 5 模态中有一个小表单,它使用字段中的数据动态加载。用户可以更改值并提交表单,该表单运行良好,但是当尝试在提交时进行一些验证时,它不会显示新的字段值,而只显示原始值。
打开模态
function viewModal(url,size='lg',fields='') {
event.preventDefault();
$.ajax({
url: url,
type: 'get',
success: function(response){
$('.modal-content').html(response);
$('#genericModal' + size.toUpperCase()).modal('show');
}
});
}
查看模态
<!-- Modal Header -->
<div class="modal-header bg-success text-white">
<h4 class="modal-title">@if(isset($address)){{'Edit'}}@else{{'Add'}}@endif an Address</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<form id="formAddress" action="/v3/modals/address" class="needs-validation" method="post">
@csrf
@if(isset($address))@method('PATCH')@endif
@if(isset($address))<input type="hidden" id="id" name="id" value="{{$address->id}}">@endif
<input type="hidden" id="urlID" name="urlID" value="{{$applicant->urlID}}">
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-lg-6 mb-3">
<label for="streetLine1" class="form-label"><strong>Street Line 1 *</strong></label>
<input type="text" class="form-control" onchange="quickCheckField('streetLine1')" id="streetLine1" name="streetLine1" placeholder="First line of address" value="@if(isset($address)){{$address->streetLine1}}@endif" required>
</div>
<div class="col-lg-6 mb-3">
<label for="streetLine2" class="form-label"><strong>Street Line 2</strong></label>
<input type="text" class="form-control" onchange="quickCheckField('streetLine2')" id="streetLine2" name="streetLine2" placeholder="Second line of address" value="@if(isset($address)){{$address->streetLine2}}@endif">
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-3">
<label for="town" class="form-label"><strong>Town or City</strong></label>
<input type="text" class="form-control" onchange="quickCheckField('town')" id="town" name="town" placeholder="Name of Town or City" value="@if(isset($address)){{$address->town}}@endif" required>
</div>
<div class="col-lg-6 mb-3">
<label for="postcode" class="form-label"><strong>Post Code</strong></label>
<input type="text" class="form-control" onchange="quickCheckField('postcode')" id="postcode" name="postcode" placeholder="Post Code or Zip" value="@if(isset($address)){{$address->postcode}}@endif" required>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-3">
<label for="countryID" class="form-label"><strong>Country</strong></label>
<select class="form-control" onchange="quickCheckField('countryID')" id="countryID" name="countryID" required>
<option value="">Please select...</option>
<option value="1">United Kingdom</option>
<option value="105">Ireland</option>
<option disabled>----------</option>
@foreach ($countries as $field)<option value="{{ $field->id }}"@if(isset($address))@if($field->id==$address->countryID){{'selected'}}@endif @endif>{{$field->countryName}}</option>@endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-3">
<label for="dateFromM" class="form-label"><strong>Date Lived at Address From *</strong></label>
<div class="input-group">
<select class="reqField form-control" onchange="quickCheckField('dateFromM')" id="dateFromM" name="dateFromM" required>
<option value="">Month</option>
@for($i=1;$i<=12;$i++)<option value="{{str_pad($i,2,'0',STR_PAD_LEFT)}}"@if(isset($address))@if(str_pad($i,2,'0',STR_PAD_LEFT)==substr($address->dateFrom,5,2)){{'selected'}}@endif @endif>{{date_format(date_create("01-".$i."-2000"), "M")}} ({{str_pad($i,2,'0',STR_PAD_LEFT)}})</option>@endfor
</select>
<select class="reqField form-control" onchange="quickCheckField('dateFromY')" id="dateFromY" name="dateFromY" required>
<option value="">Year</option>
@for($i=(date('Y'));$i>=(date('Y')-110);$i--)<option value="{{$i}}"@if(isset($address))@if($i==substr($address->dateFrom,0,4)){{'selected'}}@endif @endif>{{$i}}</option>@endfor
</select>
</div>
</div>
<div class="col-lg-6 mb-3">
<label for="dateTillM" class="form-label"><strong>Date Lived at Address Until *</strong></label>
<div class="input-group">
<select class="reqField form-control" onchange="quickCheckField('dateTillM')" id="dateTillM" name="dateTillM" required>
<option value="">Month</option>
@for($i=1;$i<=12;$i++)<option value="{{str_pad($i,2,'0',STR_PAD_LEFT)}}"@if(isset($address))@if(str_pad($i,2,'0',STR_PAD_LEFT)==substr($address->dateTill,5,2)){{'selected'}}@endif @endif>{{date_format(date_create("01-".$i."-2000"), "M")}} ({{str_pad($i,2,'0',STR_PAD_LEFT)}})</option>@endfor
</select>
<select class="reqField form-control" onchange="quickCheckField('dateTillY')" id="dateTillY" name="dateTillY" required>
<option value="">Year</option>
@for($i=(date('Y'));$i>=(date('Y')-110);$i--)<option value="{{$i}}"@if(isset($address))@if($i==substr($address->dateTill,0,4)){{'selected'}}@endif @endif>{{$i}}</option>@endfor
</select>
</div>
</div>
</div>
<div id="formErrorMessage" class="text-danger text-center"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
@if(isset($address))<button class="btn btn-outline-danger" id="btnDeleteName" onclick="confirmDelete()">Delete Address</button>@endif
<button type="submit" class="btn btn-success" id="btnSaveAddress">Save Address</button>
</div>
</form>
验证 Javascript
<script>
$("#btnSaveAddress").on("click", function(e) {
e.preventDefault();
$("#formErrorMessage").text("");
$reqFields = [ "streetLine1", "town", "postcode", "countryID", "dateFromM", "dateFromY", "dateTillM", "dateTillY" ];
$passedValidation = true;
$.each($reqFields, function( i, fieldID ) {
if ($("#" + fieldID).val() == "") {
$passedValidation = false;
$("#" + fieldID).removeClass("is-valid");
$("#" + fieldID).addClass("is-invalid");
} else {
$("#" + fieldID).removeClass("is-invalid");
$("#" + fieldID).addClass("is-valid");
}
});
if ($("#dateFromY").val() + $("#dateFromM").val() >= $("#dateTillY").val() + $("#dateTillM").val()) {
$passedValidation = false;
$("#dateTillM").removeClass("is-valid");
$("#dateTillM").addClass("is-invalid");
$("#dateTillY").removeClass("is-valid");
$("#dateTillY").addClass("is-invalid");
$("#formErrorMessage").text("The Date Till must be after the Date From");
}
if ($passedValidation == true) {
$("#formAddress").trigger("submit");
}
});
</script>
我已经在谷歌和堆栈上寻找答案,但我似乎找不到答案。我尝试在调用中显式引用包含formID的字段,但没有任何内容显示新值。
答: 暂无答案
评论
$("#"+fieldID)
console.log($("[id='" + fieldID + "']").length)
$.each
$("#"+fieldID)
$("#genericModal").find("#" + fieldID)