javascript - 该表单使用 AJAX 打开，并具有显示在单独页面上的单选输入

Question

// 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); 
			} 
			}); 
			} 
		}
	}); 
}); 

// sass

#open-button{
  font-size: 20px;
  font-weight: bold;
  position: sticky;
  margin-top: -3rem;
}

.nps {

  h5, .h5 {
    font-size: 1rem;
  }
  
  .modal-body {
    padding: 1rem 1rem 0 1rem;
  }
  
  #radios {
    display: flex;
    align-items: flex-start;
  }

  #radios label { 
    margin: auto;
    padding-right: inherit;
  }

  #radios input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: 0.2s all linear;
    outline: none;
    position: relative;
    top: 4px;
    text-align: center;
  
  }

  input:checked, input:hover {
    border: 4px solid #e64980;
  }


  &:focus { 
    outline: 0;
  }
  
}
    #frm-netPromoterScore-feedback{
      vertical-align:top;
      width: 100%;
      height: 100px !important;
    }
}

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

我正在使用表单运行良好的 nette 框架，但在 js 函数方面，由于我缺乏经验，我遇到了问题，我想请你帮忙解决它们。每个问题（无线电输入的值）将自动保存到具有多种功能的数据库中。表格可以随时关闭（但值应存储在数据库中） 表格应在创建帐户后 14 天后显示，然后每周显示。表单按钮关闭应用作向数据库提交按钮，同时关闭表单。

1. 必须回答第一个问题。
2. 填写表单时自动保存值。
3. 即使表格关闭，答案也会被保存。
4. Ajax 表单将在表单关闭或完成时关闭。现在，当表单关闭或完成时，它会再次打开。