我目前正在解决一个问题，该问题基本上涉及处理表单中的所有数据、保存数据以及用文本链接替换整个表单。我的主要目标是将带有一些使用 POST 方法的数据和提交按钮的表单转换为标准文本链接，然后该链接可以获取保存/序列化的数据并将其 POST 到服务器，就像它是原始表单一样；当禁用 JS 时，会呈现标准表单和提交按钮，即优雅降级。我目前正在使用 jQuery，我知道可以通过序列化来处理表单数据，但我不确定如何完全删除或隐藏(无论哪一个)表单，这样它就不会干扰布局周围的 HTML 元素。
总结:
-是否可以使用 jQuery 删除或隐藏整个表单字段？
-jQuery序列化表单数据时，保存到哪里？
-可以通过文本链接(即 <a href="mySavedData">Submit</a>" )以某种方式引用保存的数据并像标准表单一样发布吗？
谢谢。
更新:好的，我在从 test.html 页面调用的单独 JS 文件中实现了 Franz 的代码。 JS文件内容如下:
$(document).ready(function() {
//Store form data before removing
var tempStorage = $('.postLink').serialize();
// Remove form:
$('.postLink').remove();
//Assign onClick event to anchor tag
$('.submit').click(function(){
$.ajax({
//aspx page
url:"doSomethingImportant/10",
//Using POST method
type: "POST",
//The data object
data: tempStorage,
//No caching
cache: false,
//Alert on success
success: function(html) {
alert('great');
}
});
});
});
这里唯一的区别是我使用 class 属性作为我想要删除的表单的标识符，而不是 id。再说一遍，这是我的任务，而不是我的选择。然而，由于某种原因，它没有出现在警报消息中，即它不起作用。下面是我让脚本执行的 html 片段:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
h2.outro {color:DarkGreen;}
</style>
<script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="Form2Link.js"></script>
<title>Form Remover demo</title>
</head>
<body>
<h1 class="intro">Hello World!!</h1>
<p>How's it going??</p>
<a href="">my First Link</a>
<form id = "myForm" name="myForm" action="doSomethingImportant/10" class="postLink" method="post">
<input type="submit" id="submitThis" name="submitThis" value="clickThisLink"></input>
<input type="hidden" id="antiCSRF" name="antiCSRF" value="12345"></input>
</form>
<a class="submit" href="">Submit Link</a>
<a href="">my Second Link</a>
<a href="">my Third Link</a>
<br>
<br>
<form action="doSomethingImportant/10" method="post">
<input type="submit" id="submitThis" value="clickThisLink"></input>
<input type="hidden" value="12345" name="antiCSRF"></input>
</form>
<form action="doSomethingImportant/11" method="post">
<input type="submit" value="clickThisLink"></input>
<input type="hidden" value="12345" name="antiCSRF"></input>
</form>
<h2 class="outro">That's nice, gotta go.</h2>
</body>
</html>
2009 年 11 月 10 日更新: 好的，我找到了解决此问题的另一种方法，即隐藏表单并在表单后立即添加 anchor 标记。然后，我将单击操作附加到作用于隐藏表单中的提交按钮的 anchor 。我现在的问题是，这只适用于 DOM 中定义的一种表单，我想对此函数进行泛化，以便它适用于多种表单。如何遍历每个表单并用其自己的唯一链接替换它？
我当前脚本的代码:
/**
* Hide forms on page load.
* Call submit button within a form from a link
*/
$(document).ready(function() {
//Hide form:
$('.postLink').hide();
//Append a anchor tag after each form that is replaced
$('.postLink').after("<a class=\"submitLink\" href=\"#\">Submit Link</a>");
//Submit button in hidden form
$('.submitLink').click(function(){
$('#myForm').find('input#submitThis').click();
return false;
});
});
最佳答案
第 1 部分很简单:
$('#yourform').hide();
编辑:(据我所知 - 使用 ScottE 的分步想法)
第 2 部分:
将表单保存在局部变量中:
var tempStorage = $('#yourform').serialize();
第 3 部分:
为链接的 onClick 事件分配一个函数，该函数通过 AJAX 请求发送数据:
$('#yourbutton').click( function() {
$.ajax({
// Your PHP processing script goes here
url: "yourfile.php",
// You wanted to use POST, right?
type: "POST",
// The data object (I hope, it's accessible here)
data: tempStorage,
// We don't need caching
cache: false,
// A function that gets executed on success
// Note that you have the response of the script in the html variable
success: function(html) {
alert('great');
}
});
});
关于javascript - 使用 JQuery 收集表单数据并删除或隐藏表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1676188/