在用JQuery提交时替换HTML表单 [英] Replace HTML Form on submit with JQuery

问题描述

这就是我想要做的事情：在我的网页中，我有很多HTML表单。如果提交了任何单独的表单，我希望整个表单被替换为某个内容。然而，我还没有做到这一点。

以下是我的javascript代码

 （）函数（）{
 $（this）。 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 post = $ .post（url，{
 project：projectValue，
 id：idValue，
 name：nameValue，
 comment：commentValue 
}）; 
 
 posting.done（函数（数据）{
 $（this）.replaceWith（（html content to replace form））; 
}）。error（function（）{
 alert（发生错误，请确保您输入了名称和注释并再试一次）; 
}）; 
}）; 
}）; 
  

这个想法是下面的html代码：

 < form id =commentreplyname =replyaction =/ lib / comments / addComment.phpmethod =post> 
< input type =hiddenname =projectvalue =project> 
< input type =hiddenname =idvalue = -  1> 
名称：< input type =textid =nameEntryname =namesize =100>< br> 
评论：< br>< textarea id =commentEntryname =commentsize =255> 
在此输入评论< / textarea>< br> 
< input type =submitvalue =提交> 
< / form> 
  

当提交按钮被击中时，会变成这样：

 （html内容替换表单）
  

任何建议？将javascript附加到每个表单而不是使用.each（）来处理每个表单的问题会更好吗？谢谢！

解决方案

代码看起来正确，假设 $（＃commentreply）。each函数（）是临时的，你将选择多个表单。

但是当前表单是张贴的，因为

  $（this）.submit（function（）{
 event.preventDefault（）; 
  

您无法阻止任何内容。

  $（this）.submit（function（event）{//<  - 您需要声明事件
 event.preventDefault（）; 
  

为了回答第二个问题，如果你可以使用每一个，使用每一个而不是重复的代码。

有很多形式，你不应该绑定事件，直到用户使用表单，保存减慢你的页面。

RE错误未捕获TypeError ：无法调用方法createDocumentFragment

不检查这可能是因为

  posting.done（function（data）{
 $（this）.replaceWith（（html content to replace form ））; $（
））。error（function（）{
  

$（ ）现在张贴不是表格。

在此行后面插入 p>

  $（＃commentreply）。each（function（）{
 var $ form = $（this）; 
  

并替换

  $（this）.replaceWith（（html content to replace form））; 
  

with

  $ form.replaceWith（< div>（html content to replace form）< / div>） ; 
  

（并且使其成为您要替换的html元素。）

So here's what I'm trying to do: in my webpage, I have a lot of html forms. If any individual form is submitted, I want the entire form to be replaced with something. However, I haven't been able to do this.

Below is my javascript code

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

The idea is that the following html code:

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

Will become this when the submit button is hit:

(html content to replace form)

Any advice? Would it be better to attach javascript to each form rather than use .each() to deal with addressing each form? Thanks!

解决方案

The code looks about right, assuming $("#commentreply").each(function() is temporary and you're going to select more than one form instead.

But currently the form is posting because

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

you're not preventing anything.

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

To answer your second question, if you can use each, use each rather than duplicate code.

Also if there are many forms you shouldn't bind the event until the user uses the form, saves slowing down your page.

RE the error Uncaught TypeError: Cannot call method "createDocumentFragment"

Without checking this might be because of this

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

$(this) is now posting not the form.

Insert after this line

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

and replace

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

with

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

(and make it an html element that you're replacing with too.)

这篇关于在用JQuery提交时替换HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！