0

Colegas.

Tenho através do modelo de Abas em Ajax e graças ao nosso colega DontVoteMeDown, consigo através do botão do tipo button mudar de abas, porém como eu faria para que ao mudar de abas, cadastrasse as informações da aba anterior no banco? O cadastramento em PHP/Mysql eu sei fazer, o que está ocorrendo é que ao mudar de aba, não ocorre o input, somente se eu usar o submit. Veja abaixo ( alterei o código e está cadastrando no banco, mas como faço para passar os valores do formulário para o jquery? ):

     <script>
      $(function() {
        $( "#tabs" ).tabs();
          $("#btnComprar").on("click", function() 
                {
                  $.post("cadastrar_.php", // Cadastando OK
                              {
// Como faço para pegar os valores do formulário e jogar para o campo abaixo?
                             nome: "nome do usuário",
                               idade: "idade"
                  },
                        function(data, status){
                    //   alert("Data: " + data + "\nStatus: " + status);
                        });

                var indice = $('#tabs ul li a[href="#' + $(this).parent().prop("id") + '"]').parent().index();
                    $("#tabs").tabs("option", "active", (indice + 1));

                });
        $(".voltar").on("click", function() 
                {
                    var indice = $('#tabs ul li a[href="#' + $(this).parent().prop("id") + '"]').parent().index();              
                    $("#tabs").tabs("option", "active", (indice - 1));
                });
        });
      </script>

          <button type="button" id="btnComprar" class="proximo btn btn-success pull-right proximo" name="Valor" value="Comprar" style="margin-right: 10px" disabled="disabled"/><i class="fa fa-cart-plus"></i> Comprar </button>
1
  • Você está tentando fazer um formulário tipo Wizard install? Commented 28/09/2015 às 21:02

1 Resposta 1

1

Agora não tem erro, com esse exemplo deve conseguir resolver o seu problema, mas estude mais JSON, vale a pena e o meu exemplo ainda não é o melhor possível.

arquivo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form>
    <label>Nome
        <input id="nomeId" name="nome" >
    </label>
    <label>Nome novo
        <input id="nomeNovo" name="nomeNovo" >
    </label>
    <button type="button" id="enviar">Vai</button>
  </form>
    <div id="view"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
  $("#enviar").click(function(){
      var inputNome = $("#nomeId").val();

    $.ajax({
      type:"POST",
      url:"cadastrar.php",
      data:{"nome": inputNome},
      success:function(dados){
        var resposta = $.parseJSON(dados);
        $("#nomeNovo").val(resposta.nome+" Sobrenome");
      }
    });
  });
    </script>
</body>
</html>

cadastro.php

<?php
if($_SERVER['REQUEST_METHOD'] != "POST") {exit;}

echo json_encode($_POST);
?>
7
  • Olá CESD. Testei seu código, mas infelizmente não funcionou. Troquei o function(dados) por function(data) e até coloquei antes do var indice = $('#tabs ul li a[href="#' + $(this).parent().prop("id") + '"]').parent().index(); $("#tabs").tabs("option", "active", (indice + 1));.... mas também não funcionou...
    – user24136
    Commented 29/09/2015 às 11:42
  • Posta o seu HTML também se puder...talvez fique mais fácil encontrar o erro.
    – CESD
    Commented 29/09/2015 às 13:24
  • Na verdade consegui resolver sobre cadastrar no banco de dados baseado na sua resposta. Agora gostaria de saber como faço para pegar os valores dos campos do formulário e mandar para o jquery. Editei minha pergunta e postei minha dúvida lá.
    – user24136
    Commented 29/09/2015 às 13:28
  • Faça um teste...de um echo no php para imprimir os dados que vc inseriu no banco, depois troque a sua função de retorno para ver o que aparece, o ideal seria vc retornar os dados do php no format JSON e distribuir nos seu campos com por exemplo $("#nome").val(data.nome) labs.jonsuh.com/jquery-ajax-php-json function(data){ alert( "Data Loaded: " + data ); });
    – CESD
    Commented 29/09/2015 às 13:45
  • 1
    Editei minha resposta, dê uma olhada
    – CESD
    Commented 29/09/2015 às 16:50

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