Форма открывается с помощью AJAX и имеет радиовходы, которые отображаются каждый на отдельной странице - PullRequest
Новая
       31

Форма открывается с помощью AJAX и имеет радиовходы, которые отображаются каждый на отдельной странице

0 голосов
/ 03 мая 2019 

// 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 Framework, где форма работает хорошо, но на стороне функции JS я сталкиваюсь с проблемой, вызванной моим недостатком опыта, который я хотел бы попросить у вас помощи, чтобы решить их. Каждый вопрос (значение радиовхода) будет автоматически сохранен в базе данных с несколькими функциями. Форма может быть закрыта в любое время (но значения должны быть сохранены в любом случае в базе данных) Форма должна отображаться через 14 дней после создания учетной записи, а затем каждую неделю. Кнопка закрытия формы должна функционировать как кнопка отправки в базу данных и одновременно закрывать форму.

  1. Ответ на первый вопрос обязателен.
  2. Автоматическое сохранение значений при заполнении формы.
  3. Даже когда форма закрыта, ответы сохраняются.
  4. Форма Ajax закроется, когда форма закрыта или завершена. Теперь он снова открывается, когда форма закрыта или завершена.
...