我想创建用于在页面上加载不同表单的按钮,我们想要在单击表单的特殊按钮后追加表单。但是,当我添加表单时,表单选择选项不会使用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>