如何隐藏/显示HTML表单的各个部分 [英] How to hide/show sections of a HTML form

问题描述

我有一个HTML表单，它在提交时使用PHP发送包含所有问题和答案的电子邮件。

我需要将表单打破，因为它太长了。我只需要一个提交按钮，并且只需要加载一次。这显然意味着我需要使用JavaScript显示/隐藏。

我试过使用很多不同的类型，但我无法让它们与我的表单正常工作。这是非常大的，似乎是非常复杂的工作与显示/隐藏：（b / b）

我以前使用过show / hide div，但不是表格。

任何人都可以提供帮助吗？

我想要的是，

• 下一个按钮，可将您带到表单的另一部分。
  
• 在下一部分中，您可以返回到上一个部分部分或再次转到另一部分。


• 最后一部分包含上一个或提交。
  

在此先感谢。

解决方案

这是一个相当普遍的要求。 b $ b

• 使用 div s以简单的方式管理 id


。

 < form action =....> 
<！ - 第一页的样式设置为可见 - > 
< div id =formpage_1style =v可见性：可见;显示：块; ..> 
< label for =..> ..< / label> 
< input type =....> 
 .. 
<！ - 下一个按钮 - > 
< input type =buttonvalue =nextonclick =pagechange（1,2）;> 
< ; / div> 
<！ - 第二个和后续页面的样式设置为不可见 - > 
< div id =formpage_2style =visibility：hidden;显示：无; ..> 
< label for =..> ..< / label> 
< input type =....> 
 .. 
 <！ -  PREVIOUS和NEXT按钮 - > 
< input type =buttonvalue =backonclick =pagechange（2,1）;> 
< input type =buttonvalue =nextonclick =pagechange（2,3）;> 
< / div> 
 ... 
< div id =formpage_10style =visibility：hidden;显示：无; ..> 
< label for =..> ..< / label> 
< input type =....> 
 .. 
 <！ -   -  PREVIOUS和SUBMIT按钮 - > 
< input type =buttonvalue =backonclick =pagechange（10,9）;> 
< input type =submitvalue =Submit> 
< / div> 
  

• 使用简单的JS函数在页面之间切换

。

 函数pagechange（frompage，topage）{
 var page = document.getElementById（'formpage _'+ frompage）; 
 if （！page）返回false; 
 page.style.visibility ='hidden'; 
 page.style.display ='none'; 
 
 page = document.getElementById（'如果（！page）返回false; 
 page.style.display ='block'; 
 page.style.visibility ='visible'; 
 
返回true; 
} 
  

编辑

如果您想使用表格布局，请打破t他为更多的表格（每个页面一个表格）并将 id s赋予表格而不是 div s

I have a HTML form which when submitted sends an email with all the questions and answers using PHP.

I need to break the form down as it's too long. I need only one submit button and for the form to load only once. This obviously means that I need to use JavaScript show/hides.

I've tried using many different types but I can't get them to work properly with my form. It is quite large and seems to be very complicated to get to work with show/hide :(

I've used show/hide divs before but not tables.

Anyone have anything that can help?

What I'd like is,

• A next button that takes you to another section of the form.
• Whilst on the next section you can return back to the previous section or go on to another section again.
• The last section to contain previous or submit.

Thanks in advance.

解决方案

That's quite a common request. Here is one way

• Break your form in pages using divs with easy to manage ids and only the first one visible

.

<form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; .."> 
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- NEXT button -->
  <input type="button" value="next" onclick="pagechange(1,2);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and NEXT buttons -->
  <input type="button" value="back" onclick="pagechange(2,1);">
  <input type="button" value="next" onclick="pagechange(2,3);">
</div>
...
<div id="formpage_10"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and SUBMIT buttons -->
  <input type="button" value="back" onclick="pagechange(10,9);">
  <input type="submit" value="Submit">
</div>

• Use a simple JS function to switch between the pages

.

function pagechange(frompage, topage) {
  var page=document.getElementById('formpage_'+frompage);
  if (!page) return false;
  page.style.visibility='hidden';
  page.style.display='none';

  page=document.getElementById('formpage_'+topage);
  if (!page) return false;
  page.style.display='block';
  page.style.visibility='visible';

  return true;
}

Edit

If you want to use a table layout, break the for into more tables (one for each page) and give the ids to the tables instead of the divs

这篇关于如何隐藏/显示HTML表单的各个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！