AJAX opens a form (each radio inputs diplay one by one in popup) and js should add a save function to "close" button
I have form in nette framework where the form works wel. When I added AJAX it stopped to work propely and then I added functionality to "close" button that the answers will be saved after each other. The form is styled that each questions appears on popup seperatly. The js code problems:
Answers aren't saving values in the database after pushing "close" button.
The Ajax should close the form once it is submitter but right now it opens a form instead.
<!-- LATTE template in Nette -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#netPromoterScoreModel" id="open-button" class="btn btn-pink btn-lg btn-block" data-toggle="modal">Dotaznik</a>
{form netPromoterScore class => 'ajax-form'}
<!-- FORM START -->
<div id="netPromoterScoreModel" class="modal fade nps" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Dotaznik</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- QUESTION 1 -->
<div id="question0" class="modal-body">
<div class="row">
<div class="col-12 form-group">
{label recommendation}
</div>
<div id="radios" class="col-12 form-group">
{input recommendation}
</div>
<div class="col-12 modal-footer">
<a href="javascript:void(0)" class="btn btn-pink" onclick="goNext(0)">Next Question</a>
<button id="submit" type="submit" value="submit" class="btn btn-secondary">Close</button>
</div>
</div>
</div>
<!-- QUESTION 2 -->
<div id="question1" class="modal-body" hidden>
<div class="row">
<div class="col-12 form-group">
{label website}
</div>
<div id="radios" class="col-12 form-group">
{input website}
</div>
<div class="col-12 modal-footer">
<a href="javascript:void(1)" class="btn btn-pink" onclick="goNext(1)">Next Question</a>
<button id="submit" type="submit" value="submit" class="btn btn-secondary">Close</button>
</div>
</div>
</div>
<!-- QUESTION 3 -->
<div id="question3" class="modal-body" hidden>
<div class="row">
<div class="col-12 form-group">
{label feedback}
</div>
<div id="textInput" class="col-12 form-group">
{input feedback}
</div>
<div class="col-12 modal-footer">
<button type="submit" class="btn btn-pink">Submit</button>
</div>
</div>
</div>
</div> <!-- END of modal content-->
</div> <!-- end of Modal dialog-->
</div> <!--end of the form-->
{/form}
</div>
<script type="text/javascript">
// jQuery
//next question
function goNext(i) {
$('#question'+i).attr('hidden', true);
$('#question'+(i+1)).attr('hidden', false);
}
// for submit after each question
$(document).ready(function(){
$('#submit').click(function(){
('input[type="radio"]').click(function(){
// variables for inputs
var recommendation = $('#recommendation').val();
if(input[name="recommendation"]:checked) {
$('#return').html('<h4 style="color:red;">Required All Fields..</h4>');
}
else {
// ajax in nette
$.nette.ajax({
method: 'GET',
url: url
data:$('#insert_data').serialize(),
success:function(data){
$('form').trigger("reset");
$('#return').fadeIn().html(data);
setTimeout(function(){
$('#return').fadeOut("slow");
}, 6000);
}
});
}
}
});
});
</script>