Javascript y php en conjunto

omar_gutierrez · #1 (**permalink**) 06/08/2014, 12:03

Buenas, se me ha presentado lo siguiente...

Hay un sistema de captura de boletos, unicamente son 50 por funcion (4 funciones en total = 200 boletos)

me las ingenie para que al momento de capturar boletos (fecha, hora y cantidad) vayan siendo sompreadas y no puedan seleccionarce segun los resultados de la base de datos. La solucion la plantie de esta forma:

Un <select> para seleccionar fecha, dependiendo de que fecha, sigue uno de 2 posibles <select>, y asu vez, dependiendo de la hora, sigue 1 de 4 posibles <select> para seleccionar cantidad de boletos.

El problema esta en que cuando hago el submit, no me trae los valores de los <select>, no lo inserta en la base de datos...

les dejo los codigos:

formulario:

omar_gutierrez · #2 (**permalink**) 06/08/2014, 12:06

Código PHP:

 
<!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>Formulario</title> 
 
 
<link href="http://mipagina/mimicrositio/dist/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="http://mipagina/mimicrositio/dist/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://mipagina/mimicrositio/dist2/css/bootstrapValidator.css" rel="stylesheet" /> 
 
<script src="http://mipagina/mimicrositio/dist/js/jquery-1.10.2.min.js"></script> 
<script src="http://mipagina/mimicrositio/dist2/js/bootstrapValidator.js"></script> 
 
 
<style type="text/css"> 
body{ 
    border:0; 
     
} 
#contenedor{ 
    width:760px;  
    margin:auto; 
         
} 
 
#contenedor p{ 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-size:16px; 
    font-weight:lighter; 
} 
 
</style> 
</head> 
 
<?     
    $mysqli = new mysqli("localhost", "mibd", "mipass", "miuser", mipuerto); 
     
    $query_suma1 = $mysqli->query("SELECT sum(boletos) FROM participantes WHERE fecha = '2014-08-06' AND hora = '4pm'"); 
    $suma1_row = $query_suma1->fetch_array(MYSQLI_NUM); 
     
    $query_suma2 = $mysqli->query("SELECT sum(boletos) FROM participantes WHERE fecha = '2014-08-06' AND hora = '7pm'"); 
    $suma2_row = $query_suma2->fetch_array(MYSQLI_NUM); 
     
    $query_suma3 = $mysqli->query("SELECT sum(boletos) FROM participantes WHERE fecha = '2014-08-07' AND hora = '4pm'"); 
    $suma3_row = $query_suma3->fetch_array(MYSQLI_NUM); 
     
    $query_suma4 = $mysqli->query("SELECT sum(boletos) FROM participantes WHERE fecha = '2014-08-07' AND hora = '7pm'"); 
    $suma4_row = $query_suma4->fetch_array(MYSQLI_NUM); 
     
    $r1 = 50 - $suma1_row[0]; 
    $r2 = 50 - $suma2_row[0]; 
    $r3 = 50 - $suma3_row[0]; 
    $r4 = 50 - $suma4_row[0]; ?> 
<body> 
<div style="width:760px; height:20px; padding:10px; margin:auto; "> 
 
</div> 
<? if($_GET['ok']=='ok'){ ?> 
 
    <script type="text/javascript" language="javascript">alert("Su solicitud a quedado registrada,  recibirá un correo con las instrucciones para recoger sus boletos.  Gracias por participar ");</script> 
 
<? } 
if($_GET['ok']=='existente'){ ?> 
 
    <script type="text/javascript" language="javascript">alert("Usted ya ha registrado una solicitud");</script> 
 
<? } ?> 
 
 
        <div class="panel panel-primary" id="contenedor"> 
         
            <div class="panel-heading"> 
                <h3 class="panel-title">Viva Pinocho - Solicitud de boletos</h3> 
                 
                
 
                 
            </div> 
            <div class="panel-body"> 
             
             <p align="center">Regístrese para obtener boletos para el evento de xxxxxxx que se presentará este 45 y 79 de miercoles en el patio de atras con funciones  a las 4:00pm y a las 7:00PM <p> 
<p align="center">Para participar únicamente se requiere que registres tus datos y el número de boletos que necesitas  y listo tendrás un espacio reservado para tu familia</p> 
<p align="center">Importante: No se registre si no tiene la seguridad de poder asistir al evento, en ese caso deje la oportunidad a otra familia</p> 
<p  align="center" style="color:#F00;"><b>Recibirá un correo con la instrucciones para recoger sus boletos<b> </p> 
 
    <? 
    if($r1 >= 1){ 
    echo '<p align="center">Boletos disponibles para la funcion del miércoles 6 de agosto a las 4pm: '.$r1.'</p>'; 
    } else { echo '<br><p align="center" style="color:#CD0000">Boletos agotados para la funcion del miércoles 6 de agosto a las 4pm</p>'; } 
     
    if($r2 >= 1){ 
    echo '<p align="center">Boletos disponibles para la funcion del miércoles 6 de agosto a las 7pm: '.$r2.'</p>'; 
    } else { echo '<p align="center" style="color:#CD0000">Boletos agotados para la funcion del miércoles 6 de agosto a las 7pm</p>'; } 
     
    if($r3 >= 1){ 
    echo '<p align="center">Boletos disponibles para la funcion del jueves 7 de agosto a las 4pm: '.$r3.'</p>'; 
    } else { echo '<p align="center" style="color:#CD0000">Boletos agotados para la funcion del jueves 7 de agosto a las 4pm</p>'; } 
     
    if($r4 >= 1){ 
    echo '<p align="center">Boletos disponibles para la funcion del jueves 7 de agosto a las 7pm: '.$r4.'</p>'; 
    } else { echo '<p align="center" style="color:#CD0000">Boletos agotados para la funcion del jueves 7 de agosto a las 7pm</p>'; } ?> 
             
            <hr /> 
            <form id="defaultForm" role="form" action="registrar.php" method="POST" enctype="multipart/form-data"> 
            <input type="hidden" class="form-control" tabindex="3" name="ipaddress" value="<?=$_SERVER['REMOTE_ADDR'] ?>" /> 
                <div class="row"> 
                       <div class="col-sm-3"><label>Nombre completo:</label> 
                    </div> 
                    <div class="col-sm-9">  
                       <input type="text" class="form-control" tabindex="1" autofocus="autofocus" name="nombre" />                    
                    </div> 
                </div> 
                <hr /> 
                <div class="row"> 
                       <div class="col-sm-3"><label>E-mail:</label> 
                    </div> 
                    <div class="col-sm-9">  
                       <input type="text" class="form-control" tabindex="2" name="emaili"  />                    
                    </div> 
                </div> 
                <hr /> 
                <div class="row"> 
                       <div class="col-sm-3"><label>Teléfono:</label> 
                    </div> 
                    <div class="col-sm-9">  
                       <input type="text" class="form-control" tabindex="3" name="telefono"  />                    
                    </div> 
                </div> 
                <hr /> 
                <div class="row"> 
                       <div class="col-sm-3"><label>Cantidad de boletos a solicitar:</label> 
                    </div> 
                    <div class="col-sm-4">  
                       <select class="form-group-sm" tabindex="4" name="fecha" id="idfecha" onChange="dias(this)"> 
                               <option selected="selected" value="">Seleccione fecha:</option> 
                            <option value="2014-08-06">Miércoles 6 de agosto</option> 
                            <option  value="2014-08-07">Jueves 7 de agosto</option> 
                       </select>                    
                    </div> 
                    <div class="col-sm-3">  
                       <select style="display:none;" class="form-group-sm" tabindex="5" name="hora" id="idhora1" onChange="horas1(this)" > 
                               <option selected="selected" value="">Elija una función:</option> 
                            <option value="4pm">4:00 pm</option> 
                            <option value="7pm">7:00 pm</option> 
                       </select> 
                        
                       <select style="display:none;" class="form-group-sm" tabindex="6" name="hora" id="idhora2" onChange="horilla(this)" > 
                               <option selected="selected" value="">Elija una función:</option> 
                            <option  value="4pm">1:00 pm</option> 
                            <option  value="7pm">6:00 pm</option> 
                       </select> 
                    </div> 
                    <div class="col-sm-2">  
                       <select style="display:none;" class="form-group-sm" tabindex="7" name="boletos" id="idboletos1" > 
                               <option selected="selected" value="">Boletos:</option> 
                            <option  value="1">1 boleto</option> 
                       </select>   
                       <select style="display:none;" class="form-group-sm" tabindex="8" name="boletos" id="idboletos2" > 
                               <option selected="selected" value="">Boletos:</option> 
                            <option  value="1">1 boleto</option> 
                            <option value="2">2 boletos</option> 
                       </select>  
                       <select style="display:none;" class="form-group-sm" tabindex="9" name="boletos" id="idboletos3" > 
                               <option selected="selected" value="">Boletos:</option> 
                            <option  value="1">1 boleto</option> 
                            <option  value="2">2 boletos</option> 
                            <option  value="3">3 boletos</option> 
                       </select>   
                       <select style="display:none;" class="form-group-sm" tabindex="10" name="boletos" id="idboletos4" > 
                               <option selected="selected" value="">Boletos:</option> 
                            <option value="1">1 boleto</option> 
                            <option value="2">2 boletos</option> 
                            <option value="3">3 boletos</option> 
                            <option  value="4">4 boletos</option> 
                       </select>                  
                    </div> 
                </div> 
                 <hr /> 
                <div class="row"> 
                       <div class="col-sm-3"><label>&nbsp;</label> 
                    </div> 
                    <div class="col-sm-2">  
                       <button name="enviar" value="send" type="submit" class="btn btn-primary">Enviar solicitud</button>                    
                    </div> 
                     
                </div> 
                </form> 
            </div> 
             
        </div> 
         
         
</body>

omar_gutierrez · #3 (**permalink**) 06/08/2014, 12:07

resto de formulario:

Código PHP:

  <script type="text/javascript"> 
<!--------------------------------------- ------------> 
function dias(sel) { 
if (sel.value=="2014-08-06"){ 
     
           h1 = document.getElementById("idhora1"); 
           h1.style.display = "block"; 
 
           h2 = document.getElementById("idhora2"); 
           h2.style.display = "none"; 
           bol1.value=""; 
                   
           bol1 = document.getElementById("idboletos1"); 
           bol1.style.display="none"; 
           bol1.value=""; 
           
           bol2 = document.getElementById("idboletos2"); 
           bol2.style.display="none"; 
           bol2.value=""; 
           
           bol3 = document.getElementById("idboletos3"); 
           bol3.style.display="none"; 
           bol3.value=""; 
           
           bol4 = document.getElementById("idboletos4"); 
           bol4.style.display="none"; 
           bol4.value=""; 
            
      } else if(sel.value=="2014-08-07"){ 
 
           h1 = document.getElementById("idhora1"); 
           h1.style.display="none"; 
           h1.value=""; 
            
           h2 = document.getElementById("idhora2"); 
           h2.style.display = "block"; 
            
           bol1 = document.getElementById("idboletos1"); 
           bol1.style.display="none"; 
           bol1.value=""; 
           
           bol2 = document.getElementById("idboletos2"); 
           bol2.style.display="none"; 
           bol2.value=""; 
           
           bol3 = document.getElementById("idboletos3"); 
           bol3.style.display="none"; 
           bol3.value=""; 
         
           bol4 = document.getElementById("idboletos4"); 
           bol4.style.display="none"; 
           bol4.value=""; 
      } 
} 
<!--------------------------------------- ------------> 
function horas1(xxx) { 
if (xxx.value=="4pm"){ 
     
          bol1 = document.getElementById("idboletos1"); 
          bol1.style.display = "block"; 
            
          bol2 = document.getElementById("idboletos2"); 
          bol2.style.display = "none"; 
          bol2.value=""; 
 
      } else if(xxx.value=="7pm") { 
 
          bol1 = document.getElementById("idboletos1"); 
          bol1.style.display = "none"; 
          bol1.value=""; 
 
 
          bol2 = document.getElementById("idboletos2"); 
          bol2.style.display = "block"; 
      } 
} 
<!--------------------------------------- ------------> 
function horilla(zzz) { 
if (zzz.value=="4pm") { 
 
          bol3 = document.getElementById("idboletos3"); 
          bol3.style.display = "block"; 
 
          bol4 = document.getElementById("idboletos4"); 
          bol4.style.display = "none"; 
          bol4.value=""; 
 
      }else if (zzz.value=="7pm"){ 
 
          bol3 = document.getElementById("idboletos3"); 
          bol3.style.display = "none"; 
          bol3.value=""; 
 
          bol4 = document.getElementById("idboletos4"); 
          bol4.style.display = "block"; 
 
      } 
} 
<!--------------------------------------- ------------> 
</script> 
 
 
<script type="text/javascript"> 
$(document).ready(function() { 
 
 
    $('#defaultForm').bootstrapValidator({ 
//        live: 'disabled', 
        message: 'This value is not valid', 
        feedbackIcons: { 
            valid: 'glyphicon glyphicon-ok', 
            invalid: 'glyphicon glyphicon-remove', 
            validating: 'glyphicon glyphicon-refresh' 
        }, 
        fields: { 
            nombre: { 
                validators: { 
                    notEmpty: { 
                        message: 'Debes teclear un nombre' 
                    } 
                } 
            }, 
            telefono: { 
                validators: { 
                    notEmpty: { 
                        message: 'Debes teclear un telefono' 
                    } 
                } 
            }, 
            boletos: { 
                validators: { 
                    notEmpty: { 
                        message: 'Debes seleccionar una opción' 
                    } 
                } 
            }, 
            fecha: { 
                validators: { 
                    notEmpty: { 
                        message: 'Debes seleccionar una opción' 
                    } 
                } 
            }, 
            hora: { 
                validators: { 
                    notEmpty: { 
                        message: 'Debes seleccionar una opción' 
                    } 
                } 
            }, 
            emaili: { 
                validators: { 
                    email: { 
                        message: 'The input is not a valid email address' 
                    } 
                } 
            } 
        } 
    }); 
}); 
</script> 
</html>

omar_gutierrez · #4 (**permalink**) 06/08/2014, 12:08

registrar.php:

Código PHP:

  <?php 
     
    if(isset($_POST['enviar'])=='send'){ 
         
    $mysqli = new mysqli("localhost", "mxdiario_boleton", "i(!54.+l&,P1", "mxdiario_boletos", 3306); 
    if ($mysqli->connect_errno) { 
    printf("Connect failed: %s\n", $mysqli->connect_error); } 
     
    $select = $mysqli->query("SELECT * FROM participantes"); 
    while($select_row = $select->fetch_array(MYSQLI_ASSOC)){ 
     
        if($_POST['emaili']==$select_row['email'] or $_POST['ipaddress']==$select_row['ipaddress']){ 
             
            echo '<script type="text/javascript">window.location="http://eldiariodigital.mx/boletos-fich/index.php?ok=existente";</script>'; 
            exit(); 
        } 
         
    } 
    $fechahora = date('Y-m-d H:i:s'); 
    $mysqli->query("INSERT INTO participantes (fh_ingreso, nombre, email, telefono, boletos, fecha, hora, ipaddress) VALUES ( 
    '".$fechahora."', 
    '".$_POST['nombre']."', 
    '".$_POST['emaili']."', 
    '".$_POST['telefono']."', 
    '".$_POST['boletos']."', 
    '".$_POST['fecha']."', 
    '".$_POST['hora']."', 
    '".$_POST['ipaddress']."')"); 
     
    header("Location: index.php?ok=ok"); 
     
    }  
?>

omar_gutierrez · #5 (**permalink**) 06/08/2014, 12:11

El codigo no esta completo, falta la validacion de cada <option> dependiendo del resultado de la base de datos, de cuantos boletos hayan disponibles, pero eso no afecta para nada.

Espero puedan hecharme la mano.

omar_gutierrez · #6 (**permalink**) 06/08/2014, 16:14

como dato extra, si selecciono 7 de agosto, 6pm (que su value verdadeo es 7pm) y cualquier cantidad de boletos (en orden, seria la segunda opcion del primer select, la segunda opcion del segundo select, y cualquier opcion del tercer select), con este patron si me guarda en la base de datos, es algo con javascript pero aun no doy con el problema

omar_gutierrez · #7 (**permalink**) 15/08/2014, 11:18

lo que termine haciendo fue validacion php, pueden llegar a ser mas pasos para el usuario, pero no hubo de otra