Estoy creando un formulario de reserva para un grupo de hoteles. Cada hotel tiene una página de oferta especial, a la que se puede acceder agregando el parámetro &ratePlanID=xxx a la URL de solicitud.

¿Cómo puedo agregar ratePLanID dinámicamente cuando un usuario selecciona el hotel de una lista desplegable?

Intenté escribir una función que establezca el valor de un campo de entrada con el ratePlanID correcto cuando un usuario selecciona el hotel, pero no puedo hacer que funcione.

Esto es lo que se me ocurrió: http://jsbin.com/oduhet/3 / edit # javascript, html, live

¿Alguna idea de lo que hice mal aquí u otra forma de lograr esto?

0
Mattvic 1 sep. 2011 a las 13:30

4 respuestas

La mejor respuesta

Creo que el problema está en tu declaración case, deberías buscar valores de cadena (los valores son cadenas no Ints).

Como:

switch(hotel)
    {
      case '15205': 
        $('[name=ratePlanID]').val(1);
        break;
      case '15206': 
        $('[name=ratePlanID]').val(2);
        break;
          case '15207': 
        $('[name=ratePlanID]').val(3);
        break;
    }
0
m90 1 sep. 2011 a las 09:35

Unas pocas cosas. Estoy usando una versión mucho más nueva de JQuery ya que no estoy seguro de qué falta v1.0.

Agrego un oyente a la lista de selección usando jQuery DESPUÉS de que el DOM está listo para ser manipulado. Esto se hace agregando un oyente al 'documento' que espera el evento 'listo' que, cuando se dispara, ejecutará la función pasada al oyente. También le he dado al campo de entrada la identificación ratePlanInput para que pueda referirme a él en JavaScript.

<!DOCTYPE html><html><head>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {    // add listener for document ready
    $('#destination').change(function() {     //add a listener for change
      var selectedValue = $(this).find(":selected").val();
      $('#ratePlanInput').val(selectedValue);
    });

  });


</script>

</head><body>


<form action="http://www.example.com" method="get">

  <select name="hotelID" id="destination">
    <option value="" class="first_option" selected="selected" disabled="disabled">Select a property:</option> 
    <option value="15205">City Hotel</option> 
    <option value="15206">Beach Hotel</option>
    <option value="15207">Business Hotel</option> 
  </select>

  <input type="text" name="ratePlanID" value="" id="ratePlanInput" />           

  <button type="submit">Check availability</button>     

</form>  


</body></html>
0
achow 1 sep. 2011 a las 09:51
$(document).ready(function() {
  $('#destination').change(function() {
    var hotel = $('#destination').val();
   $('[name=ratePlanID]').val(hotel);
  });
});

Reemplace esto en su código javascript

Y para cambiar de caja

$(document).ready(function() {
  $('#destination').change(function() {
    var hotel = $('#destination').val();
   switch(hotel)
{
  case '15205': 
    $('[name=ratePlanID]').val('1');
    break;
  case '15206': 
    $('[name=ratePlanID]').val('2');
    break;
      case '15207': 
    $('[name=ratePlanID]').val('3');
    break;
}

  });
});
0
Pathik Gandhi 1 sep. 2011 a las 09:35

Su declaración de "caso" debe buscar "cadenas", no "ints". Poner '' alrededor de cada caso.

0
pasawaya 2 ago. 2012 a las 06:58