0

introducir la descripción de la imagen aquí

me podrían ayudar en cuanto, como hacer que cuando ingrese un valor en un primer input, en los dos restantes se hagan las siguientes operaciones: En el segundo input la operación de multiplicación y en el ultimo la suma de los 2 primeros.

Para ser mas explicativo, cuando introduzca un valor en base me multiplique por un porcentaje y me lo muestre en calcular iva, así como también, me muestre una suma del valor introducido en base + el resultado de la multiplicación que dio en calcular iva. todo esto en en Laravel version 5.1.46.

<div id="form1" class="col-md-4 form-group">
        <label for="base">Base*</label>
        <input type="text" id="base" class="form-control">
    </div>
    
<div id="form1" class="col-md-4 form-group">
        <label for="iva">Calcular iva*</label>
        <input type="text" id="iva" value=""   class="form-control">
    </div>
     <div  class="col-md-4 form-group">
        <label for="sptotal">Calcular Total*</label>
        <input type="text" id="sptotal" value="" class="form-control">
    </div>

aquí anexo el código completo :

@extends('base')

@section('title')
    Nueva Factura
@stop

@section('content')
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <h3 class="page-header">Creación de Facturas</h3>
        </div>
    </div>
        <div class="row">
        <div class="col-md-2 form-group">
            <label for="number">Número*</label>
            <input type="text" id="number" class="form-control" autofocus placeholder="Numero de Factura" readonly="readonly">
            <input type="hidden" id="Stoken" value="{{ csrf_token() }}">
        </div>
       <div class="col-md-2 form-group">
            <label for="date">Fecha* (DD/MM/AA)</label>
            <input type="date" id="date" value="" class="form-control">
        </div>
        
         <div class="col-md-4 form-group">
             <label for="tercero_id">Tercero*</label>
                            <select id="tercero_id" class="form-control">
                                <option value="">Seleccione Tercero*</option>
                                <?php 
                                foreach($contra as $contras){
                                    if(empty($contras->business_name)){
                                        echo ' <option value="'.$contras->id.'">'.$contras->firts_name.' '.$contras->last_name.' '.$contras->apellido1.' '.$contras->apellido2.'</option>';
                                    }else{
                                        echo ' <option value="'.$contras->id.'">'.$contras->business_name.'</option>';
                                    
                                    }
                                }
                                ?>
                                        
                            </select> 
                        </div>
        
            
         <div class="col-md-4 form-group">
            <label for="nit">Nit*</label>
            <input type="text" id="nit" class="form-control">
        </div>
        
    </div>
    
    
    <br>
    
        <div id="form1" class="col-md-4 form-group">
            <label for="base">Base*</label>
            <input type="text" id="base" class="form-control">
        </div>
        
    <div id="form1" class="col-md-4 form-group">
            <label for="iva">Calcular iva*</label>
            <input type="text" id="iva" value=""   class="form-control" >
        </div>
         <div  class="col-md-4 form-group">
            <label for="sptotal">Calcular Total*</label>
            <input type="text" id="sptotal" value="" class="form-control">
        </div>
   
    
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <h3 class="page-header">Retenciones</h3>
        </div>
    </div>
    
    
    
    <div class="row">
        
         <div class="col-md-4 form-group">
            <label for="retencion">Retención*</label>
            <input type="text" id="retencion" value="" class="form-control">
        </div>
         <div class="col-md-4 form-group">
            <label for="reteiva">Rete-iva*</label>
            <input type="text" id="reteiva" value="" class="form-control">
        </div>
        <div class="col-md-4 form-group">
            <label for="retetotal">Retención Total*</label>
            <input type="text" id="retetotal" value="" class="form-control">
        </div>
        <br>
        <br>
    </div>
    <div class="row">
         <div class="col-md-6 form-group">
            <label for="resultadofinal">Resultado- Final*</label>
            <input type="text" id="resultadofinal" value="" class="form-control">
        </div>
    </div>
    
        <div class="row">

        <div class="col-md-8 form-group">
            <div class="row">
                <div class="col-md-2 form-group">
                <br><input type="submit" class="btn btn-sm btn-success form-control" onclick="addDatosFactura()" id="btnAddIngreso" value="Agregar">
                </div>
                <div class="col-md-2 form-group">
               <br><input type="submit" class="btn btn-sm btn-success form-control" onclick="guardarBatch()" value="Crear">
               </div>
                
                
            </div>
        </div>
    </div>
    <br>
   
    
 

@stop
@section('js')

    <script src="{{ url('/js/accounting.min.js') }}"></script>
    <script src="{{ url('/js/accounting.min.js') }}"></script>
    <script src="{{ url('/js/admin/facturas/operation.js') }}"></script>
    <script src="{{ url('/js/admin/facturas/create.js') }}"></script>
    
    
    
@stop

archivo operation.js

function operation() {
const base = document.getElementById("base");
const iva = document.getElementById("iva");
const sptotal = document.getElementById("sptotal");

base.addEventListener("change", (e) => {
  iva.value = parseInt(base.value) * 0.19;
  sptotal.value = parseInt(base.value) + parseInt(iva.value);
});
5
  • Buen día, Puedes agregar más información sobre el problema? Puedes mostrar el código que tienes hasta el momento? Estas utilizando componentes o una vista? el 24 ene. 2022 a las 14:33
  • Una vista con varios divs para cada uno de los inputs, la idea es que las operaciones se hagan dinamicamente al momento de insertar solo el valor de la base. el 24 ene. 2022 a las 14:45
  • Puedes poner también la versión de Laravel que estás usando? Ya que esto es un poco diferente entre versiones el 24 ene. 2022 a las 14:53
  • claro la versión es 5.1.46 el 24 ene. 2022 a las 15:04
  • alli actualize el archivo de la vista y el opertion .js. es todo lo que utilizo el 24 ene. 2022 a las 15:46

2 respuestas 2

0

Podrías intentar algo como:

const base = document.getElementById("base");
const iva = document.getElementById("iva");
const sptotal = document.getElementById("sptotal");

base.addEventListener("change", (e) => {
  iva.value = parseInt(base.value) * 0.19;
  sptotal.value = parseInt(base.value) + parseInt(iva.value);
});
<div id="form1" class="col-md-4 form-group">
  <label for="base">Base*</label>
  <input type="text" id="base" class="form-control">
</div>
<div id="form1" class="col-md-4 form-group">
  <label for="iva">Calcular iva*</label>
  <input type="text" id="iva" value=""   class="form-control">
</div>
<div  class="col-md-4 form-group">
  <label for="sptotal">Calcular Total*</label>
  <input type="text" id="sptotal" value="" class="form-control">
</div>

Lo que hace el js es que cuando el elemento "base" cambie su valor, actualizará el valor de elemento "iva" y del elemento "sptotal".

7
  • no me funciona, nose si es porque tiene una seccion de los archivos de javascript aqui meti la funcion de operation stop @section('js') <script src="{{ url('/js/accounting.min.js') }}"></script> <script src="{{ url('/js/accounting.min.js') }}"></script> <script src="{{ url('/js/admin/facturas/operation.js') }}"></script> <script src="{{ url('/js/admin/facturas/create.js') }}"></script> stop el 24 ene. 2022 a las 15:18
  • Te lanza algún error la consola? Podrías probar primero añadiendo el script al final del HTML (antes del primero stop) para descartar que sea un problema en el llamado del js. </div> <br> <script> const base = document.getElementById("base"); const iva = document.getElementById("iva"); const sptotal = document.getElementById("sptotal"); base.addEventListener("change", (e) => { iva.value = parseInt(base.value) * 0.19; sptotal.value = parseInt(base.value) + parseInt(iva.value); }); </scritpt>
    – bLEx
    el 24 ene. 2022 a las 15:26
  • si, 404 (Not Found) net::ERR_ABORTED 404 (Not Found) Uncaught ReferenceError: require is not defined at npm.js:2:1 Unexpected end of input HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE el 24 ene. 2022 a las 15:28
  • Pareciera ser error de otro js
    – bLEx
    el 24 ene. 2022 a las 15:30
  • tengo otros js pero solo al usar un onclick el 24 ene. 2022 a las 15:36
0

puedes hacerlo con javascript.

ejemplo

let iva = document.getElementById("iva");
let sptotal = document.getElementById("sptotal");

function operation(val){
  // si queremos el 7%
  // el metodo toFixed(2) es para obtener solo 2 decimales
  iva.value = (val * 0.07).toFixed(2);
  sptotal.value = (val * 1.07).toFixed(2);
  
}
<div id="form1" class="col-md-4 form-group">
            <label for="base">Base*</label>
            <input type="text" id="base" class="form-control" onkeyup="operation(this.value);"/>
        </div>
        <!-- utilizamos onkeyup para que cambia sin presionar enter -->
    <div id="form1" class="col-md-4 form-group">
            <label for="iva">Calcular iva*</label>
            <input type="text" id="iva" value=""   class="form-control" onchange="operation(this.value);"/>
        </div>
         <div  class="col-md-4 form-group">
            <label for="sptotal">Calcular Total*</label>
            <input type="text" id="sptotal" value="" class="form-control">
        </div>

1
  • nose como implementarlo, estoy llamando el archivo operation, en la section que es donde esta el srcipt que ejecuta la accion pero no hace nada, nose que estoy haciendo mal el 24 ene. 2022 a las 15:24

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.