Values are going empty in Jquery

Question

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>

Answer 1

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