javascript - Onsubmit show success message on div -
javascript - Onsubmit show success message on div -
i have 3 forms on page submit ajax , onsubmit show succesful message in div. problem when click submit on particualr fomr, calls sucess messages in divs. want particular div show based on form submitted
<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(); info = $(this).serialize(); $.ajax({ type: "post", url: "int_p_cmt.asp", data: info }).success(function() { $("#comment_div").append("<div class='comment' style='border:1px violet 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(); info = $(this).serialize(); $.ajax({ type: "post", url: "insert_call_love.asp", data: info }).success(function() { $("#love_div").append("<div class='love' style='border:1px violet 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(); info = $(this).serialize(); $.ajax({ type: "post", url: "insert_fav.asp", data: info }).success(function() { $("#favorite_div").append("<div class='favorite' style='border:1px violet 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"> </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>
you have 3 forms 3 different form submission handlers. when form submitted, don't know form have deal with.
for each of forms, alter this:
$("form").on('submit',function(event){...
to:
$("#formid").on('submit',function(event){...
where #formid
corresponds id of form.
p.s. should seek re-use form submission handler.
javascript jquery html ajax
Comments
Post a Comment