Enviar datos de un Jquery Tab a PHP

[kimmy]

Hola. Tengo como 3 semanas leyendo y leyendo pero no se como hacer esto. Tengo un sistema de pestañas realizado en Jquery, son 6 pestañas. En la primera pestaña el usuario debe introducir información en 8 input text y en cada una de las pestañas siguientes debe seleccionar algunos checkbox para escoger opciones.

Lo que requiero es que al final, en la última pestaña se recolecte todo lo que el usuario escogio y poder enviarlo a una pagina php que lo muestre y lo pueda enviar a un correo.

Yo hice esto leyendo por aqui y por allá:

Código Javascript:

function validar(){
      //valores de los inputs
      usuario=document.form1.fecha_evento.value;
      pass=document.form1.tipo_evento.value;
      //instanciamos el objetoAjax
      ajax=objetoAjax();
      //uso del medotod POST
      //archivo que realizará la operacion
      //validar.php
      ajax.open("POST", "detalles.php",true);
      ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
          if(ajax.responseText=="1")
          {
              redireccionar();
          }
          else
          {
              if(ajax.responseText=="0")
              {
                  alert("DATOS NO VALIDOS");
              }
          }
      //alert("listo");
      }
      };
      ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //enviando los valores
      ajax.send("Fecha="+fecha_evento+"&Tipo="+tipo_evento);
      }
 
var pagina = 'http://localhost/pagina/cotizacion.php';
function redireccionar() {
    document.location.href=pagina;
}
 

No se si esto se hace asi.

Tampoco se donde coloco y como (en el html) el boton que procesará esto.

Estoy muy, muy confundida.

Por favor orientenme porque voy a perder mi trabajo.

Gracias.

[kimmy]

Segui buscando y como estoy usando JQuery UI consegui algo que empleo de esta manera:

Código Javascript:

jQuery.fn.validateTab = function (toTab) {
var isValid = true;
$(this).find("input, select").each(function () {
if (isValid) {
isValid = $(this).valid();
} else {
$(this).valid();
}
});
if (isValid) {
if (!toTab) {
toTab = 0;
}
$("#tabs").tabs('select', toTab);
}
return false;
}
 
$(document).ready(function () {
$('#btnToPhoneNumber').click(function (e) {
e.preventDefault();
$("#EventoTab").validateTab(1);
});
$('#btnToGeneral').click(function (e) {
e.preventDefault();
$("#AtraccTab").validateTab(0);
});
$('#AlimentoTab').click(function (e) {
e.preventDefault();
$("#").validateTab(0);
});
 
$('#FestejosTab').click(function (e) {
e.preventDefault();
$("#").validateTab(0);
});
 
$('#EntretenTab').click(function (e) {
e.preventDefault();
$("#").validateTab(0);
});
 
 
$('#DecorTab').click(function (e) {
e.preventDefault();
$("#").validateTab(0);
});
 
});
 

Estos son mis tab:

Código HTML:

<form id="MultiTabValidation" action="detalles.php" method="post">
<!-- tabs -->
    <ul class="tabs">
        <li><a href="#EventoTab" class="w2 current">Evento</a></li>
        <li><a href="#AtraccTab" class="w2">Atracciones</a></li>
        <li><a href="#AlimentoTab" class="w2">Alimentos/Bebidas</a></li>
        <li><a href="#FestejosTab" class="w2">Serv. Festejos</a></li>
        <li><a href="#EntretenTab" class="w2">Entretenimiento</a></li>
        <li><a href="#DecorTab" class="w2">Decoración</a></li>
    </ul>
 
<!-- panes -->
<div class="panes">
<div style="display: block;">
//aqui varios input text
</div>
<div style="display: block;">
//aqui varios checkbox
</div>
//...etc
</div>
 

al final coloco el boton que enviará todo a una pagina php:

Código HTML:

<button id="btnSubmit" name="btnSubmit" type="button">Submit</button>
 

EL problema es que no se como enviarlo a este documento y pasar los valores que el usuario ingresó.

Por favor necesito que me ayuden a entender como hago esto.

Gracias

[livemusic]

Hola, es muy sencillo lo que buscas realizar de echo te puedo ayudar con solo 2 tip'S, de echo es la manera de como io lo trabajo, y espero y te de resultado..

1--- serialize
2--- ajax

//// HTML form..

Código HTML:

<form action="javascript: fn_insert_user_aplication();" method="post" id="frm_user_aplication">
<input name="txtNameUser" type="text" id="txtNameUser" />
</form>
 

//// JS

Código Javascript:

function fn_insert_user_aplication(){
    var str = $("#frm_user_aplication").serialize();
    $.ajax({
        url: 'ajax.php?pag=newUser',
        data: str,
        type: 'post',
        success: function(data){
            if(data != ""){
                alert(data);
                                                }else{
                                                                alert('Ingreso de datos correctamente');
                                                }
        }
    });
};
 

//serialize : Obtiene lo valores de todo tu form ia sea de tipo inputs selec hidden y demas...
--->var str = $("#frm_user_aplication").serialize();

// Destino de envio, donde es que lo queremos enviar
--->url: 'ajax.php?pag=newUser'

// Valores enviados...
--->data: str

// Verificamos el envio d data..
--->success: function(data){


///////////////////////////////////////////////////////////////////////////
PHP
$username = $_POST['txtNickName'];


Listo espero haberte ayudado suerte, si hubo algo q no entendiste, comunicate conmigo.... saludos suerte...

[kimmy]

Hola livemusic, no te imaginas cuanto te agradezco tu valiosa ayuda. Coloqué el codigo tal como me indicaste y si me almacena los valores pero no me abre la pagina php. No se si es que no está bien el boton submit. Yo lo puse asi:

Código HTML:

<input type="submit" value="Cotizar"/>
 

Esto esta mal???

Es que es primera vez que uso ajax.

Gracias

[JaAViEr_]

Yo usaría la función .load(); de Jquery
en el PHP que recibe por POST, pondré un code sencillo de ejemplo:
test.php

Código PHP:

<?php
echo $_POST['campo'];
?>
 

Y usando Jquery(1.6.1 uso yo) y la función load:
archivo.html:

Código Javascript:

<script src='http://anycode.s.gp/jquery-1.6.1.js'></script>
<script language='JavaScript'>
$(document).ready(function(){
$('#carga_contenido').load('test.php',{campo:'Test!'});
});
</script>
<div id='carga_contenido'></div>
 

En load('test.php'... cambias por tu archivo que recibe $_POST
y luego entre {} pones los campos POST : Valor

Saludos.

[kimmy]

Hola JaAViEr_, muchas gracias pero no me sirve pues incluso no me deja moverme entre las pestañas.

Creo que lo que me indica livemusic es lo que se ajusta al jquery tab que tengo pero no me abre el php. Creo que hay que ponerle un open pero no se como ni donde.

???

[kimmy]

Estoy tan desesperada... Ahora lo puse asi y veo que pasa los valores por get pero el problema es que no avanza de pestaña a pestaña y no me lleva al php. Es asi:

Código Javascript:

function nuevoAjax(){
    var xmlhttp=false;
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
        try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) {
           xmlhttp = false;
          }
          }
 
           if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
              xmlhttp = new XMLHttpRequest();
            }
             return xmlhttp;
             }
 
  function cargarContenido(datasource,divID){
    var contenedor;
    var otro;
    contenedor = document.getElementById('tabs').getElementsByTagName('li');
                       
     ajax=nuevoAjax();
 
      var nombre =document.form.fecha_evento.value //Esta variable obtiene el valor de lo q puso el usuario en el textbox nombre
                        ajax.open("GET", "detalle_cotizacion.php?"+"&"+"nombre="+nombre,true);
                        ajax.onreadystatechange=function() {
                         if (ajax.readyState==4) {
                            contenedor.innerHTML = ajax.responseText
                            }
                        }
                    ajax.send(null)
                    }
 

y en el boton de la ultima pestaña esto:

Código HTML:

<input type="submit" value="Cotizar" onclick ="cargarContenido('detalle_cotizacion.php','contenedor')"/>
 

ya no se como hacer

[livemusic]

wow, la manera de como... se trabaja AJAX ES DE ESTA FORMA

Código Javascript:

$.ajax({
        url: 'ajax.php?pag=newUser',
        data: str,
        type: 'post',
        success: function(data){
            if(data != ""){
                alert(data);
             }else{
                alert('Ingreso de datos correctamente');
              }
        }
    });
 

[livemusic]

Mira este ejemplo espero y te ayude :)...

http://articlecon.com/phpdemo/b1/test/wizard

[livemusic]

Mira no entiendo como lo estas trabajando pero te recomiendo q lo trabajes de la siguiente forma,, :) espero y te sea de mucha ayuda...

////////HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1.6.1");
</script>
<script type="text/JavaScript">
 
function fn_insert_user(){
    var str = $("#insert_user").serialize();
    $.ajax({
        url: 'demo.php',
        data: str,
        type: 'post',
        success: function(data){
            $("#show").html(data);
        }
    });
};
 
function wizard(integer){
    $('#myslide .cover').animate({left:-350*(parseInt(integer)-1)})
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')
        }
    });
}
 
$(function(){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        wizard(integer);
        return false;
    });
})
 
</script>
<style type="text/css">
    #myslide {width:350px;overflow:hidden;position: relative;height:330px;margin-bottom:20px}
    #myslide .cover{width:1400px; position: absolute; height:350px;}
    #myslide .mystuff {width:350px;float:left;margin:20px 0;}
    .button1,.button2,.button3,.button4{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
    .active{background:#111;padding:6px;display:block;float:left;outline:none;}
    .clear{clear:both;}
</style>
</head>
 
<body>
    <div id="button">
         <a class="button1 active" rel="1" href="#"></a>
         <a class="button2" rel="2" href="#"></a>
         <a class="button3" rel="3" href="#"></a>
         <a class="button4" rel="4" href="#"></a>
    </div>
    <div class="clear"></div>
    <div id="myslide">
        <form action="javascript: fn_insert_user();" id="insert_user">
        <div class="cover">
            <div class="mystuff">
              <label>Ingresar Nombre <input type="text" name="txtNombre" /></label>
            </div>
            <div class="mystuff">
              <label>Ingresar Apellido <input type="text" name="txtApellido" /></label>
            </div>
            <div class="mystuff">
              <label>Ingresar Telefono <input type="text" name="txtTelefono" /></label>
            </div>
            <div class="mystuff">
              <label>Mostrar datos <input type="submit" value="Mostrar datos" /></label>
            </div>
        </div>
        </form>
    </div>
    <div class="clear"></div>
    <div id="show"></div>
</body>
</html>
 

//////// PHP

Código PHP:

<?php
    $nombre   = $_POST['txtNombre'];
    $apellido = $_POST['txtApellido'];
    $telefono = $_POST['txtTelefono'];
    
    echo "$nombre $apellido $telefono\n";
    
?>
 

Saludos suerte si ay algo q no te sale me avisas SALUDOS... suerte

[kimmy]

livemusic gracias por tu apoyo pero sigue sin servirme. asi lo tengo:

Código PHP:

<head>
<script src="jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="standalone.css">   
<link rel="stylesheet" type="text/css" href="tabs.css">
 
<script>
function tab(pestana,wizard)
{
   pst = document.getElementById(pestana);
   pnl = document.getElementById(wizard);
   psts = document.getElementById('tabs').getElementsByTagName('li');
   pnls = document.getElementById('wizard').getElementsByTagName('div');
 
}
</script>
 
<script language="javascript">
function fn_insert_user(){
    var str = $("#insert_user").serialize();
    $.ajax({
        url: 'detalle_cotizacion.php',
        data: str,
        type: 'post',
        success: function(data){
            $("#show").html(data);
        }
    });
};
 
</script>
</head>
<body>
 
<div id="content">
<div id="promotions">
<form action="javascript: fn_insert_user();" id="insert_user">
<div id="wizard">
<!-- tabs -->
    <ul class="tabs">
        <li><a href="#EventoTab" class="w2 current">Evento</a></li>
        <li><a href="#AtraccTab" class="w2">Atracciones</a></li>
        <li><a href="#AlimentoTab" class="w2">Alimentos/Bebidas</a></li>
        <li><a href="#FestejosTab" class="w2">Festejos</a></li>
        <li><a href="#EntretenTab" class="w2">Entretenimiento</a></li>
        <li><a href="#DecorTab" class="w2">Decoración</a></li>
    </ul>
 
<!-- panes -->
<div class="panes">
<div style="display: block;">
  <table width='400'>
  <p></p>  <p></p>
   <tr>
   <td>Fecha:</td>
   <td><input name="fecha_evento" id="fecha_evento" type="text" ></td>
   <td>Tipo:</td>
   <td><input name="tipo_evento" type="text"></td>
   </tr>
   <tr>
   <td>Dirección:</td>
   <td><input name="dir_evento" type="text" id="dir_evento" ></td>
   <td>Lugar:</td>
   <td><input name="carac_lugar" type="text" ></td>
   </tr>
    <tr>
   <td>Hora Inicio:</td>
   <td><input name="hora_ini" type="text" id="hora_ini" ></td>
   <td>Niños:</td>
   <td><input name="ctdad_ninos" type="text" ></td>
   </tr>
    <tr>
   <td>Adultos:</td>
   <td><input name="ctdad_adult" type="text" id="ctdad_adult"></td>
   <td>Generadora Energia:</td>
   <td>
   <label>
   <input type="radio" name="energia" value="si" id="e_0" >si
   <input type="radio" name="energia" value="no" id="e_1" >no
   </label>
   </td>
   </tr>
   </table>
      <p><button class="next">Next »</button></p>
</div>
 
<!-- P1 -->        
<div style="display: block;">
<table width="600">
  <tr>
    <td width="300">
 
 <table width="300">
 <tr>
<td colspan="2"><center>Atracciones</center></td>
</tr>
<?php echo "
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='atracc'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>"; }?>
    </table>
 
<td width="300"><table width="300">
<tr>
<td colspan="2"><center>Promocionales</center></td>
</tr>
<?php echo
" 
  <tr>
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='promo'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>
  ";
}
?>
    </table></td></td>
  </tr>
</table>
    <label>
    <p><button class="prev">« Prev</button>
    <button class="next">Next »</button></p>
   </label>
</div>
 
<!-- P2-->                
<div style="display: block;">
<table width="600">
  <tr>
    <td width="300">
 
 <table width="300">
 <tr>
<td colspan="2"><center>Alimentos</center></td>
</tr>
<?php echo "
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='alim'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>"; }?>
    </table>
 
<td width="300"><table width="300">
<tr>
<td colspan="2"><center>Bebidas</center></td>
</tr>
<?php echo
" 
  <tr>
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='beb'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>
  ";
}
?>
    </table></td></td>
  </tr>
</table>
<label>
    <p><button class="prev">« Prev</button>
    <button class="next">Next »</button></p>
 
   </label>
</div>
 
<!-- P3 -->                
<div style="display: block;">
<table width="600">
  <tr>
    <td width="300">
 
 <table width="300">
 <tr>
<td colspan="2"><center>Festejos</center></td>
</tr>
<?php echo "
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='fest'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>"; }?>
    </table>
 
<td width="300"><table width="300">
<tr>
<td colspan="2"><center>Festejos</center></td>
</tr>
<?php echo
" 
  <tr>
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>
  ";
}
?>
    </table></td></td>
  </tr>
</table>
<label>
    <p><button class="prev">« Prev</button>
    <button class="next"  >Next »</button></p>
 
   </label>
</div>
 
<!-- P4 -->                
<div style="display: block;">
<table width="600">
  <tr>
    <td width="300">
  <table width="300">
 <tr>
<td colspan="2"><center>Entretenimiento</center></td>
</tr>
<?php echo "
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='entret'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>"; }?>
    </table>
 
<td width="300"><table width="300">
<tr>
<td colspan="2"><center>Entretenimiento</center></td>
</tr>
<?php echo
" 
  <tr>
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>
  ";
}
?>
    </table></td></td>
  </tr>
</table>
<label>
    <p><button class="prev">« Prev</button>
    <button class="next" >Next »</button></p>
 
   </label>
</div>
 
<!-- P5 -->                
<div style="display: block;">
<table width="600">
  <tr>
    <td width="300">
 
 <table width="300">
 <tr>
<td colspan="2"><center>Decoración</center></td>
</tr>
<?php echo "
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
    $rs = mysql_query("SELECT * FROM coti where categoria='decor'");
    while ($result = mysql_fetch_array($rs)) {
    $categoria = $result['categoria'];
    $producto = $result['producto'];
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>"; }?>
    </table>
 
<td width="300"><table width="300">
<tr>
<td colspan="2"><center>Decoración</center></td>
</tr>
<?php echo
" 
  <tr>
  <td width=\"150\">Producto</td>
  <td width=\"100\">Seleccionar</td>  
  </tr>
  <tr>";
echo
"           
   <td>$producto</td>
   <td><input name=\"atracc\" type=\"checkbox\" value=\"\"></td> 
   </tr>
  ";
}
?>
    </table></td></td>
  </tr>
</table>
<label>
    <p><button class="prev">« Prev</button>
<input type="submit" value="Cotizar"/>
   </label>
</div>
</div>
</div>
</form>
 
<script>
$(function() {
    // get container for the wizard and initialize its exposing
    var wizard = $("#wizard");
 
// enable exposing on the wizard
    wizard.click(function() {
        $(this).load();
    });
    
    // enable tabs that are contained within the wizard
    $("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {
        /* now we are inside the onBeforeClick event */
    });
 
    // get handle to the tabs API
    var api = $("ul.tabs", wizard).data("tabs");
 
    // "next tab" button
    $("button.next", wizard).click(function() {
        api.next();
    });
 
    // "previous tab" button
    $("button.prev", wizard).click(function() {
        api.prev();
    });
 
});
</script>
</div>
</div>
</div>
</body>
</html>
 

Será que como lo tengo no funciona lo que me indicaste?

[livemusic]

Haber dime que no te sale para poderte ayudar =P ¡...

[livemusic]

Posibles problemas ..

1). Puede q no funcione el Ajax

---- jquerytools : no incluya JQUERY....
--> mirar aqui http://flowplayer.org/tools/download/index.html
// De ser asi mejor trabajalo por separado

----------------------------------------------------------------------------------------------

Código Javascript:

<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1.6.1");
</script>
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
 

----------------------------------------------------------------------------------------------

2). Que Jquery no reconosca eeeee tus consultas MYSQL..

Para eso usaremos el.... setTimeout

Código Javascript:

setTimeout(function(){
$(".a").hide();
 
$(".b").show();
 
},5000);
 

//////// Esta funcion es muy importante por que detiene por asi decirlo nuestras funciones JS, para que el DOOM termine de cargar ... espero no marearte mi objetivo no es ese, tendrias que testearlos con el FIREBUG para poder saber donde esta el error.

Saludos espero y te funcione....


----------------------------------------------------------------------------------------------

Y POR CIERTO TIENES ERRORES EN PHP

REVISA LAS LINEAS :::

/// NO TIENEN INICIO ....
246 -----> }
300 -----> }
355 -----> }

[kimmy]

livemusic gracias por tu tiempo para ayudarme a resolver esto, pero creo que debo estudiar muchisimo jquery y ajax porque no entiendo casi nada. Voy a dedicar un tiempo para aprender bien todo esto. Mil gracias ;)