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

【问题标题】：Get value of an radio button added after loading the page获取加载页面后添加的单选按钮的值
【发布时间】：2019-07-20 01:41:04
【问题描述】：

我处理的表单包含多个子表单，这些子表单在用户响应时加载。通常 - 根据用户的选择 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>

【问题讨论】：

能否提供单选按钮的事件监听代码？或者您可以在通过 php 加载页面时输出填写的表单。
在编辑中添加

标签： jquery ajax laravel

【解决方案1】：

在你的脚本中试试这个：

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

您可以稍微修改您的函数，以便在加载表单 2 时检查是否在表单 2 上选择了任何收音机，如果有触发另一个更改以获取表单 3

【讨论】：

我只是添加 $(".sejdate:checked").trigger("change");在我的功能中，没关系。

【解决方案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>

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

【讨论】：