How to send data from a form without the Submit button and without updating the page

Question

Hello,

I am a relatively new programmer in php and I am developing a website. It is a site where there is a list of companies. And I wanted to implement in it, search filters, the first of them being a select "Select your city":

    <form method="post" action="lista.php" id="Cidade" name="Cidade">
        <label for="cCidade">Selecione sua Cidade</label>
        <select id="cCidade" name="tCidade">
            <option>Selecione a Cidade</option>
            <option value="Farroupilha">Farroupilha</option>
            <option value="Caxias do Sul"default>Caxias do Sul</option>
        </select>
    </form>

I want that when the user uses select, the results are sent to an iframe on the screen (the "list.php"), which is the listing of companies as I mentioned earlier. But I want this submission, not update the page and not need a button to be sent, IE, whenever the user uses another option of select, the search totally changes.

Answer 1

Well the simplest way to do this is by using jquery and the serializeArray

I made an example for you to see how it works.

1. I take the form with the selector $()
2. I run Event.preventDefault() to stop the form sending action
3. serializeArray() in the form , which takes all the fields of this form and transforms it into an object
4. Sending by ajax using the POST method which is usually the same using the form

if you still have doubt, you have a reference in this link

$("#form").submit(function() {
  event.preventDefault();

  var url = $(this).attr("action");
  /*serializeArray vai pegar todos os campos do array*/
  var formData = $(form).serializeArray();
  console.log(formData);
  $.post(url, formData).done(function(data) {
    console.log(data); //resultado do envio para o servidor
  });

});

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


<form name="form" id="form" action="enviar.php">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" value="nome" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail" value="[email protected]" />
  </div>
  <div>
    <label for="carro">carro:</label>
    <select name="carro">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message">Mensagem que será enviada</textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

Answer 2

These are the famous Selects, via jQuery. I’ll explain and have an example working on it:

include jquery in head:

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

And in the body:

<form method="post" action="lista.php" id="Cidade" name="Cidade">
    <label for="cCidade">Selecione sua Cidade</label>
    <select id="cCidade" name="tCidade">
        <option value="">Selecione a Cidade</option>
        <option value="Farroupilha">Farroupilha</option>
        <option value="Caxias do Sul">Caxias do Sul</option>
    </select>
</form>
<div id="resultado"></div>

<script>
$(document).ready(function(){
   $("#cCidade").on('change click', function(){
        var cidade = $(this).val();
        if(cidade == ""){
          alert("Cidade não selecionada");
        }else{
          $("#resultado").load("lista.php", {"cidade":cidade});
        }
    });
});
</script>

And create the.php list file only with the query and return:

//inclua o arquivo de conexão do php e valide se há conexão foi bem sucedida.
$sql = "SELECT empresas FROM empresas";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {

    echo "<p>".$row['empresas']."</p>";

  }
}else{
 echo "<p>Não há filiais nesta região.</p>";
}

So whenever it changes the select the wheel query and result changes in the DIV#Result. I hope to have helped.