Values are going empty in Jquery

Asked

Viewed 24 times

2

I have a form, from which I’m trying to get the values this way, but it’s not working. Where I’m going wrong?

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>

Console result:

TipoAcesso=Selecione&LoginAcesso=&SenhaAcesso=

Form

<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>
  • When the page loads you already do all the serialize process and such. Is that right? wouldn’t have to have a Submit there?

  • Hello Bruno. I don’t know how to answer, because I don’t know how to work much with Jquery. You can help me?

1 answer

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>

Put this way and it should work.

The mistake

the function .ready() jquery is saying that the code will only be executed after security exists for document manipulation. Learn More (link in English)

And this happens right after the page loads.

What was happening is that right after the page was loaded the variable data already received the values of the form fields login-form. As all fields are empty when the page loads the result would always be:

TipoAcesso=Selecione&LoginAcesso=&SenhaAcesso=

The correction

Using the function .submit() you’re telling the code that the variable data will only receive form values login-form after the button type='submit' is clicked. With all validations made for the fields. The return for the variable data should already be satisfactory.

More about the function .submit() (link in English)

  • Perfect Buno. It worked. I will give as accepted your reply, but I have to wait 5 minutes. Thank you very much!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.