Bootstrap 5 AJAX 模态中的 JQuery 函数未获取新值

JQuery Function in Bootstrap 5 AJAX Modal NOT Getting NEW Values

提问人:Ian Gunter 提问时间:7/20/2023 更新时间:7/20/2023 访问量:37

问:

我在 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的字段,但没有任何内容显示新值。

jQuery 验证 引导程序-5

评论

1赞 freedomn-m 7/20/2023
检查您没有重复的 ID。代码 like 将仅返回 DOM 中的第一个匹配元素。例如,如果你有一个显示表单,其中包含一个具有该 ID 的元素,然后在模态中有一个,你的代码将拾取显示表单的输入,而不是模态的输入。您可以通过在 .如果任何一个不是 1,那将是你的问题。您可以通过更改 通过以您的模态 ID 或类为前缀来解决这个问题,例如$("#"+fieldID)console.log($("[id='" + fieldID + "']").length)$.each$("#"+fieldID)$("#genericModal").find("#" + fieldID)
0赞 freedomn-m 7/20/2023
上述情况(具有相同 ID 的多个输入)也可能是由于您似乎有多个模态,每个模态加载内容。

答: 暂无答案