2

Tenho um formulário, do qual estou tentando pegar os valores dessa forma, mas não está funcionando. Onde estou errando?

JQuery

<script type="text/javascript">
   $(document).ready(function(){
   data = $('#login-form').serialize();

  $.post("validar.php", {
     d: data,
   },
  function (d) {
     console.log(data);
      $('#myModal').modal('show');
   });
    return false;
 });
</script>

Resultado do console:

TipoAcesso=Selecione&LoginAcesso=&SenhaAcesso=

Formulário

<form method="post" id="login-form">
<ul>
<li>
 <label>Tipo de Acesso:</label>
 <select id="tipoAcesso" class="form-control" name="TipoAcesso" onChange="alterar(this.value);">
    <option value="Selecione">Selecione</option>
  <option value="Aluno">Aluno</option>
    <option value="Responsável">Responsável</option>
    <option value="Professor">Professor</option>
  <option value="Coordenador">Coordenador</option>
  <option value="Secretaria">Secretaria</option>
  <option value="Adm. Escola">Adm. Escola</option>
</select>
</li>
<li>
 <label  id="texto">Login:</label>
 <input required="required" type="text" name="LoginAcesso" id="username" placeholder="Matrícula" class="form-control" />
</li>
<li>
 <label>Senha:</label>
 <input required="required" type="password" name="SenhaAcesso" id="password" placeholder="Senha" class="form-control" />
 <button type="button" id="show_password" name="show_password" class="fa fa-eye-slash" aria-hidden="true"></button>
</li>
<li class="text-right">
 <button type="submit" name="submit" class="btn btn-primary">Acessar</button>
</li>
</ul>
</form>
2
  • Quando a página carrega você ja faz todo o processo de serialize e tal. É isso mesmo? não teria que ter um submit ali?
    – Bsalvo
    Commented 5/07/2017 às 13:16
  • Olá Bruno. Não sei responder, pois não sei trabalhar muito com Jquery. Pode me ajudar?
    – user24136
    Commented 5/07/2017 às 13:18

1 Resposta 1

2
<script type="text/javascript">
       $(document).ready(function(){
           $('#login-form').submit(function() {

                data = $('#login-form').serialize();

                $.post("validar.php", {
                d: data,
                },
                function (d) {
                console.log(data);
                $('#myModal').modal('show');
                });

                return false;

           }); });
    </script>

Coloque desta forma e deve funcionar.

O erro

a função .ready() do jquery está dizendo que o código só será executado depois que existir segurança para a manipulaçao do documento. Saiba Mais (link em inglês)

E isso acontece logo depois que a página é carregada.

O que estava acontecendo é que logo depois que a página era carregada a variável data já recebia os valores dos campos do form login-form. Como todos os campos são vazios quando a página carrega o resultado seria sempre:

TipoAcesso=Selecione&LoginAcesso=&SenhaAcesso=

A correção

Utilizando a função .submit() você está dizendo para o código que a variável data só irá receber os valores do form login-form depois que o botão type='submit' for clicado. Com todas as validações feitas para os campos. O retorno para a variável data já deve ser satisfatório.

Mais sobre a função .submit() (link em ingês)

1
  • Perfeito Buno. Funcionou. Vou dar como aceite sua resposta, mas tenho que esperar 5 minutos. Muito obrigado!
    – user24136
    Commented 5/07/2017 às 13:25

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