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