Javascript 用jQuery替换提交时的HTML表单

所以我想做的是：在我的网页中，我有很多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>

---

有什么建议吗？将JavaScript附加到每个表单而不是使用。每个表单处理每个表单的寻址是否更好？

我将使用另一种方法：

何时提交触发器→ 替换父窗体：

$('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()
        );
    });
});

---

它没有经过测试。

假设$commentreply.eachfunction是临时函数，您将选择多个表单，代码看起来大致正确

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

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

你没有阻止任何事情

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

$这是现在发布的，不是表单

在这行后面插入

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

替换

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

与

---

使其成为HTML元素而不仅仅是字符串。

$commentreply.eachfunction？应该只有一个id为的元素。$commentreply、另一个表单等。每个函数都是。请不要将表单提交绑定到单击按钮。提交表单的方法不止一种。总是绑定到表单提交操作。这不是我第一次听到。。。我想听听真正的解释如果我使用你的表单并在输入：文本字段中按enter键，它在没有你的JS的情况下发布，因为你正在等待我没有点击的特定按钮。显然，他需要阻止默认提交并触发自己的发布请求…所以你很高兴忽略用户在字段中按enter键提交表单，而只是让该操作不起作用的事实？也许我应该这样做在我的原始帖子中包含了这一点，但我的代码给出了以下错误：“uncaughttypeerror:cannotcallmethodcreateDocumentFragment of undefined”。该错误源于使用replaceWith functionAh的行，该行可能是$this，与上下文无关。我将更新我的答案。另外，有趣的是，event.preventDefault似乎没有将事件参数传递到FunctionOnHMMM中。我不认为这件事会被暗示。我会查一查。我总是用e-less来打字。

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

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

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