如何隐藏/显示HTML表单的各个部分

Question

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

我需要打破这个形式,因为它太长了.我只需要一个提交按钮,并且表单只能加载一次.这显然意味着我需要使用JavaScript show/hides.

我尝试过使用很多不同的类型,但我不能让它们与我的表单一起正常工作.这是非常大,似乎是非常复杂的与show/hide工作:(

我以前使用过show/hide divs而不是table.

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

我想要的是,

• 下一个按钮,将您带到表单的另一部分.
• 在下一部分中,您可以返回上一部分或再次转到另一部分.
• 包含上一个或提交的最后一部分.

提前致谢.

Answer 1

这是一个非常普遍的要求.这是一种方式

• 使用div易于管理的ids 在页面中打破您的表单,只有第一个可见

.

<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>

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

.

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;
}

编辑

如果要使用表格布局,请将for分隔为更多表格(每页一个)并将ids赋予表格而不是divs