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

发布时间：2020-12-13 14:08:58 所属栏目：PHP教程来源：网络整理

导读：我有一个 HTML表单,提交时使用 PHP发送一封包含所有问题和答案的电子邮件. 我需要打破这个形式,因为它太长了.我只需要一个提交按钮,并且表单只能加载一次.这显然意味着我需要使用JavaScript show / hides. 我尝试过使用很多不同的类型,但我不能让它们与我的

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!