How to submit data from a form without a submit button and without refreshing the page

Question

How to submit data from a form without a submit button and without refreshing the page

Navigation

#1 by (2 votes)
#2 by (0 votes)

-1

Hello,

I'm a relatively new programmer in php and I'm 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 when the user uses the 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, do not update the page and do not even need a button to be sent, that is, whenever the user uses another select option, the search changes completely.

php javascript html jquery ajax

asked by anonymous 30.08.2016 / 21:46

2 answers

Doubt - Google Drive + Sqlite [closed] Bootstrap Menu does not work Responsive [closed]

score 2 · Answer 1

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

I've set an example to see how it works.

I get the form with the selector $ ()

I run the event.preventDefault () to stop the submit form action

serializeArray () in form, which takes all fields of this form and transforms it into an object

Sending by ajax using the POST method which is usually the same as using in the form

If you still have questions, please refer to 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><formname="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>

score 0 · Answer 2

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

include jquery in head:

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

Andnobody:

<formmethod="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 file list.php only with 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 query runs and result changes in the DIV # Result. I hope I have helped.