AJAX opens form (each radio diplays one by one in popup) & close btn saves data

[FlegBar]

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 istead.

<!-- 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>

[gits]

to be honest digging through such code which obviously is somehow a template in whatever 'framework' is somehow a pain - since probably only few people know about that framework. what i can see for example is that something like:

if(input[name="recommendation"]:checked) {

will trigger a syntax error - unless that 'framework' will have a transpile step before the page is delivered to the client and fixes that syntax during such a step.

your best bet is to just open the developer tools of the browser you are using and checking whats going on - which means javascript errors, what values are transferred with the requests and so on. then you can eliminate all the obvious errors first and then you might have a question that you can ask more specific and probably with a more specific part of some code.

PS: another problem is probably here:

$('#submit').click(function(){ 
        ('input[type="radio"]').click(function(){
 

which basically would assign a click handler to a node, which in this case i think is not correctly retrieved, when the click handler of the submit element would be executed (aka be clicked).