Jquery does not pass the POST value of a form

Question

Colleagues

I have a form that I am using jquery to pass the values, but the value does not pass to the send.php file. See:

    <form method="post" name="post" id="contact-form">  
                    <div id="success"></div>
                    <label for="exampleInputEmail1">Matéria:</label>
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
                      </div>
                      <input type="text" class="form-control" name="NovaMateria" maxlength="150" id="tirarEspacos">
                    </div>
    </form>   

<script type="text/javascript">    
    $('#submit').click(function() {
      $.post("enviar.php", $(".contact-form").serialize(), function(response) {
        $('#success').html(response);
    $('#tirarEspacos').val('');     
      });
      return false;
    });
  </script>

send php.

<?php 
echo $_POST['NovaMateria'];

Answer 1

In this excerpt you are trying to recover an element incorrectly, the . indicates the element class, so nothing is serialized.

$.post("enviar.php", $(".contact-form").serialize(), function(response) {
                       ^^^

Try replacing with the ID indicator, #, as in the example below:

$.post("enviar.php", $("#contact-form").serialize(), function(response) {
                       ^^^

Answer 2

In addition to recovering incorrectly $(".contact-form").serialize() instead of $("#contact-form").serialize() since in the form tag you used id and not class, there is also the button to submit the data. The code would look like this:

HTML code:

<form method="post" name="post" id="contact-form">  
      <div id="success"></div>
      <label for="exampleInputEmail1">Matéria:</label>
      <div class="input-group">
        <div class="input-group-addon">
           <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
        </div>
        <input type="text" class="form-control" name="NovaMateria" maxlength="150" id="tirarEspacos">
     </div>
     <button id="submit">Enviar</button>
</form>  

Codex Jquey:

<script type="text/javascript">    
    $('#submit').click(function() {
      $.post("enviar.php", $("#contact-form").serialize(), function(response) {      
        $('#success').html(response);
        $('#tirarEspacos').val('');  
      });
      return false;
    });
 </script>