2

所以这就是我想要做的：在我的网页中，我有很多 HTML 表单。如果提交了任何单个表单，我希望将整个表单替换为某些内容。但是，我无法做到这一点。

下面是我的 JavaScript 代码：

$("#commentreply").each(function() {
    var replace = false;
    $(this).submit(function() {
        // http://stackoverflow.com/q/16323360/1222411
        event.preventDefault();

        var url = $(this).attr('action');
        var nameValue = $(this).find('input[name="name"]').val();
        var commentValue = $('#commentEntry').val();
        var projectValue = $(this).find('input[name="project"]').val();
        var idValue = $(this).find('input[name="id"]').val();
        var posting = $.post(url, {
            project : projectValue,
            id : idValue,
            name : nameValue,
            comment : commentValue
        });

        posting.done(function(data) {
            $(this).replaceWith("(HTML content to replace form)");
        }).error(function(){
            alert("An error occurred. Be sure you entered a name and comment and try again");
        });
    });
});

这个想法是以下 HTML 代码：

<form id="commentreply" name="reply" action="/lib/comments/addComment.php" method="post">
    <input type="hidden" name="project" value="project">
    <input type="hidden" name="id" value="-1">
    Name:<input type="text" id="nameEntry" name="name" size="100"><br>
    Comment:<br><textarea id="commentEntry" name="comment" size="255">
        Enter comment here</textarea><br>
    <input type="submit" value="Submit">
</form>

当点击提交按钮时会变成这样：

(HTML content to replace form)

有什么建议吗？将 JavaScript 附加到每个表单而不是使用 .each() 来处理每个表单的寻址会更好吗？

4

2 回答 2

2

该代码看起来很正确，假设$("#commentreply").each(function()是临时的，并且您将选择多个表单。

但目前该表格正在发布，因为

$(this).submit(function() {
    event.preventDefault();

你没有阻止任何事情。

$(this).submit(function(event) { // <-- You need to declare event
    event.preventDefault();

要回答您的第二个问题，如果您可以使用每个，请使用每个而不是重复代码。

此外，如果有很多表单，您不应该在用户使用表单保存之前绑定事件，从而减慢您的页面速度。

重新错误Uncaught TypeError: Cannot call method "createDocumentFragment"

如果不检查，这可能是因为：

posting.done(function(data) {
    $(this).replaceWith("(HTML content to replace form)");
}).error(function(){

$(this)是现在posting，不是形式。

在此行之后插入

$("#commentreply").each(function() {
    var $form = $(this);

并更换

$(this).replaceWith("(HTML content to replace form)");

和

$form.replaceWith("<div>(HTML content to replace form)</div>");

使它成为一个 HTML 元素而不仅仅是一个字符串。

于 2013-10-21T00:08:05.543 回答
1

我会使用另一种方法：

当提交触发器→替换父表单时：

$('form').submit(function(event){

    event.preventDefault();
    /* Fire your validation and $.post */

    $(this).replaceWith("<div>new HTML content to replace with</div>");
});

你甚至可以为它制作动画：

$('form').submit(function(event){

    event.preventDefault();
    /* Fire your validation and $.post */

    $(this).slideUp(function(){
        $(this).replaceWith(
            $("<div style='display:none'>new HTML content to replace with</div>").slideDown()
        );
    });
});

它没有经过测试。

于 2013-10-21T00:07:08.170 回答