Multiply PHP and jquery variables showing result in a div

Question

Multiply PHP and jquery variables showing result in a div

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a table with the Price field that is extracted from mysqli by php, and another field Quantity that is a select (values from 0 to 10) that I extract with jquery, occupy jquery to detect the change of value of the select. How do I show the result of the multiplication of both values in a div answer? Sure, without reloading the page.

<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>

Greetings and thanks

jquery php

asked by Mario Campos 01.09.2018 в 22:49

source

2 answers

140: invalid card owner, Market paid, Associate card to Blank form. It does not work

score 0 · Answer 1

You can try to use the Onchange event, this causes each selected option of a < .select > execute a function, this will cause your amount to change each time you select a different amount:

<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>

Then with 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>

Greetings

score 0 · Answer 2

You can try this jQuery function:

<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>

What it does is load the text of precio into the variable #ant01_precio and convert it to numerical value through the function parseFloat() . Then load in the variable cantidad the value of the selector select[name=ant01] and finally multiply them in the variable resultado . Then insert it with the function html() in another field with id #resultado .

In the table you have to leave the single value field and add one where the result is displayed:

<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>