Question

我在页面上有3个表单，我通过ajax提交，并在提交时在div中显示成功的消息。问题是，当我点击提交某个特定的fomr时，它会调用所有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 Bootstrap在这里很有用：我不确定你的确切要求是什么，但这是我认为你在寻找的：

        <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

Onsubmit在div上显示成功消息

2 个答案: