Question

我有一个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>

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

Answer 1

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

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

例如，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>

Answer 2

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

表格过帐数据

2 个答案: