Skip to main content ↑ ↓
Topic solved
This topic has been marked as solved and requires no further attention.
Topic: onChange event in modal (Read 3679 times) previous topic - next topic

onChange event in modal

Hi!

I created in my form 3 input field: Field1 + Field2 = Field3.
If the form is a simple adding page, then ClientEvent properties of fields work correct. But if I created a modal, then ClientEvent properties of fields don't work.
Code: [Select]
$(document).ready(function() {
    if($('.table-index').length) {
        var sm = 0;
        var gj = 0;
        var om = 0;
        $('input[name="gj"]').on('change keyup input', function(){
            gj = $(this).val();
        });
        $('input[name="om"]').on('change keyup input', function(){
            om = $(this).val();
        });
        sm = parseInt(gj, 10) + parseInt(om, 10);
        $('input[name="sm"]').val(sm);
    }
});
Why?
 

Re: onChange event in modal

Reply #1 –
@machobymb‍ because event listeners in jquery have a different way of being used in a modal and you have to go the extra mile of telling it where to attach itself and look for the onChhange ID.
Here is a sample code of how it should be:
Code: [Select]
$('body').on('change keyup input', 'input[name="gj"]', function() {
    gj = $(this).val();
});

Re: onChange event in modal

Reply #2 –
@willvin Your code not working :'(

I wrote the code under "Custom JS".

Re: onChange event in modal

Reply #4 –
@willvin My solution:
Code: [Select]
$(document).ready(function() {
    if($('.modal-open').length) {
        var usz = 0;
        var gj = 0;
        var okm = 0;
        var kiu = 0;
        $(document).on('change keyup input', 'input[name="gj"]', function(){
            gj = $(this).val();
            setInput();
        });
        $(document).on('change keyup input', 'input[name="okm"]', function(){
            okm = $(this).val();
            setInput();
        });
        $(document).on('change keyup input', 'input[name ="kiu"]', function(){
            kiu = $(this).val();
            setInput();
        });
        function setInput() {
            usz = parseInt(gj, 10) + parseInt(kiu, 10) + parseInt(okm, 10);
            $('#page-add-form input[name="usz"]').val(usz);
        };
    }
});
Why work only with  $(document)? I don't understand.

Re: onChange event in modal

Reply #5 –
Quote from: willvin –
@machobymb‍ because event listeners in jquery have a different way of being used in a modal and you have to go the extra mile of telling it where to attach itself and look for the onChhange ID.
Here is a sample code of how it should be:
Code: [Select]
$('body').on('change keyup input', 'input[name="gj"]', function() {
    gj = $(this).val();
});

like I said here, you need to bind it to a root node, where it can then locate the modal before it would work. The body should work too, but it seems I did not use it right.