2

Criei um form do tipo radio, que ao preenchido as alternativas, ao clicar no botão de submit, ele envia os dados do form via AJAX para a página PHP aplicar a lógica de quantas questões foram acertadas. O botão ao clicado gera uma div por popup com o retorno da lógica do PHP, exibindo quantos acertos foram realizados. Porém ao clicar no botão mesmo sem preencher todos os radios, ele gera a div vazia na tela. Os campos todos estão com required.

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#questionario').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "teste.php",
                data: dados,
                success: function( data )
                {
                    $("#div1").html(data);
                    var modal1= document.getElementById('modal-wrapper1');
                window.onclick= function(event){
                  if(event.target==modal1){
                    modal1.style.display="none";
                  }
                }
                    
                }
            });
            
            return false;
        });
    });
    </script>
<section class="joguinho" style="background:#f2f2f2;">
<div class="container">
  
        <div class="col-md-12 justify-content-center d-flex">
        <h1 style="font-weight: 300;" class="mt-5">DESCUBRA</h1>
           </div>

           <div class="col-md-12 justify-content-center d-flex">
        <h1 style="color: #03be98;">SE VOCÊ TEM DTM</h1>
    </div>


<form action="" method="post" id="questionario">
 <div class="row">
        <div class="col-12 col-md-9"><h6>Sente dificuldade para abrir a boca?</h6></div>
    <div class="col-12 col-md-3 form-check text-left text-md-right">
        <input type="radio" name="questao1" id="questao1-1" value="Sim" required> Sim
        <input type="radio" name="questao1" id="questao1-2" value="Não" required> Não
    </div>
</div> <br>

 <div class="row">
        <div class="col-12 col-md-9"><h6>Sente dificuldade para movimentar a mandíbula para os lados?</h6></div>
    <div class="col-12 col-md-3 form-check text-left text-md-right">
        <input type="radio" name="questao2" id="questao2-1" value="Sim" required> Sim
        <input type="radio" name="questao2" id="questao2-2" value="Não" required> Não
    </div>
</div> <br>
<button type="submit" value="Enviar" style="background:#690d2e; color:white; font-weight: 600" class="btn" onsubmit="document.getElementById('modal-wrapper1').style.display='block'">GERAR RESULTADO</button>
</form>
</div>
<!--Formulario invisivel-->

          <div id="modal-wrapper1" class="modal">

        
                <div class="container justify-content-center d-flex align-self-center modal-content animate">
                     <div id="div1" class=" justify-content-center d-flex align-self-center form-row pt-2">

                     </div>  
                </div>
        
            
            </div>
</section>

2
  • sua pergunta não está bem claro quanto ao problema, mas quer enviar só com os campos preenchidos, seria interessante validar o form antes, por exemplo usando a função valid() do jquery 18/06/2019 às 16:17
  • Uma opção é desabilitar o botão do submit com disabled e só habilitar depois de preencher os radio buttons. Resolveria assim?
    – gustavox
    18/06/2019 às 16:18

1 Resposta 1

3

Tem coisas a melhorar no seu código.

Primeiro é que você não precisa colocar required em todos os radios. Basta colocar em apenas 1 dos que tiverem o mesmo name, por exemplo:

<input type="radio" name="questao1" id="questao1-1" value="Sim" required> Sim
<input type="radio" name="questao1" id="questao1-2" value="Não"> Não

Veja que foi colocado apenas no radio "Sim". Isso irá obrigar a marcar uma das duas opções, pois ambas possuem o mesmo name.

Também não precisa colocar onsubmit no botão de submit. Você já tem um event handler .submit() e pode mostrar a div lá dentro.

E em vez de usar window.onclick= function(event){ para esconder a modal, você pode simplesmente usar o método .one("click", function...) para isso. Esse método habilita o clique na div apenas uma vez, ou seja, quando o AJAX entrar no success a modal está habilitada para receber um clique e se esconder:

success: function( data )
{
   $("#div1").html(data);
   $("#modal-wrapper1").one("click", function(){
      $(this).hide();
   });
}

Também não utilize <br> entre as divs para dar espaçamento. É incorreto. Você pode usar padding ou margin para isso no seu CSS.

O código completo ficará assim:

jQuery(document).ready(function(){
   jQuery('#questionario').submit(function(){
      $("#modal-wrapper1").show(); // mostra a modal
      var dados = jQuery( this ).serialize();

      jQuery.ajax({
         type: "POST",
         url: "teste.php",
         data: dados,
         success: function( data )
         {
            $("#div1").html(data);
            $("#modal-wrapper1").one("click", function(){
               $(this).hide(); // esconde a modal ao ser clicada
            });
         }
      });
      return false;
   });
});

HTML:

<section class="joguinho" style="background:#f2f2f2;">
   <div class="container">
      <div class="col-md-12 justify-content-center d-flex">
         <h1 style="font-weight: 300;" class="mt-5">DESCUBRA</h1>
      </div>

      <div class="col-md-12 justify-content-center d-flex">
         <h1 style="color: #03be98;">SE VOCÊ TEM DTM</h1>
      </div>

      <form action="" method="post" id="questionario">
         <div class="row">
            <div class="col-12 col-md-9"><h6>Sente dificuldade para abrir a boca?</h6></div>
            <div class="col-12 col-md-3 form-check text-left text-md-right">
               <input type="radio" name="questao1" id="questao1-1" value="Sim" required> Sim
               <input type="radio" name="questao1" id="questao1-2" value="Não"> Não
            </div>
         </div>
         <div class="row">
            <div class="col-12 col-md-9"><h6>Sente dificuldade para movimentar a mandíbula para os lados?</h6></div>
            <div class="col-12 col-md-3 form-check text-left text-md-right">
               <input type="radio" name="questao2" id="questao2-1" value="Sim" required> Sim
               <input type="radio" name="questao2" id="questao2-2" value="Não"> Não
            </div>
         </div>
         <button type="submit" value="Enviar" style="background:#690d2e; color:white; font-weight: 600" class="btn">GERAR RESULTADO</button>
      </form>
   </div>
   <!--Formulario invisivel-->
   <div id="modal-wrapper1" class="modal">
      <div class="container justify-content-center d-flex align-self-center modal-content animate">
         <div id="div1" class=" justify-content-center d-flex align-self-center form-row pt-2">
         </div>  
      </div>
   </div>
</section>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .