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

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