Question

所以这就是我要做的事情：在我的网页中，我有很多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 occured. 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（）来处理每个表单的处理会更好吗？谢谢！

Answer 1

我会用另一种方法：

提交触发器＆gt;替换父表单：

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

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

   $(this).replaceWith("<div>new  html 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 to replace with</div>").slideDown()
      );
   });
});

未经测试。

Answer 2

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

但目前该表单是发布的，因为

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

你没有阻止任何事情。

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

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

此外，如果有多种表单，则在用户使用表单之前不应绑定该事件，这样可以减慢页面速度。

RE错误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元素。）

使用JQuery替换提交时的HTML表单

2 个答案: