表格发布数据

Question

我有一个3页的注册页面。用户在第一页上选择一个选项并点击提交后，表单使用jquery的动画方法将转换为下一个表单，这意味着它保持在同一页面上。我的问题是如何从第一种形式获取数据，因为第二种形式的内容依赖于这些信息。这是我的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来显示/隐藏“当前页面”。这将允许您一次提交所有数据。

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> 

Answer 2

使用jquery --- $('input[name=Reg_type]:checked').val()这会给你选定的值。