I want to create buttons for loading different forms on a page and we want to append the form after clicking on its special button.But when I add the form, the form select options are not loaded using ajax. Generally speaking, I want to create some tabs that do not load the forms of each tab from the beginning in the html file, and by click on the each tab append thats form. In each tab, there is a multi-step form and the select input most be load with ajax is called from the database
<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="">\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="" value=""></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: "",
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>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire