Question

我处理的表单包括几个子表单，这些子表单会在用户响应时加载。通常 -根据用户的选择1显示表格2 -根据表格2的选择，我显示表格3等...

通过ajax / jquery逐步加载表单。

另一方面，我会保留所有答案，以便能够在需要时重新显示预填写的表格。

例如，当用户刷新页面时，我遇到了一个问题。在这种情况下，它会发生：

不使用任何形式加载整个页面
然后通过ajax调用包含单选按钮的表单的第一部分。表单已经填写完毕，单选按钮之一已被选中
然后我无法恢复用jquery检查的单选按钮的值，以加载下一个表单。

我的表单（通过ajax加载div中的内容）

             <div id="enfant{{$i}}datesejour" class="datesej">

            </div>

            <div id="enfant{{$i}}semainesejour" class="">

            </div>

            <div id="enfant{{$i}}transportaller" class="">

            </div>

            <div id="enfant{{$i}}transportretour" class="">

            </div>

在第一个div中加载了单选按钮：

 <input id="datesejour_{{ $date->id }}_{{$i}}_{{$centre->id}}" name="enfant[{{$i}}][iddatesejour]" type="radio" value="{{ $date->id }}" class="sejdate"  @if   (Session::get('panier.0.enfant' .$i.'.idsejour') == $date->id) checked @endif>

我尝试使用委托事件，但需要...事件。就我而言，这是没有事件的，因为单选按钮是在页面加载后加载的，并且没有用户操作就被选中。

我会在页面加载时添加完整的代码

<form action="http://gocolo.test/customer/inscription-4" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="xfU1YecncfmNBg27wuIM50e8UM7w6jFZ0raWIPAF">        
        <div id="enfant[1]">
            <input type="hidden" id="enfant[1][idenfant]" name="enfant[1][idenfant]" class="form-control" value="512">
            <input type="hidden" id="enfant[1][num]" name="enfant[1][num]" class="form-control" value="1">


            <div class="form-group ">
                <label for="enfant[1][nomenfant]">Nom de l'enfant*</label>
                <input type="text" id="enfant[1][nomenfant]" name="enfant[1][nomenfant]" class="form-control" value="christophe contard">
                                    <p class="helper-block">

                </p>
            </div>



            <div class="form-group ">
                <label for="periodesejour">Durée du séjour</label>
                <select id="1_periodesejour" name="enfant[1][periodesejour]" class="form-control getdate">
                    <option value="" disabled="" selected="">Sélectionner</option>
                                                <option value="Février">Fevrier</option>
                                                <option value="Pâques">Pâques</option>
                                                <option value="Eté" selected="">Eté</option>
                                                <option value="Toussaint">Toussaint</option>
                                        </select>
                                </div>

            <div class="form-group ">
                <label for="dureesejour">Durée du séjour</label>
                <select id="1_dureesejour" name="enfant[1][dureesejour]" class="form-control getdate">
                    <option value="" disabled="" selected="">Sélectionner</option>
                                                <option value="1 semaine" selected="">1 semaine</option>
                                                <option value="2 semaines">2 semaines</option>
                                                <option value="3 semaines">3 semaines</option>
                                        </select>
                                </div>


            <div id="enfant1datesejour" class="datesej"><div class="form-group">
    <label> bourboule</label>
            <div>

            <input id="datesejour_3_1_1" name="enfant[1][iddatesejour]" type="radio" value="3" class="sejdate">
            <label for="datesejour_3">Du 01-05-2019 au 08-05-2019</label>
        </div>

    </div>

            <div class="form-group">
    <label> moulibez</label>
            <div>

       <input id="datesejour_4_1_2" name="enfant[1][iddatesejour]" type="radio" value="4" class="sejdate" checked="">
            <label for="datesejour_4">Du 06-07-2019 au 13-07-2019</label>
        </div>

    </div>



</div>
            <div id="enfant1semainesejour" class=""></div>

            <div id="enfant1transportaller" class="">

            </div>

            <div id="enfant1transportretour" class="">

            </div>


        </div>
            <div>
        <input class="btn btn-danger" type="submit" value="Enregistrer">
    </div>

</form>


    </div>


</main>


<script>

    $(document).ready(function () {

        $('.getdate').each(function(  ) {
            var id2 = $(this).attr('id');
            var id3 = id2.split('_', 2);
            var id = id3['0']; // on recupere l'id de l'enfant
            var periode = $('#' + id + '_periodesejour').val();
            var duree = $('#' + id + '_dureesejour').val();
            getDate(id, periode, duree)
        });
    });






    $('.getdate').change(function () {

        var id2 = $(this).attr('id');
        var id3 = id2.split('_', 2);
        var id = id3['0']; // on recupere l'id de l'enfant
        var periode = $('#' + id + '_periodesejour').val();
        var duree = $('#' + id + '_dureesejour').val();
        getDate(id, periode, duree)
    });


    $(".datesej").on('change', '.sejdate', function () {
        // on recupere l'id du séjour
        var id2 = $(this).attr('id');
        var id3 = id2.split('_', 4);
        var idsejour = id3['1']; // on recupere l'id du sejour
        var id = id3['2']; // on recupere l'id de l'enfant

        var centreid = id3['3']; // on recupere l'id du centre
        getThemeTransport(idsejour, id, centreid)
    });

    function getThemeTransport(idsejour, id, centreid) {
        $.ajax({
            headers: {'x-csrf-token': _token},
            type: "POST",
            url: "/customer/getsemainetransport",
            data: {idsejour: idsejour, centreid: centreid, enfant: id}
        }).done(function (data) {
            ///  console.log(data);
            $('#enfant' + id + 'semainesejour').html(data);

        });

    }


    function getDate(id, periode, duree) {
        $.ajax({
            headers: {'x-csrf-token': _token},
            type: "POST",
            url: "/customer/getdatesejours",
            data: {periode: periode, duree: duree, enfant: id}
        }).done(function (data) {
            ////  console.log('#enfant' + id + 'datesejour');
            $('#enfant' + id + 'datesejour').html(data);
            $('#enfant' + id + 'semainesejour').empty();
        });
    }


</script>

Answer 1

在脚本中尝试以下操作：

window.onload = function(){
   if($(".sejdate:checked").val() != undefined){
     $(".sejdate:checked").trigger("change");
   }
};

您可以稍微修改功能，以便在加载表格2时检查是否在表格2上选择了任何无线电，如果触发了另一个更改以获取表格3

Answer 2

您可以使用localStorage或sessionStorage

这样做

// first you have to use inline onclick events handler for all radio buttons
       <input id="datesejour_4_1_2" onclick="storeThis(this)" name="enfant[1][iddatesejour]" type="radio" value="4" class="sejdate" checked="">
// define the function storeThis in javascript section
<script>
function storeThis(e){

    if ($(e).is(':checked'))
    {
      sessionStorage.setItem($(e).attr('id'),1);
    } else {
      sessionStorage.setItem($(e).attr('id'),0);
    }

}

// create a function to check for radio buttons in sessionStorage based on their ids
function checkRadioButtons(){
    $('[type="radio"]').each(function(){
       if(sessionStorage.get($(this).attr('id')){
          $(this).prop("checked",true);
       } else {
          $(this).prop("checked",false);
       }
     }
}

// call checkRadioButtons after appending the new radio buttons
function getThemeTransport(idsejour, id, centreid) {
        $.ajax({
            headers: {'x-csrf-token': _token},
            type: "POST",
            url: "/customer/getsemainetransport",
            data: {idsejour: idsejour, centreid: centreid, enfant: id}
        }).done(function (data) {
            ///  console.log(data);
            $('#enfant' + id + 'semainesejour').html(data);
            checkRadioButtons();
        });

    }


    function getDate(id, periode, duree) {
        $.ajax({
            headers: {'x-csrf-token': _token},
            type: "POST",
            url: "/customer/getdatesejours",
            data: {periode: periode, duree: duree, enfant: id}
        }).done(function (data) {
            ////  console.log('#enfant' + id + 'datesejour');
            $('#enfant' + id + 'datesejour').html(data);
            $('#enfant' + id + 'semainesejour').empty();
            checkRadioButtons();
        });
    }

</script>

我希望我的回答有帮助^^

获取加载页面后添加的单选按钮的值

2 个答案: