0

espero me puedan ayudar una vez mas.. El asunto es que debo de guardar los resultados que obtengo javascript en la base de datos. y el valor que me guarda el primer select del id="hoteles" es el precio en lugar del hotel.. y tambien requiero mostrar el precio de ninos y adultos en un input para guardalos en la db. Reservation Transport

        <select name="hotel" class="cont form-control" id="hoteles" required> <!--COMBO BOX hoteles-->
             <?php 
             $consulta = "SELECT hotel,precio From hoteles where id = id_zona";
             $query=mysqli_query($conexion,$consulta);
             while ($f=mysqli_fetch_array($query,MYSQLI_ASSOC)){ 
                $id = $f['id'];
                $hotel = $f['hotel'];
                $precio = $f['precio'];
            ?>                      
               <option  value="<?php echo $precio ?>">  <?php  echo $hotel; ?> </option>
            <?php            
                 }         
            ?>        
         </select> 
                 <p></p>

            <span id="" class="">Adults:</span>
            <select name="num_adultos" class="  form-control" id="adultos" required> 
             <?php 
             $consulta = "select * From numero_clientes";
             $query=mysqli_query($conexion,$consulta);
             while ($h=mysqli_fetch_array($query,MYSQLI_ASSOC)){ 
                $num_adult = $h['numero_personas'];

            ?>                      
              <option><?php  echo $num_adult ?> </option>

            <?php           
                 }         
            ?>        
         </select> 
    <p></p>


     <label type="text"   name="pre_adulto" id="pre_adulto"></label>


     <p></p>    
             <span id="tituloCombo">Children:</span>
             <select name="num_ninos" class="contN form-control" id="ninos"> <!--COMBO BOX niños-->
             <?php 

             $consulta = "SELECT * FROM numero_clientes";
             $query=mysqli_query($conexion,$consulta);
             while ($c=mysqli_fetch_array($query,MYSQLI_ASSOC)){
                       $num_nino =$c['numero_personas']; 

            ?>                      
              <option><?php  echo $num_nino; ?> </option>
            <?php 
                 }         
            ?>        
              </select>




    <label class="titulo4" disabled name="pre_ninos"  id="pre_ninos"></label> &nbsp;<label class="titulo4">USD</label>
    <p></p>
    <span class="titulo4"> Price:&nbsp;$</span>
    <label class="titulo4" id="precio-total" disabled></label>

<------------------------> script el script no es mio ------------>

document.querySelectorAll("select").forEach(function(selector) { // funcion de multiplicar pasajeros.
     selector.addEventListener('change', function(e) {
    var price = document.querySelector("#hoteles").value;
    var nb_adults = document.querySelector("#adultos").value;
    var adu = document.querySelector("#pre_adulto  ").innerHTML = price*nb_adults;
    var nb_kids = document.querySelector("#ninos").value;
    var nin = document.querySelector("#pre_ninos").innerHTML= price*nb_kids;
    document.querySelector("#precio-total").innerHTML =  (adu+nin);
    console.log({adu, nin});
  })
});

2 respuestas 2

0

Debes de realizar una petición AJAX contra tu servidor PHP enviándole los datos que necesitas y en tu servidor tratar esta petición y devolver una respuesta. La comunicación entre cliente y servidor normalmente es en formato JSON.

Un ejemplo de AJAX en JavaScript

var req = new XMLHttpRequest();
req.open('POST', '/ruta/del/servidor', true);
var data = {}; // Aquí tus datos a enviar
req.onreadystatechange = function() {
  if (this.readyState === 4) {
    if (this.status >= 200 && this.status < 400) {
      var res = JSON.parse(this.responseText);
      // Código en caso de que haya ido bien...
    } else {
      // Código en caso de que haya ido mal...
    }
  }
};
req.send(data);
0

Lo primero, no puedes enviar el id si no lo insertas en el html de algún modo. Dado que un select, por defecto, envía su value, es el campo ideal para ello. Como también quieres almacenar el precio, pero sólo para calcular desde el javascript, vamos a guardar éste en un campo data.

Los totales de precio, como te mencioné en alguna pregunta anterior, deberías calcularlos directamente en el servidor por seguridad, pero si quieres enviarlos de todos modos, deberán estar en un campo del formulario, por ejemplo input. Como el usuario no debe poder modificarlos (aunque, insisto, es imposible evitarlo de forma segura, estamos hablando aquí únicamente de UX), les daremos el atributo readonly.

En el Javascript, cambiamos de dónde sacamos el precio (value pasa a ser getAttribute('data-price')) y dónde metemos los resultados (value en vez de innerHTML).

<form method="POST">
        <h1 id="titulo3">Reservation Transport</h1>

        <select name="hotel" class="cont form-control" id="hoteles" required> <!--COMBO BOX hoteles-->
             <?php 
             $consulta = "SELECT hotel,precio From hoteles where id = id_zona";
             $query=mysqli_query($conexion,$consulta);
             while ($f=mysqli_fetch_array($query,MYSQLI_ASSOC)){ 
                $id = $f['id'];
                $hotel = $f['hotel'];
                $precio = $f['precio'];
            ?>                      
               <option  value="<?= $id ?>" data-price="<?php echo $precio ?>">  <?php  echo $hotel; ?> </option>
            <?php            
                 }         
            ?>        
         </select> 
                 <p></p>

            <span id="" class="">Adults:</span>
            <select name="num_adultos" class="  form-control" id="adultos" required> 
             <?php 
             $consulta = "select * From numero_clientes";
             $query=mysqli_query($conexion,$consulta);
             while ($h=mysqli_fetch_array($query,MYSQLI_ASSOC)){ 
                $num_adult = $h['numero_personas'];

            ?>                      
              <option><?php  echo $num_adult ?> </option>

            <?php           
                 }         
            ?>        
         </select> 
    <p></p>


     <input type="text" readonly="readonly" name="pre_adulto" id="pre_adulto">

     <p></p>    
             <span id="tituloCombo">Children:</span>
             <select name="num_ninos" class="contN form-control" id="ninos"> <!--COMBO BOX niños-->
             <?php 

             $consulta = "SELECT * FROM numero_clientes";
             $query=mysqli_query($conexion,$consulta);
             while ($c=mysqli_fetch_array($query,MYSQLI_ASSOC)){
                       $num_nino =$c['numero_personas']; 

            ?>                      
              <option><?php  echo $num_nino; ?> </option>
            <?php 
                 }         
            ?>        
              </select>

    <input class="titulo4" readonly="readonly" name="pre_ninos"  id="pre_ninos"> &nbsp;<label class="titulo4">USD</label>
    <p></p>
    <span class="titulo4"> Price:&nbsp;$</span>
    <input class="titulo4" readonly="readonly" id="precio-total" disabled>

<------------------------> script el script no es mio ------------>

document.querySelectorAll("select").forEach(function(selector) { // funcion de multiplicar pasajeros.
     selector.addEventListener('change', function(e) {
    var price = document.querySelector("#hoteles").getAttribute("data-price");
    var nb_adults = document.querySelector("#adultos").value;
    var adu = document.querySelector("#pre_adulto  ").value = price*nb_adults;
    var nb_kids = document.querySelector("#ninos").value;
    var nin = document.querySelector("#pre_ninos")value = price*nb_kids;
    document.querySelector("#precio-total").value = adu+nin;
    console.log({adu, nin});
  })
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.