How can I dynamically change the content of input with jQuery

Question

I have this code

<script type="text/javascript">
importeReal = parseFloat({{$importe}});    
$(function() {  
    setTimeout(chequear, 1000);
});
function chequear() {
    $('input[data-denominacion]').each(function(index) {
        $(this).bind('change', function() {
            var valorInput = parseFloat($(this).val());
            var denominacion = parseFloat($(this).attr('data-denominacion'));
            if (/\D/.test(valorInput) || /\s/.test(valorInput)) {
                toastr.warning('Solo valores numericos, por favor'); 
                $(this).addClass('active');
            }
            if(/\d/.test(valorInput)) {    
                var denominacionXInputValue = valorInput * denominacion;
                importeReal = importeReal - denominacionXInputValue;
                console.log(importeReal);
                if(importeReal <= 0) {
                    toastr.warning('No puede poner mas denominaciones');
                } else {
                    toastr.info('Actualmente tienes sin ingresar' + importeReal);
                }
            }                 
            if(valorInput =='') {
                importeReal = importeReal + denominacionXInputValue;
                toastr.info('Actualmente tienes sin ingresar' + importeReal);
            } 
        });
    });        
}     
</script>

and I want to increase the import when the input is empty and decrease when I enter a value. This input is generated by blade directive, and a add a data attribute called data-denominacion. Sorry for my English, my native language is Spanish.

Thanks

Answer 1

I think you can do this easier with .on('input', function() {

Using input will cause the event to fire any time there is a change to the input element (text input, deleting, right clicking, pasting, etc) as opposed to the change event you are using now which will only fire when the input loses focus and the value has been changed.

You were using setTimeout() to call a function every second, which then binds a change event to each input element (again, every second, rebinding the events for some reason?). Obviously an inefficient and redundant waste of resources, and a great example of what not to do.

Can you try this code? I've set it to fire on any change (using 'input' instead of 'change') on any input element on the page, then using .attr() to check if the data element exists on that input. If so, it proceeds with the contents of your original function (chequear).

As for the importeReal variable, still not exactly sure what you want here, but I put the original value in a hidden input element using the data attribute (just for fun, might need to use value if that doesn't work). In the logic it takes the input value and multiplies by denomination (as before), then subtracts from the original value each time, so it doesn't just keep subtracting over and over again as it was before. If the input is blank, your code was trying to use a variable that could have not existed of been out of scope, so eliminated that by just changing importeReal variable back to the orginal by grabbing that data from the hidden input (so putting it back to the orginal value when we loaded the page). Again, not super clear on what you want to do with that logic, but took my best guess. Let me know if you have any issues.

<input type="hidden" id="ireal" data-impreal="0">
<script type="text/javascript">
importeReal = parseFloat({{$importe}}); 
(function($){
    $(function(){  //document.ready

        $("#ireal").data("impreal", importeReal);
        $('input').on('input', function() {
            if($(this).attr('data-denominacion')) {
                var valorInput = parseFloat($(this).val());
                var denominacion = parseFloat($(this).attr('data-denominacion'));
                if (/\D/.test(valorInput) || /\s/.test(valorInput)) {
                    toastr.warning('Solo valores numericos, por favor'); 
                    $(this).addClass('active');
                }
                if(/\d/.test(valorInput)) {  
                    var originalImporteReal = $("#ireal").data("impreal");  
                    var denominacionXInputValue = valorInput * denominacion;
                    importeReal = originalImporteReal - denominacionXInputValue;
                    console.log(importeReal);
                    if(importeReal <= 0) {
                        toastr.warning('No puede poner mas denominaciones');
                    } else {
                         toastr.info('Actualmente tienes sin ingresar' + importeReal);
                    }
                }                 
                if(valorInput =='') {
                    importeReal = $("#ireal").data("impreal");
                    toastr.info('Actualmente tienes sin ingresar' + importeReal);
                }
            }
        });
    });
})(jQuery);