Is this a correct way to call a javascript function?

Question

Is this the correct way to call my javascript function with jquery? I have spent the last 5 hours trying to figure out why this won't work.

<form class="rpt" id="rpt" action="">

---

$(function() {
  $("#rpt").submit(doSave);
});
</script>

---

Here is the small snippet of code in the javascript wysiwyg editor. I'm still using the exact same form tag in my html.

        // Save
        case "Save":
            WYSIWYG.updateTextArea(n);
            var form = WYSIWYG_Core.findParentNode("FORM", this.getEditor(n));
            if(form == null) {
                alert("Can not submit the content, because no form element found.");
                return;
            }
            form.submit();
        break;

Answer 1

There are two variants of the submit function. If you call $('#rpt').submit(); you are firing the "submit" event of the form. If you call $('#rpt').submit(myFunctionName); You are binding myFunctionName to the "submit" event of the form. This will not be fired when the page loads, but only when you try to submit the form. As such, this code:

<form id="rpt" method="GET" action="http://www.google.com/search">
Search: <input type="text" name="q"> <input type="submit" value="Go">
</form>

And this Javascript:

function myFunctionName() {
   alert('The form is being submitted!');
   return false; // cancel the event (ie, the form will not be sent)
}
$(function() {
    $('#rpt').submit(myFunctionName);
});

Will call the myFunctionName function only when the form is submitted (either by manually pressing the "Go" button or by pressing enter when the text field is focused). Here is a sample of it at work. If you want to run a particular function when the page loads, all you have to do is pass something to the $(document).ready(); function, or $() for short:

function onLoadDoThis() {
    alert('Page is loaded!');
}
$(document).ready(onLoadDoThis); // $(onLoadDoThis); is the same thing

And here is an example of this. Hope this cleared some stuff up...

EDIT

Ok, so I whipped up a working example of what you are trying to do. At first I was annoyed you couldn't get this to work, but there were actually quite a number of limitations you have to work around because of how crappy this editor is. Anyways, onto the explanation:

The first problem is that the library overrides the use of $ to its own little function. So the jQuery awesomeness is not possible the regular way. Thankfully, jQuery is awesome and you can get around that by doing something like this:

$j = jQuery.noConflict();

Now instead of doing $(...); you have to do $j(...);. If you are not aware of this it is likely you were trying to write jQuery code and nothing was happening.

The next hurdle you were probably having is that for most events, when you do something like $(selector).myevent(aFunction); it is assumed that doing $(selector).myevent(); will fire said event. However, this is not true of the submit event. Unless the form action is triggered by a user the code you bind to the submit of a form won't be called when the form is submitted by code. So even though the line in the source code of the editor that does form.submit(); is simply firing the native submit event of the form, even if you bind an event to this event with Javascript it won't be called in this circumstance because the user didn't trigger the submit event, code did.

Due to this limitation, it gets increasingly tricky to achieve what you want without editing the source code of the editor. You see, the editor attaches its "create all the dashboard crap" stuff to the window's load event. This event fires after jQuery's DOM ready event, as the whole point of jQuery's ready is to fire as soon as possible and not a second later, while window.load takes its sweet time. So what we have to do is ditch the jQuery bind code (grimace) and use the editor's own binding code to attach an event directly afterwards its own "create the dashboard" function. At this point, the dashboard has already been created so we can access the Save button and make it do what we want - only after removing its original event of calling the 'Save' function you found in the source code.

At the end of the day, the code ends up looking like this:

$j = jQuery.noConflict(); // give up ownership of $ to WYSIWYG

WYSIWYG.attach('textarea1', full); // first attach the event to create this widget

WYSIWYG_Core.addEvent(window, "load", function() {
    // and now override the Save button
    // the removeAttr('onclick') is crucial to stop it
    // from doing what it normally does (Which is submit the form)
    $j('#Save').removeAttr('onclick').click(function() {
        var form = $j('#myform');
        var data = form.serialize();
        var type = form.attr('method');
        var url = form.attr('action');
        $j.ajax({
            url: url,
            type: type,
            data: data,
            dataType: 'json',
            success: function(d) {
                if(d.success == 1) {
                    $j('#notice').html('Everything went alright! High fives.');
                } else {
                    $j('#notice').html('Something went wrong. Eep.');
                }
            }
        });        
    });
});

While my_handler.php is a very simple script that just returns a json string:

<?php
// process your stuff here, set success as 1 or 0
$success = 1;
print json_encode(array('success' => $success));
?>

And here is an example of it in action.

Personally, I really don't like this particular editor and I would suggest you check out something else.

Either way, though, I hope this helped.

Answer 2

It's possible that the doSave function must be defined earlier in source than the code binding it to the submit event...

This code does NOT work

// doSave is undefined at this point
$("#rpt").submit(doSave);

// Now we've defined doSave, but it's too late.
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

I believe this code ought to work:

$("#rpt").submit( function (){
    alert("submitted");
    return false;    
});

Or if you must define doSave separately, try this:

// First define doSave
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

// Then bind it
$("#rpt").submit(doSave);

Answer 3

Since "rpt" is the name of the class and the name of the form, you could use "." or "#" and it will work assuming "doSave" is the name of a function to be used as a callback. So, it can be called like this:

$(".rpt").submit(doSave);
function doSave(){
  //do something
}

or you can have the function itself can be the parameter:

$(".rpt").submit(function(){
  //do something here
});

EDIT: If you don't want the form to postback. Add a "return false;".

$("#rpt").submit(doSave);
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

Answer 4

It's even simpler than that:

$("#rpt").submit(doSave);

If that doesn't work, it's because you work with a JQuery set, even though you are interested in submitting the form element. If so, try convincing JQuery that it's only a single element:

$("#rpt").eq(0).submit(doSave);