0

我有一个 3 页的注册页面。用户在第一页选择一个选项并单击提交后，表单使用 jquery 的 animate 方法转换为下一个表单，这意味着它保持在同一页面上。我的问题是如何从第一种形式获取数据，因为第二种形式的内容取决于该信息。这是我的html：

<div id="Registration" style="display:none;">
        <div class="box">
            <form id="frmtype1" action="#" name="frmtype1" method="post">
                <header>Registration Options</header><br/>
                 <label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>

                 <label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>

                 <label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
                 <p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
            </form>

            <form name="everything" id="everything" action="#" method="post">
                <header>Registration Information</header><br/>
                <label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
                Last Name*: <input type="text" name="lname" id="lname" /> <br/>
                Address*: <input type="text" name="address" id="address" /> <br/>
        </form>
        </div>
    </div>

因此，一旦选择了一个选项，第一个表单就会消失，而下一个会出现。那么如何获取他们选择的选项的数据呢？谢谢

4

2 回答 2

1

由于它们依赖于一种形式的信息，因此“页面”实际上应该是相同的形式。您使用 jQuery/JavaScript 来显示/隐藏“当前页面”。这将允许您一次性提交所有数据。

  1. 将所有输入元素包装在一个 html 表单标签中
  2. 对于每个表单“段”，您将需要使用您的 js 来隐藏/显示包装 HTML 容器。默认为表单的“第 1 页”，其余为隐藏。
  3. 将您的提交按钮更改为一个按钮，并在其上有一个点击事件。当用户单击按钮时，输入被验证，然后 jQuery 取消隐藏“第 2 页”。
  4. 在您的最后一个“页面”上有一个正常的提交按钮，然后所有表单数据都发布在一个中。

例如，html 可能如下所示：

<script type="text/javascript">
  $(document).ready(function{

    $(".next-page").click(function(){
      $(".box-wrapper").hide();
      $("#page-" + $(this).data("page")).show();
    });

  });
</script>

<div class="registration">
  <form name="regform" action="" method="post">
    <!-- Page 1 -->
    <div class="box-wrapper" id="page-1">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
      </div>
    </div>
    <!-- Page 2 -->
    <div class="box-wrapper" id="page-2" style="display: none;">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
      </div>
    </div>
    <!-- Page 3 -->
    <div class="box-wrapper" id="page-3" style="display: none;">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="submit" name="submit" class="submit" value="Complete Registration"/>
      </div>
    </div>
  </form>
</div>
于 2012-09-23T21:26:06.087 回答
0

使用 jquery ---$('input[name=Reg_type]:checked').val()这将为您提供选定的值。

于 2012-09-23T20:51:42.953 回答