Calling JQuery event as function from elsewhere in code...?

Question

Okay, pretty straight forward JQuery question that I am struggling to find an answer for:

I have a JQuery event that is called on button click:

$(document).ready(function(){
        resetForms('reservation');
        $('#form-reservation').submit(function(event){ 
            event.preventDefault();  //the page will no longer refresh on form submit.
            var resCheck = $(this).find('input[class="reservationid"]').val(); //now we have the reservation ID, let's perform our check.
            document.cancel_res.cancel_agree.checked = false;
            //document.cancel_res.cancel_agree.disabled = false;
            document.cancel_res.cancel_button.disabled=true;
            document.form_reservation.search_button.value="Searching...";
            document.form_reservation.search_button.disabled=true;
            $.ajax({ 
                url: 'inc/searchres.php', 
                type: 'POST',
                data: 'resid='+resCheck, 
                success: function(data){  //data is all the info being returned from the php file 
                    resetForms('reservation');  //clear forms
                    document.form_reservation.search_button.value="Search Reservation";
                    document.form_reservation.search_button.disabled=false;
                    $('#reservation-id').val(resCheck);  //add read ID back into text box
                    var jsonData = $.parseJSON(data);
                    //BLAH BLAH BLAH BLAH
                }
            });
        });
    });

The function works perfectly... however, is there anyway to call this function without utilizing the submit event? I tried to take out everything after the $('#form-reservation').submit(function(event){ call and place it in a separate function, and then call the function from the submit event. However, for whatever reason, this failed.

Basically, I want the submit event to still trigger this function, but I also want to be able to call the entire function under other circumstances. Thanks in advance!

If you are developing this in Firefox I would strongly encourage you to install Firebug (getfirebug.com) it will give you a better idea of why JavaScript is failing. — Jason Sperske
– Jason Sperske, Commented Apr 27, 2012 at 21:32

Gus · Accepted Answer · 2012-04-27 21:41:53Z

2

It's actually pretty easy:

var MyFunc = function(event){ 
            typeof event !== 'undefined' ? event.preventDefault() : false;  //the page will no longer refresh on form submit.
            var resCheck = $(this).find('input[class="reservationid"]').val(); //now we have the reservation ID, let's perform our check.
            document.cancel_res.cancel_agree.checked = false;
            //document.cancel_res.cancel_agree.disabled = false;
            document.cancel_res.cancel_button.disabled=true;
            document.form_reservation.search_button.value="Searching...";
            document.form_reservation.search_button.disabled=true;
            $.ajax({ 
                url: 'inc/searchres.php', 
                type: 'POST',
                data: 'resid='+resCheck, 
                success: function(data){  //data is all the info being returned from the php file 
                    resetForms('reservation');  //clear forms
                    document.form_reservation.search_button.value="Search Reservation";
                    document.form_reservation.search_button.disabled=false;
                    $('#reservation-id').val(resCheck);  //add read ID back into text box
                    var jsonData = $.parseJSON(data);
                    //BLAH BLAH BLAH BLAH
                }
            }

$(document).ready(function(){
        resetForms('reservation');
        $('#form-reservation').submit(MyFunc); //this calls on submit
    });

//this calls without need of a submit
MyFunc();

edited Apr 27, 2012 at 21:41

Gus

6205 silver badges7 bronze badges

answered Apr 27, 2012 at 21:29

philwinkle

7,0193 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

philwinkle Over a year ago

Made a slight modification here - only running preventDefault if event isn't undefined. That should take care of any errors of calling MyFunc outside of the submit scope.

user400654 Over a year ago

MyFunc(event) should be MyFunc

philwinkle Over a year ago

Where, in the submit? You have to provide the event to the function scope - so you need to pass event. If you don't provide an argument in submit(MyFunc(event)) then event will be typeof = 'undefined'.

Jason Sperske Over a year ago

Kevin is right, the .submit() method is taking as an argument the MyFunc function as a parameter, not actually calling it. the event object will be passed when the submit event is fired

MilkyWayJoe Over a year ago

I agree with @KevinB; as far as I know, this would evaluate MyFunc on the ready event and not on the submit sinc you're pretty much calling the function. I'd say use the .submit([eventData], [callback]) signature instead

|

user400654 · Accepted Answer · 2012-04-30 14:16:48Z

1

I would simply trigger the handler.

$("#form-reservation").triggerHandler("submit");

http://api.jquery.com/triggerHandler/

As per the api docs, this does not cause the form to submit, it just run's the handlers bound to that event.

edited Apr 30, 2012 at 14:16

answered Apr 27, 2012 at 21:46

user400654

95.1k16 gold badges168 silver badges188 bronze badges

1 Comment

tmparisi Over a year ago

This was nice and easy and didnt require any change of my code... thanks!

Collectives™ on Stack Overflow

Calling JQuery event as function from elsewhere in code...?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related