3

Estou tentando enviar dados de um formulário para uma outra página, e trazer da mesma um gráfico numa div com id="retorno", que está abaixo do formulário.

O formulário possuí o código, data1, data2 e loja, porém parece que as variáveis não estão sendo enviadas de forma correta.

Já fiz algo parecido porém só com uma variável, mas com várias assim não.

Minha função jQuery está abaixo, acredito que tenha algo nela errado.

Achei vários exemplos na internet, porém nenhum me ajudou e resolveu o meu problema.

  $(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;
        }); 
    });

1 Resposta 1

0

O formulário possuí o código, data1, data2 e loja, porém parece que as variáveis não estão sendo enviadas de forma correta.

Verifique se os seletores de identificação estão de acordo.

Você pode simplificar a coleta das informações do formulário utilizando o serialize. um exemplo disto seria:

$('#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>

<form id="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>

Desta forma você pode passar uma queryString para o parâmetro data do ajax e enviar.

Outra coisa, no metodo submit é recomendado utilizar o preventDefault() ao inves do return false para previnir que a pagina seja recarregada.

2
  • Vou testar, obrigado. Commented 1/06/2016 às 12:36
  • Deu certo, obrigado, a única coisa que mudei foi o dataType: 'json', que tive que colocar dataType: 'html', senão não funcionava. Commented 1/06/2016 às 12:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .