jQuery - Multiple events to trigger same function but with different elements

Question

jQuery Snippet:

function main_call(){
jQuery("#user_registration").on('submit',function(event) { 
    load_product_serial();
});
jQuery("#reg_submit").on('blur',function(event) {
    load_product_serial(); 
});

}


function load_product_serial(){
        var result = [];
        var prod_serial = jQuery('#reg-product-serial').val(); //fetch input value
        jQuery.ajax({
        type: "GET", 
        url: ajaxurl,
        async: false,
        dataType : "JSON",
        contentType: 'application/json; charset=utf-8',
        data : {action: "get_product_serial"},
        //cache: false, 
            success: function(data){

                result = data;
                if( jQuery.inArray( prod_serial, result ) < 0 ){
                    jQuery( "#invalid_dialog" ).dialog({
                    width: 350,
                    modal: true,
                    resizable: false,
                    dialogClass: 'no-close success-dialog',
                    buttons: {
                      Ok: function() {
                        jQuery( this ).dialog( "close" );
                      }
                    }
                  });
                    jQuery( "button.ui-dialog-titlebar-close" ).hide();//hide close button
                    event.preventDefault();
                    return false;

                }else{
                    alert('Success');
                    //jQuery( "#valid_dialog" ).dialog();
                    return true;
                }
            },
            error: function() {
                alert('Unexpected error occured. Please try again.');
            }
        });    
    //});
}

Here I need to call the function when user clicks on submit button event (reg-product-serial) OR when user changes input value onblur event (reg-product-serial)

I can bind using .on() to multiple events but the element here is not same.

$('#element').on('keyup keypress blur change', function() {
    ...
});

This is not a duplicate as I am not using one common element but two different elements for the same function.

Anoop Joshi P · Answer 1 · 2015-06-19T12:39:04.117

1

Why dont you try like this?

Wrap the entire code in a function, then call that function from both events.

jQuery('#reg-product-serial').on('blur', function() {
    //call the function from here
});
jQuery("#reg_submit").click(function(event) {
    //call the function from here
});

edited Jun 19 '15 at 12:39

answered Jun 19 '15 at 11:49

Anoop Joshi P

25,373
8
32
53

2

good answer except for the over usage of selectors part. I think `#reg_submit` is enough and also faster than `button#reg_submit` :) – Arkantos Jun 19 '15 at 11:51
@Arkantos yes indeed. I just copied the code from question. Will update the answer.. – Anoop Joshi P Jun 19 '15 at 12:37

Adam Jenkins · Accepted Answer · 2015-06-19T12:17:14.307

1

Use more than one line:

$('#element').on('submit',function() { load_product_serial(); });
$('#element2').on('keypress blur change',function() { load_product_serial(); });

Also, FYI, don't use the click event to bind a function to a submit button click when what you really want to do is bind it to the submit event of the form itself.

EDIT

Regarding the comment below about the event not defined error, don't forget to pass in your event object as an argument:

function load_product_serial(event) {
  ....
  event.preventDefault();
  ....
}

$('#element').on('submit',function(e) { load_product_serial(e); });
$('#element2').on('keypress blur change',function(e) { load_product_serial(e); });

edited Jun 19 '15 at 12:17

answered Jun 19 '15 at 11:49

Adam Jenkins

51,445
11
72
100

1

Why not even simpler `$('#element').on('submit',load_product_serial);`? – Satpal Jun 19 '15 at 11:54
@Slimshadddyyy, Adam is correct. If you're registering you click handler inside your blur handler, then the same click handler is registered again and again, every time the blur event is fired, so your click handler ends up invoked multiple times. Like he said, move the click handler part outside the blur handler and make sure you're doing it only once :) – Arkantos Jun 19 '15 at 11:54
Adam: Pls see my updated question. Here function is being called on both events but if user submits the form, it says ` event is not defined`. I am preventing form submission if input value in invalid – Slimshadddyyy Jun 19 '15 at 12:12

score 0 · Answer 3 · answered Jun 19 '15 at 12:27

(Would post as a comment but don't have enough reputation)

Do you call your function 'main_call' to bind your events? Since they are contained inside this function, they won't be binded until you can that function.

The jquery event binding you wrote should work fine other than that.

You should also pass your event variable to your function if you want to use it inside it.

jQuery("#user_registration").on('submit',function(event) { 
    load_product_serial(event);
});

PS: You should use a function in your success callback to make code more readable.

jQuery - Multiple events to trigger same function but with different elements

3 Answers3