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

前端之家收集整理的这篇文章主要介绍了php – 如何隐藏/显示HTML表单的各个部分前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 HTML表单,提交时使用 PHP发送一封包含所有问题和答案的电子邮件.

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

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

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

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

我想要的是,

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

提前致谢.

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

>使用易于管理的ID并且只有第一个可见的div在页面中打破您的表单

.

<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分隔为更多表格(每页一个)并将id分配给表格而不是div

猜你在找的PHP相关文章