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

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);

Answer 2

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 3

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);