jquery after i submit a form the second one just posts to page instead of ajax submit

Question

Ok basically my problem is what i stated in the title. I'm using jquery tabs and after i submit 1 form and i go about adding another news post instead of doing the ajax submit it just posts to the page.

<script type="text/javascript">

    //if submit button is clicked
    $('#submit').live("click",function () {  
     //Get the data from all the fields
     var title = $('input[name=title]').val();
     var newspost = tinyMCE.get('newspost').getContent();
     var type = $('input[name=type]').val();

     //Simple validation to make sure user entered something
     //If error found, add hightlight class to the text field 

     //organize the data properly
     var data = 'title=' + title + '&post=' + newspost + '&id=' + type;
     //start the ajax
     $.ajax({
      //this is the php file that processes the data and send mail
      url: "pages/news.php", 

      //GET method is used
      type: "POST",

      //pass the data   
      data: data,  

      //Do not cache the page
      cache: false,

      //success
 success: function() {  
     $('#news_form').html("<div id='message'></div>");  
     $('#message').html("<h2>News Article has been Submitted!</h2>")  
     .append("<p>Now visable on main page</p>")  
     .hide()  
     .fadeIn(1500, function() {  
       $('#message').append("<img id='checkmark' src='images/check.png' />");  
     });  
      }  
     });

     //cancel the submit button default behaviours
     return false;
    }); 
 </script>
<div id="news_form">
<form id="form1" name="form1" method="post" action="">
  <p>Title:
    <label>
      <input name="title" type="text" id="title" size="40" />
    </label>
  </p>
  <p>
    <label>
      <textarea name="newspost" id="newspost" cols="45" rows="5"></textarea>
    </label>
  </p>
  <p><input type="hidden" name="type" value="postadd" />
    <label>
      <input type="submit" value="Submit" id="submit">
    </label>
  </p>
</form>
</div>

Answer 1

Returning false won't prevent the default action; try event.preventDefault instead.

Answer 2

For completeness you might consider the following:

event.preventDefault();
event.stopPropagation();
if ($.browser.msie) {
    event.originalEvent.keyCode = 0;
    event.originalEvent.cancelBubble = true;
    event.originalEvent.returnValue = false;
}

Although I'm in a bit af a quandry as I would normally encourage feature detection ablve browser sniffing (if ($.browser.msie) {...)

Also, noticed your first line:

$('#submit').live("click",function () {

Although it probably won't make a difference, I can't see how you require live(). Surely .click() ought to suffice?

Answer 3

Try changing your submit button to a regular button. You don't need the default submit behavior if you're handling it with AJAX.

<input type="button" value="Submit" id="submit">

Or, if you want to keep it as-is, you should put the return false in your click function, not inside the AJAX success function.

Answer 4

Have you tried listening for the .submit() event on the form itself?

Also, make sure you don't have duplicate ids on the page.

Answer 5

I have tinyMCE installed an my editor..once i removed it i was able to post how ever many times in a row i wanted..