使用 JQuery 收集表单数据并删除或隐藏表单字段答案

【问题标题】：Collecting form data and removing or hiding a form field using JQuery使用 JQuery 收集表单数据并删除或隐藏表单字段
【发布时间】：2009-11-04 19:53:54
【问题描述】：

我目前正在解决一个问题，该问题主要涉及处理表单中的所有数据，保存它，并用文本链接替换整个表单。我的主要目标是使用 POST 方法和提交按钮将带有一些数据的表单转换为标准文本链接，然后该链接可以获取保存/序列化的数据并将其 POST 到服务器，就好像它是原始表单一样；当 JS 被禁用时，会出现标准的表单和提交按钮，即优雅的降级。我目前正在使用 jQuery，我知道可以通过序列化来处理表单数据，但是我不确定如何完全删除或隐藏（无论哪种方式）一个表单，因此它不会干扰布局周围的 HTML 元素。

总结：

-是否可以使用 jQuery 移除或隐藏整个表单域？

-jQuery序列化表单数据时，保存到哪里？

-是否可以通过文本链接（即<a href="mySavedData">Submit</a>"）以某种方式引用保存的数据并像标准表单一样发布？

谢谢。

更新：好的，我在一个单独的 JS 文件中实现了 Franz 的代码，我从我的 test.html 页面调用。 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 的 sn-p：

<?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 日更新： 好的，我找到了解决此问题的另一种方法，即隐藏表单并在表单后立即添加锚标记。然后，我将单击操作附加到作用于隐藏表单中的提交按钮的锚点。我现在的问题是这只适用于 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;
    });
});

【问题讨论】：

这看起来很奇怪。首先，一个
我同意@jitter，听起来你正试图在 Javascript 中重新创建 GET？
@Jitter，别问我，这才是大佬要的，哈哈。不过感谢您的反馈。

标签： javascript jquery html xhtml

【解决方案1】：

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

【讨论】：

这看起来是正确的，但是如果我有多个表单要转换为 POST 序列化数据的文本链接，该怎么办。也就是说，当脚本运行时，它将序列化 id = "yourform" 的表单中的所有数据。当需要链接到 POST 数据时，链接如何知道要发送哪些序列化数据？非常感谢您的帮助。
好吧，您可以将序列化的数据存储在一个数组中，然后在通过链接提交表单时选择正确的元素。还是我在这里误解了什么？

【解决方案2】：

如果我了解您要查找的内容，您可以执行以下操作：

处理表单的提交事件。
将表单数据存储在 js 中的局部变量中 - 看http://docs.jquery.com/Ajax/serialize
隐藏表单
显示将提交表单的链接（再次），并处理它的点击事件，启动一个 ajax 调用，您可以在其中传递在步骤 2 中创建的局部变量。

这似乎是一个奇怪的要求......

【讨论】：

也许是确认？ “你真的要这样做吗”等...？

【解决方案3】：

好吧，我采取了隐藏所有表单并在每个基于class="postLink" 的表单之后附加锚标记的方法，我添加了一个条件语句，如果表单还没有一个唯一 ID，则添加一个唯一 ID，脚本然后在隐藏表单的末尾添加一个带有唯一 ID 和提交按钮值的锚标记。一个单独的单击功能处理隐藏表单中的提交按钮，该按钮通过唯一 ID 绑定到锚标记。代码如下：

/**
 * Hide all forms with class="postLink" on page load.
 * Call submit button within a form from an anchor tag
 */
$(document).ready(function() {
  //Hide form(All forms with class="postLink" will be hidden):
  $('.postLink').hide();
 
  var num = 0;
  //Loop over each form with a postLink class
  $("form").each(function(){
    //Add value of submit button as name of text link
    if($(this).hasClass("postLink")){
      //Get value attribute from submit button
      var name = $(this).find('input#submitThis').val();
   
      //Add a uniqueID if the form has no id
      if($(this.id).length == 1){
        this.id='uniqueID'+num;
        num++;
      }
   
      var id = $(this).attr('id');
      //Append a anchor tag after each form that is replaced
      $(this).after("<a id="+id+" class=\"submitLink\" href=\"#\">"+name+"\</a>");
    }
  });

  //Submit button in hidden form by clicking associated anchor tag
  $('.submitLink').click(function(){
    var anchorID = $(this).attr('id');
    //Find the form id that matches the anchor id
    $("form").each(function(){
      if(this.id == anchorID){
        $(this).find('input#submitThis').click();
      } 
    });
    return false;
  });
});

【讨论】：