How to send forms automatically without using Ubmit 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 when the user uses the select, the results are sent to a iframe on the screen (the "list.php"), which is the listing of companies as I said 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

Good night Nicolas,

To achieve this you must have some knowledge in AJAX and JavaScript. I’ll try to explain how this would work.

First, you must know when the select has been updated. To identify this, you need to listen to a tag event select which is fired each time select mute option. You can achieve this goal with the following excerpt:

var select = document.getElementById("cCidade");
    select.addEventListener("change", function(e){
        //O código aqui dentro será executado toda vez que usuário trocar o select
    });

Next, you need to send a request to the server asynchronously every time the user changes the city. It would look something like this:

var select = document.getElementById("cCidade");
    var xhttp;
    select.addEventListener("change", function(e){
        xhttp =  = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                //aqui dentro você manipula os dados das empresas retornados pelo servidor
            }
        };
        xhttp.open("GET", "lista.php?cidade" + select.value, true);
        xhttp.send();
    });

Notice that you’re passing one Parameter called city and taking dynamically the value of select.value. You can notice that on the line: xhttp.open("GET", "lista.php?cidade" + select.value, true);

Ready. This way you are not using any button or updating the page to have your data returned according to a dynamic query sent by the page.

If you are in doubt what is being done in this code, I suggest you search the web on the following topics.

• How to make an AJAX request for PHP back-end
• What is a callback function
• What Xmlhttprequest
• How to listen to events in JavaScript

I hope it helped.