Send form data via GET to server (no page refresh)

3

I have this form and would like to give a GET to variables with their value when clicking the button, without refreshing the page because I have other forms on the same page, is it possible with PHP, or do you have to use AJAX? / p>

Form Layout

HTML

<div class="form-group"> <div class="col-sm-7"> <label for="inputEmail3" class="control-label" contenteditable="true"> Espaçamento entre linhas(metros): </label> </div> <div class="col-sm-10"> <input type="text" class="input-mini" placeholder="1" id="linhas" value="1" disabled> </div> </div> <div class="form-group"> <div class="col-sm-7"> <label for="inputPassword3" class="control-label"> Espaçamento entre plantas(metros): </label> </div> <div class="col-sm-10"> <input type="text" class="input-mini" id="plantas" placeholder="1" value="1" disabled> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label for="inputPassword3" class="control-label"> Tamanho da área a ser plantada: </label> </div> <div class="col-sm-10"> <p> <input type="text" class="input-mini" id="tamanho"> <select class="selectpicker"> <option>ha</option> <option>m²</option> </select> </p> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <button type="submit" class="btn btn-default">Estimar</button> </label> </div> </div> </div> </form>     
asked by anonymous 22.11.2014 / 17:58

2 answers

5

Making use of an AJAX call using jQuery to make it easier for us to work with, we can handle the issue by using the $.ajax() as follows:

var dadosFormulario = $("#formulario").serialize();

$.ajax({
  type: "GET",
  url: "caminho/para/ficheiro.php",
  data: dadosFormulario,
  success: function(resposta) {
    // variável "resposta" contém o que o servidor envia
    // aqui código a executar quando correu tudo bem
  },
  error: function() {
    // correu mal, agir em conformidade
  }
});

Or the same code in a more portable form where for that purpose the HTML should be perfectly valid:

var $form = $("#meuFormulario");

$.ajax({
  type: $form.attr("method"),  // GET ou POST definido no atributo "method" do formulário
  url: $form.attr("action"),   // URL para onde enviar os dados definido no atributo "action"
  data: $form.serialize(),
  success: function(resposta) {
    // variável "resposta" contém o que o servidor envia
    // aqui código a executar quando correu tudo bem
  },
  error: function() {
    // correu mal, agir em conformidade
  }
});

In detail

In order to make use of such a solution, you should keep in mind a few things:

  • Form should preferably contain a ID attribute to identify it unique shape on the page:

    <form id="meuFormulario" method="GET" action="http://www.meusite.com/ficheiro.php">
      <!-- ... -->
    </form>
    
  • If the code for the AJAX call is to be executed by clicking a button of type submit or a link , using the .on() , .click() or the like, we have to avoid the normal behavior of these elements in order to that the page is not submitted to the server and / or updated:

    $('#meuBotao').on("click", function(e) {
      e.preventDefault();
      // chamada AJAX aqui
    });
    

    or if we are performing the AJAX call directly in the submission of the form, using the method .submit() the concept is the same:

    $('#meuFormulario').submit(function(e) {
      e.preventDefault();
      // chamada AJAX aqui
    });
    
  • The elements in the form, so that they follow a $_GET or $_POST must all contain a name attribute whose same is what will allow them to be identified by the server and thus collect their values:

    <input type="text" name="meuNome" value="">
    

    Note that these names are unique identifiers, with some exceptions when the goal is to create an array of results or as in radio where only one value is returned from a set of them.

  • In the .php file where AJAX will send GET , you can get it as follows:

    if (isset($_GET) && is_array($_GET)) {
      $meuNome = $_GET["meuNome"];
    }
    else {
      echo 'Ups... Preciso receber um GET e o mesmo deverá conter dados!';
    }
    
  • 27.12.2014 / 13:45
    0

    Use $('form').serialize(); or $('form').serializeArray();

        
    27.11.2014 / 11:40