Error with serialize() + PHP function

Question

I’m using the serialize function to send data from a form to a PHP page:

index php.

<form id="formfeira" method="post">

      <div class="form-group">
        <label for="horario">Horário de funcionamento:</label>
        <input type="text" class="form-control" id="horario" name="horario" placeholder="das 8h às 18h">
      </div>

      <div class="form-group">
        <label for="pagamento">Formas de pagamento:</label>
        <input type="text" class="form-control" id="pagamento" name="pagamento" placeholder="à vista ou nos cartões Visa e Mastercard">
      </div>

      <div class="form-group">
        <label for="quem">Quem somos:</label>
        <textarea class="form-control" id="quem" name="quem" rows="3" placeholder="descreva aqui..."></textarea>
      </div>

      <button type="submit" class="btn btn-primary" onclick="salvaFeira()">Enviar dados</button>
    </form>

functions js.

$(document).ready(function(){});
function salvaFeira(){
  alert($("#formfeira").serialize()); //aqui funciona
  $.ajax({
    type: "POST",
    url: "salvarFeira.php",
    data: $("#formfeira").serialize(),
    success: function(data) {
      alert(data); //não chega aqui
    }
  });
}

saveFeira.php

<?php

include 'conexao.php';

$mysqli = new mysqli("localhost", "root", "", "feira");
$res = $mysqli->query("insert into feira (horario, formapagamento, quemsomos) values ('123', '456', '789')");

echo 'teste'; 
?>

I gave up trying to rescue the data and am just making a common Sert and returning the word test

However, it is not saving in the database. If I directly execute the file save.php, it saves the data in the database correctly.

What am I doing wrong?

Answer 1

I copied your code and tested, what’s wrong is you set the type of the element button as Submit, to perform an ajax request, the property should actually be set as BUTTON as below:

<button type="button" class="btn btn-primary" onclick="salvaFeira()">Enviar 
dados</button>

While it was like Submit didn’t work because the page reloaded and missed the request sent by ajax.

In my test now works perfect, and for you ?

PS: Don’t forget that jquery must be included on your page to make it work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

Hugs...