Question

Im having some problem with a bit of JQuery code and I don’t know what the issue is, basically im trying to submit a comment on the fly using ajax but for some reason the page keeps reloading. check out the code below…

Html form

<form method='post' action=''>                      
   <textarea name='comment' id='comment' maxlength='500'>Leave a Comment...</textarea>
   <input name='userActivityId' id='userActivityId' type='hidden' value='$userid'>

   <input class='send' id='formButton' type='submit' value='Send'>
</form>

JQuery Code

$(function(){

   /*this function submits a normal comment from the comment container*/
   $(".commentContainer .send").on('click', function(){     
      var profileId = $("input#userActivityId").val();
      var comment = $("textarea#activityComment").val();    

      if(profileId == ""){
         $("input#userActivityId").focus();
         return false;
      } 

      if(comment == ""){
         $("textarea#comment").focus();
         return false;
      } 

      //send message
      postActivityMessage(comment, profileId);

      return;
   });


   function postActivityMessage(comment, toUser){
      $.ajax({
         type: "POST", url: "include/process.php", 
         data:{
            addActivityComment: "true",
            message: comment,
            userActivityId: toUser,
            type: "message",
            replyto: '0'    
         },
         success: function(){
            alert('posted');
         }
      });
   }

});

Answer 1

This should help, as per Dave’s comment

$("form").submit(function(e) {
    e.preventDefault();
});