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="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquer…"></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>