javascript 用 JQuery 替换提交时的 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19484247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace HTML Form on submit with JQuery
提问by ScoWalt
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.
所以这就是我想要做的：在我的网页中，我有很多 html 表单。如果提交了任何单个表单，我希望整个表单都被替换。但是，我一直无法做到这一点。
Below is my javascript code
下面是我的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");
});
});
});
The idea is that the following html code:
这个想法是下面的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>
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!
有什么建议吗？将 javascript 附加到每个表单而不是使用 .each() 来处理每个表单的地址会更好吗？谢谢！
采纳答案by Popnoodles
The code looks about right, assuming $("#commentreply").each(function()is temporary and you're going to select more than one form instead.
代码看起来是正确的，假设$("#commentreply").each(function()是临时的并且您将选择多个表单。
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"
RE错误 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 postingnot the form.
$(this)现在posting不是形式。
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.)
（并使其成为您要替换的 html 元素。）
回答by Shlomi Hassid
I would use another approach:
我会使用另一种方法：
when submit triggers > replace parent form:
当提交触发器 > 替换父表单时：
$('form').submit(function(event){
event.preventDefault();
/* fire your validation and $.post */
$(this).replaceWith("<div>new html to replace with</div>");
});
And you can even animate it:
您甚至可以为其设置动画：
$('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()
);
});
});
Not tested.
未测试。
