如何将ajax用于附加到jquery的表单

时间:2019-05-07 06:40:50

标签: jquery ajax laravel-5

我想创建用于在页面上加载不同表单的按钮,我们想要在单击表单的特殊按钮后追加表单。但是,当我添加表单时,表单选择选项不会使用ajax加载。 一般来说,我想创建一些选项卡,这些选项卡不会从html文件的开头开始加载每个选项卡的表单,而是通过单击每个选项卡来追加thats表单。在每个选项卡中,都有一个多步骤表单,并且从数据库调用大多数用ajax加载的选择输入

<div id="tabs">
    <button type="button" id="submit" class="btn btn-primary btn-submit">append</button>
    <div id="tab">


    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="/assets/js/vendor/jquery-3.3.1.min.js"></script>

<script>
    $(document).ready(function() {
        $('#submit').click(function() {
            $('#tab').append('<form id="form" method="POST" action="{{ route('carget') }}">\n' +
                '    @csrf' +
                '    <select name="ctype" id="ctype" class="form-control" placeholder="choose">\n' +
                '        <option selected="true" disabled="true">choose</option>\n' +
                '        @foreach($ctypes as $ctype)' +
                '            <option id="{{$ctype->id}}" value="{{$ctype->name}}">{{$ctype->name}}</option>\n' +
                '        @endforeach' +
                '    </select>\n' +
                '    <select name="cmodelj" id="cmodelj" class="form-control shahr" placeholder="choose">\n' +
                '        <option value="" selected="true" disabled="true">choose</option>\n' +
                '    </select>\n' +
                '</form>');
        });

        $('#ctype').on('change', function() {
            var stateID = $(this).val();
            var _token = $('input[name="_token"]').val();
            // console.log(stateID)
            if(stateID) {
                $.ajax({
                    url: "{{ url('/carget') }}",
                    type: "POST",
                    data : {name:stateID , _token:_token },
                    dataType: "json",
                    success:function(cmodelj){
                        if(cmodelj){
                            $('#cmodelj').empty();
                            $('select[name="cmodelj"]').focus();
                            $('#cmodelj').append('<option value="">choose your car</option>');
                            $.each(cmodelj, function(key, name){
                                $('select[name="cmodelj"]').append('<option value="'+ name.name +'">' + name.name + '</option>');
                            });
                        }else{
                            $('#cmodelj').empty();
                        }
                    }
                });
            }else{
                $('#ctype').empty();
            }
        });
    });
</script>

0 个答案:

没有答案