Could you help me as soon as, how to make that when I enter a value in a first input, in the two remaining ones the following operations are performed: In the second input the multiplication operation and in the last one the addition of the first 2.
To be more explanatory, when I enter a value in base , it multiplies me by a percentage and shows it to me in calculate vat , as well as, it shows me a sum of the value entered in base + the result of the multiplication that gave in calculate vat . all this in 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>
Here I attach the complete code:
@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
operation.js file
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);
});
you can do it with javascript.
example
You could try something like:
What the js does is that when the "base" element changes its value, it will update the value of the "iva" element and the "sptotal" element.