0

Tengo una tabla con el campo Precio que se extrae de mysqli por php, y otro campo Cantidad que es un select (valores del 0 al 10) que los extraigo con jquery, ocupar jquery para detectar el cambio de valor del select. ¿Cómo muestro el resultado de la multiplicación de ambos valores en un div respuesta? Claro, sin recargar la página.

<script>
$(document).ready(function(){
	$("select[name=ant01]").change(function(){
            alert($('select[name=ant01]').val());
        });
});
</script>
<table class="table">
   <thead>
<tr>
	<th>Nombre/Descripción</th>
	<th>Cant</th>
	<th>Precio</th>
</tr>
   </thead>
   <tbody>
<tr>
	<td><b>Antojitos</b></td>
	<td>
        <div class="form-group">
		  <label for="sel1">Cant:</label>
		  <select class="form-control" name="ant01">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
		  </select>
		</div>
	</td>
	<td id="ant01_precio">
       <?php echo $variable_php_precio; ?>
	   <div id="respuesta"></div>
	</td>
</tr>
   </tbody>
</table>

Saludos y gracias

1
  • Buenas! no me queda del todo claro lo que buscas, vos tenes una tabla con n elementos? o es sólo un renglón con 2 valores que tenes que multiplicar? Commented el 1 sept. 2018 a las 21:42

2 respuestas 2

0

Puedes intentar usar el evento Onchange, esto hace que cada opción seleccionada de un elemento <.select> ejecute una función, esto hará que tu importe cambie cada vez que selecciones una cantidad diferente:

<table class="table">
 <thead>
  <tr>
   <th>Nombre/Descripción</th>
   <th>Cant</th>
   <th>Precio</th>
   <th>Importe</th>
  </tr>
</thead>
<tbody>
<tr>
 <td><b>Antojitos</b></td>
 <td>
    <div class="form-group">
      <label for="sel1">Cant:</label>
      <select class="form-control" id="ant01" onchange="Calcular()">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
 </td>
 <td id="ant01_precio">
    <?php echo $variable_php_precio; ?>
 </td>
 <td id="respuesta"></td>
</tr>
</tbody>
</table>

Luego con jquery

<script type="text/javascript" src="jquery.min.js"></script>
<script>
  function Calcular () {
   cantidad = $('#ant01').val();  //Capturamos los valores por el id
   precio = $('#ant01_precio').text();
   importe = cantidad*precio;
   $('#respuesta').html(importe);
 }
</script>

Saludos

2
  • Estimado Aldair, el resultado importe, cómo lo guardo en una variable PHP para usarlo en la plantilla posteriormente? Commented el 1 sept. 2018 a las 22:57
  • Hola Mario, Podrías hacerlo mediante Ajax Commented el 1 sept. 2018 a las 23:01
0

Podés probar con esta función de jQuery:

<script>
$(document).ready(function(){
    $("select[name=ant01]").change(function(){
        var precio = parseFloat($( "#ant01_precio" ).text()),
            cantidad = $('select[name=ant01]').val(),
            resultado = precio*cantidad;
            $( "#resultado" ).html(resultado);
        });
});
</script>

Lo que hace es cargar en la variable precio el texto de #ant01_precio y convertirlo a valor númerico a través de la función parseFloat(). Luego carga en la variable cantidad el valor del selector select[name=ant01] y finalmente las multiplica en la variable resultado. Luego lo inserta con la función html() en otro campo con id #resultado.

En la tabla tenés que dejar el campo de valor único y agregar uno donde se muestre el resultado:

<table class="table">
    <thead>
        <tr>
            <th>Nombre/Descripción</th>
            <th>Cant</th>
            <th>Precio</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b>Antojitos</b></td>
            <td>
                <div class="form-group">
                  <label for="sel1">Cant:</label>
                  <select class="form-control" name="ant01">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
                </div>
            </td>
            <td id="ant01_precio">10.50</td>
            <td id="resultado"></td>
        </tr>
    </tbody>
</table>

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.