Skip to main content
se añadieron 119 caracteres en el cuerpo
Origen Enlace

primeramentePrimeramente quiero decir que no soy experto en javascript, lo que quiero hacer es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item automaticamente en el input total, y a medida que yo vaya agregando un plan en unala tabla, no se como hacerlo he estado buscado por mucho información por internet y necesito ayuda.

$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});

De aqui hago una consulta php para los planes y un boton que agrega el plan

<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                    
                </tbody>
            </table>
 
        </fieldset>

primeramente quiero decir que no soy experto en javascript, lo que quiero es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item, a medida que yo vaya agregando en una tabla, no se como hacerlo he buscado por mucho por internet y necesito ayuda.

$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});
<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                    
                </tbody>
            </table>
 
        </fieldset>

Primeramente quiero decir que no soy experto en javascript, lo que quiero hacer es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item automaticamente en el input total, y a medida que yo vaya agregando un plan en la tabla, no se como hacerlo he estado buscado mucho información por internet y necesito ayuda.

$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});

De aqui hago una consulta php para los planes y un boton que agrega el plan

<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                </tbody>
            </table>
</fieldset>
se añadió 1 carácter en el cuerpo
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70
$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});
Planesquery($query);?>Planes:">Agregar
<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                    
                </tbody>
            </table>

        </fieldset>
$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});
Planesquery($query);?>Planes:">Agregar
        <table id="tabla">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Plan</th>
                    <th>Valor</th>
                    <th>Cantidad</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody id="tablaplan">
                
            </tbody>
        </table>

    </fieldset>
$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});
<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                    
                </tbody>
            </table>

        </fieldset>
Origen Enlace

Total automatico con jquery en una tabla

primeramente quiero decir que no soy experto en javascript, lo que quiero es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item, a medida que yo vaya agregando en una tabla, no se como hacerlo he buscado por mucho por internet y necesito ayuda.

$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});
Planes query($query); ?> Planes: "> Agregar
        <table id="tabla">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Plan</th>
                    <th>Valor</th>
                    <th>Cantidad</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody id="tablaplan">
                
            </tbody>
        </table>

    </fieldset>