HTML& JQuery:如何从以前的表单中检索数据

时间:2012-05-10 10:48:02

标签: javascript jquery html

我正在使用JQuery和HTML创建一个应用程序。在第一种形式中,我们要求您输入一个ID,然后在选中此项后,系统会要求您添加更多信息。我遇到的问题是,在第二页中按提交后,我想将所有信息保存在一起,这包括在第一页中输入的ID。

表单是使用HTML创建的,功能是使用JQuery完成的。我知道这可以使用PHP完成,但由于我没有在这个应用程序中使用任何PHP,我想知道这可能是其他任何方式。

我在其中一个.js页面中使用它。以下是第一页要求提供ID的HTML ...

编辑:

的index.html

<script type="text/javascript" charset="utf-8">
$('#RegisterForm').submit(function(){
$.cookie('cardNumberRegField', $('#cardNumberRegField').val());
});
</script>   

<form id="RegisterForm" method="post" data-ajax="false" id="registerCardForm" 
      action="register.html"> 
        <input type="text" id="cardNumberRegField" type="tel"  name="cardNumber" 
               class="required number register" minlength="16" maxlength="16"/> 
        <input name="Submit" type="submit" class="button" value="Register"/>
</form>

register.html

<script type="text/javascript" charset="utf-8">
$('#AccountDetailsForm').submit(function(){
var cardNumberReg = $.cookie('cardNumberRegField');
$('#tfscCardNumber').val(cardNumberReg );
});
</script>

<form id="AccountDetailsForm" method="post" data-ajax="false" id="thankyoupage" action="thankyou.html">

<input  id="tfscCardNumber" type="hidden" name="tfscCardNumber" class="readonly" minlength="2" maxlength="20" readonly="readonly" disabled="disabled"/>            

有人知道任何解决方案吗?

3 个答案:

答案 0 :(得分:4)

您可以通过

将数据从一个页面传递到另一个页面
  1. QueryString
  2. Cookie
  3. 会话(基于用户的服务器脚本)
  4. Localstorage

答案 1 :(得分:2)

您希望在第二个表单帖子中保存的值需要存储在接收第二个帖子的服务器上(在第一个表单发布期间)或在第二个帖子中重新发布。

在我看来,好像你没有在第一篇文章中使用服务器端技术,即你发布到html页面。因此,解决方案似乎是上述两者中的后者。由于您没有使用服务器端技术,我会考虑捕获第一个表单提交并将值存储在cookie中。然后在第二页上,您可以捕获表单帖子并添加Cookie中的值。

要执行此操作,我会使用jquery.submitjquery.cookie并添加如下内容;

编辑:index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!--[if IE]><![endif]-->
        <title></title>
        <script type="text/javascript" src="../_/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="../_/js/jquery.cookie.js"></script>
        <script type="text/javascript">
            $(document).ready(function () { 
                $('#RegisterForm').submit(function () {
                    $.cookie('cardNumberRegField', $('#cardNumberRegField').val());
                });
            });
    </script> 
    </head>
    <body>
        <form id="RegisterForm" action="register.html">  
            <input type="text" id="cardNumberRegField" value="test" />  
            <input type="submit" value="Register" /> 
        </form>
    </body>
</html>

编辑:register.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!--[if IE]><![endif]-->
        <title></title>
        <script type="text/javascript" src="../_/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="../_/js/jquery.cookie.js" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#tfscCardNumber').val($.cookie('cardNumberRegField'));
            });
        </script>
    </head>
    <body>
        <form id="AccountDetailsForm" action="thankyou.html"> 
            <input id="tfscCardNumber" type="text" value="undefined" /> 
        </form>
    </body>
</html>

答案 2 :(得分:1)

您可以在一个不可见的div中找到thr表单1中的值,然后在提交表单2时获取它们