How to send multiple variables to another page and return in a div (JQuery)?

Question

How to send multiple variables to another page and return in a div (JQuery)?

Navigation

#1 by (0 votes)

3

I'm trying to send data from one form to another page, and bring a graphic of it in a div with id="return", which is below the form.

The form has the code, data1, data2, and store, but it appears that the variables are not being sent correctly.

I have done something similar but with only one variable, but with several not so.

My jQuery function is below, I believe you have something wrong with it.

I found several examples on the internet, but none helped me and solved my problem.

  $(document).ready(function() {

    //alert("teste 1 ");

    /// Quando usuário clicar no botão será feito todos os passo abaixo
        $('#formulario').submit(function() {

        //alert("teste 2");

            var codigo = $('#codigo').val();
            var data1 = $('#data1').val();
            var data2 = $('#data2').val();
            var loja = $('#loja').val();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'retorna_produto.php',
                async: true,
                data: {codigo, data1, data2, loja},
                //data: {'codigo='+ $('#codigo').val(),
                //  'data1='+ $('#data1').val(),
                //  'data2='+ $('#data2').val(),
                //  'loja='+ $('#loja').val()
                //},
                success: function(data) {
                     $('#retorno').html(data);
                }
            });

            return false;
        }); 
    });

php jquery

asked by anonymous 01.06.2016 / 13:15

1 answer

Query with dynamic column spring data Open Graphs (author) is not inserted in page

score 0 · Accepted Answer

The form has the code, data1, data2 and store, but it seems that the variables are not being sent correctly.

Verify that the ID selectors agree.

You can simplify the collection of form information by using serialize. an example of this would be:

$('#formulario').submit(function(e) {
  e.preventDefault();
  var dados = $(this).serialize();
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'retorna_produto.php',
    data: dados,
    success: function(data) {
      $('#retorno').html(data);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><formid="formulario">
  <input type="text" name="codigo" value="1">
  <input type="text" name="data1" value="valor data 1">
  <input type="text" name="data2" value="valor data 2">
  <input type="text" name="loja" value="Loja 1">
  <button>
    Enviar Formulario
  </button>
</form>

This way you can pass a queryString to the ajax date parameter and send it.

Another thing, in the submit method it is recommended to use preventDefault() instead of return false to prevent the page from being reloaded.