Onsubmit show success message on div

Onsubmit show success message on div

I have 3 forms on a page which i submit by ajax and onsubmit it show a succesful message in a div. the problem is when i click submit on a particualr fomr, it calls all the sucess messages in all the divs. But i want it a particular div to show based on the form that was submitted 


  1. <tr> <td colspan="3" bgcolor="#FFFFFF"><div id="comment_div"></div></td> </tr> <tr> <td colspan="3" bgcolor="#FFFFFF"><div id="love_div"></div></td> </tr> <tr> <td colspan="3" bgcolor="#FFFFFF"><div id="favorite_div"></div></td> </tr> <script> $(document).ready(function(){ $("form").on('submit',function(event){ event.preventDefault(); data = $(this).serialize(); $.ajax({ type: "POST", url: "int_p_cmt.asp", data: data }).success(function() { $("#comment_div").append("<div class='comment' style='border:1px purple solid; padding:2px; margin:5px;'>comment!</div>"); setTimeout(function() { $(".messages").fadeOut(function(){ $(".messages").remove(); }); }, 1000); $("input[type=text]").val(""); }); }); }); </script> <script> $(document).ready(function(){ $("form").on('submit',function(event){ event.preventDefault(); data = $(this).serialize(); $.ajax({ type: "POST", url: "insert_call_love.asp", data: data }).success(function() { $("#love_div").append("<div class='love' style='border:1px purple solid; padding:2px; margin:5px;'>Love !</div>"); setTimeout(function() { $(".messages").fadeOut(function(){ $(".messages").remove(); }); }, 1000); $("input[type=text]").val(""); }); }); }); </script> <script> $(document).ready(function(){ $("form").on('submit',function(event){ event.preventDefault(); data = $(this).serialize(); $.ajax({ type: "POST", url: "insert_fav.asp", data: data }).success(function() { $("#favorite_div").append("<div class='favorite' style='border:1px purple solid; padding:2px; margin:5px;'>favorites!</div>"); setTimeout(function() { $(".messages").fadeOut(function(){ $(".messages").remove(); }); }, 1000); $("input[type=text]").val(""); }); }); }); </script> <tr> <td width="160" bgcolor="#FFFFFF"><form id="form3" name="form3" method="POST" action="<%=MM_editAction%>"> <input type="image" name="imageField2" id="imageField2" src="imgs/buttons/loveit.png" /> <label for="textfield"></label> <input type="text" name="textfield" id="textfield" /> </form></td> <td width="125" bgcolor="#FFFFFF">&nbsp;</td> <td bgcolor="#FFFFFF"><form ACTION="<%=MM_editAction%>" METHOD="POST" id="form5" name="form5"> <div align="right"> <input type="image" name="imageField" id="imageField" src="imgs/buttons/favorite.png" /> <label for="textfield2"></label> <input type="text" name="textfield2" id="textfield2" /> </div> </form></td> </tr> <tr> <td colspan="3"><form id="form2" name="form2" method="POST" action="<%=MM_editAction%>"> <input name="comment" type="text" id="comment" size="50" /> <input name="imageField3" type="image" id="imageField3" src="imgs/buttons/comment.png" align="bottom" /> </form></td> </tr>

  3. javascript jquery html ajax