Form still posts back with return false in JS

Question

it seems like #frmToDo still posts backs

<form id="frmToDo" name="frmToDo">
    ...
    <a id="btnSubmit" href="javascript:document.frmToDo.submit();">Add</a>

google.load("jquery", 1);
google.load("jqueryui", 1);

google.setOnLoadCallback(function() {
    ...

    $("#frmToDo").submit(function() {
        return false;
...

why will this happen? might it be because of href="javascript:document.frmToDo.submit(). how can i submit the form with that link (i didnt use <input type="submit" /> because of styling problems, it seems like buttons are harder to style, esp in different browsers) the AJAX way?

Answer 1

$('#btnSubmit').click(function(){
    $("#frmToDo").submit();
})

use this as your click handler on <a>

Answer 2

you say you did not use <input type="submit" /> because of styling so why not use,

<a id="btnSubmit" href="#" onclick="return false">Add</a>

google.setOnLoadCallback(function() {

   //...OTHER LOGIC

      $('#btnSubmit').click(function(){
          var form = $(this).parent().find('form');
          var formdata = $(form).serialize();
          $.ajax({
             url : 'ajax/receiver.php',
             data : formdata,
             success : function(responce)
             {
                alert(responce); // do what you want here
             }
          })
      });
   //...OTHER LOGIC
});

Answer 3

if you want to do it the ajax way, a submit is unnecessary. In fact, a "form" element is unnecessary. Just use the ajax call.

http://api.jquery.com/jQuery.ajax/

Answer 4

As mentioned above, you can just attach to the event directly via the click method. However, if you want to use your method, you should be able to do that as well.

I think that because you're attaching to the event through the DOM API rather than using an inline function, you'll need to cancel the event explicitly rather than just return false, at least for form submissions. I believe this should work for you.

$('#frmToDo').submit(function(e){
  e.preventDefault();
});