Fatal编程技术网
  • javascript/
  • Javascript 使用JQuery收集表单数据并删除或隐藏表单字段

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

javascript jquery html

Javascript 使用JQuery收集表单数据并删除或隐藏表单字段,javascript,jquery,html,xhtml,Javascript,Jquery,Html,Xhtml,我目前正在处理一个问题，基本上涉及处理表单中的所有数据，保存它，并用文本链接替换整个表单。我的主要目标是将带有使用POST方法的一些数据和submit按钮的表单转换为标准文本链接，然后可以获取保存/序列化的数据并将其发布到服务器，就像它是原始表单一样；当JS被禁用时，将显示标准的表单和提交按钮，即优雅的降级。我目前正在使用jQuery，我知道可以通过序列化表单数据来处理表单数据，但我不确定如何完全删除或隐藏表单（无论哪种可能），这样它就不会干扰周围HTML元素的布局 总之： -是否可以使用jQu

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

总之：

-是否可以使用jQuery删除或隐藏整个表单字段

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

-保存的数据能否以某种方式被文本链接引用（即
“
”）并作为标准表单发布

多谢各位

更新：好的，我在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>


h1.intro{颜色：蓝色；}
p、 重要信息{颜色：绿色；}
h2.outro{color:DarkGreen；}
表单删除程序演示
你好，世界！！
进展如何





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

/**
*在页面加载时隐藏表单。
*从链接调用表单中的submit按钮
*/
$（文档）.ready（函数（）{
//隐藏形式：
$（'.postLink'）.hide（）；
//在每个被替换的表单后附加锚定标记
$（'.postLink'）。在（“”）之后；
//以隐藏形式提交按钮
$（'.submitLink'）。单击（函数（）{
$（'#myForm'）。查找（'input#submitThis'）。单击（）；
返回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');
        }
    });
});
第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');
        }
    });
});
如果我了解您的需求，您可以执行以下操作：

  • 处理表单的提交事件
  • 将表单数据存储在js中的局部变量中-look to
  • 隐藏表格
  • 显示将提交表单的链接（再次），并处理它的click事件，启动一个ajax调用，在其中传递在步骤2中创建的局部变量
    • 这似乎是一个奇怪的请求…

    如果我了解您在寻找什么，您可以执行以下操作：

  • 处理表单的提交事件
  • 将表单数据存储在js中的局部变量中-look to
  • 隐藏表格
  • 显示将提交表单的链接（再次），并处理它的click事件，启动一个ajax调用，在其中传递在步骤2中创建的局部变量
    • 这似乎是一个奇怪的请求…

    好吧，我用
    class=“postLink”隐藏了我所有的表单，并在每个表单后面附加锚定标记“
    ，我添加了一条条件语句，该语句会添加一个唯一ID。如果表单还没有唯一ID，脚本会在隐藏表单的末尾添加一个带有唯一ID和submit按钮值的锚标记。单独的单击功能处理隐藏形式的提交按钮，该按钮通过唯一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;
  });
});

    /**
*在页面加载时使用class=“postLink”隐藏所有表单。
*从锚标记调用表单中的submit按钮
*/
$（文档）.ready（函数（）{
//隐藏表单（所有带有class=“postLink”的表单都将被隐藏）：
$（'.postLink'）.hide（）；
var num=0；
//使用postLink类在每个窗体上循环
$（“形式”）。每个（函数（）{
//添加提交按钮的值作为文本链接的名称
if（$（this.hasClass（“postLink”））{
//从提交按钮获取值属性
var name=$（this.find（'input#submitThis'）.val（）；
//如果表单没有id，请添加唯一id
if（$（this.id）.length==1）{
this.id='uniqueID'+num；
num++；
}
var id=$（this.attr（'id'）；
//在每个被替换的表单后附加锚定标记
$（此）。在（“”）之后；
}
});
//通过单击关联的锚标记以隐藏形式提交按钮
$（'.submitLink'）。单击（函数（）{
var anchorID=$（this.attr（'id'）；
//查找与锚id匹配的表单id
$（“形式”）。每个（函数（）{
if（this.id==anchorID）{
$（this）.find（'input#submitThis'）。单击（）；
} 
});
返回false；
});
});
    好的，我隐藏了我所有的表单，并在每个表单后面添加了锚定标记。基于
    class=“postLink”
    ，我添加了一个条件a