Onsubmit在div上顯示成功消息

Question

我在頁面上有3個表單，我通過ajax提交併在onsubmit中顯示一個div中的成功消息。問題是當我點擊一個特定的提交時，它會調用所有div中的所有成功消息。但我想要一個特殊的div來顯示基於提交的表單

<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> 

Answer 1

你有3種形式3種不同的表單提交處理程序。提交表單時，您不知道要處理哪種表單。

對於每個的形式，更改此：

$("form").on('submit',function(event){... 

到：

$("#formId").on('submit',function(event){... 

凡#formId對應於表單的id。

P.S.你應該嘗試重新使用表單提交處理程序。

Answer 2

Twitter的引導也許會有幫助：我不知道什麼是您的具體要求，但是這是我認爲你在尋找：

 <div class="alert alert-warning" id="showMessage"> 
     <strong>Warnning</strong> Error Message 
    </div> 

在你的Ajax，你可以這樣做：

$(document).ready(function() { 
$('#showMessage').hide(); 
}); 

function FunctionName(){ 
Ajax({ 
...... 
success: function (msg) { 
    $('#showMessage').show(); 
} 
}); 
} 

要使用Twitter Bootstrap，您需要下載他們的圖書館並將其放置到您的項目中，這裏是他們網站的鏈接。 Twitter Bootstrap