在按钮点击/提交时显示整个表单

Question

我创建了一个表格。在提交表单时，我想显示整个表单，但目前没有这样做。这是我的代码：

 function Openform()
{
    document.getElementById('form1').style.display = '';
}

 <div id = "form1" style = "display:none">
<form  id="formirri" method="post" action="" target="_parent">
       <br/><br/>
    <div id="demo">
    <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr>
<tr>
    <td><a href="#" class="close-classic"></a></td>
</tr>
</table>

</div>

<input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();"
  style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">

原文由 Sarah Salar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你在风格上犯了一个错误。改变如下：

 function Openform()
{
document.getElementById('form1').style.display = '';
}

<div style = "display:none">

显示和可见性都不同。

display :none 不会出现在页面中，不占用任何空间。

visibility :hidden 隐藏一个元素，但它仍然会占用与以前相同的空间。

HTML:

 <div id = "form1" style = "display:none">
<form  id="formirri" method="post" action="" target="_parent">
       <br/><br/>
    <div id="demo">
    <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr>
<tr>
    <td><a href="#" class="close-classic"></a></td>
</tr>
</table>

</div>
</form>
</div>

原文由 lalithkumar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

One mistake you made here is you forgot to close your <form> tag, First use display:none in your form tag then using onclick() change it’s style to display:block 。

尝试这个

 function Openform(){
  document.getElementById('form1').style.display = 'block';
}

   <div style = "Visibility = hidden">
<form  id="form1" method="post" action="" target = "_parent" style="display: none" ><br><br>
    <div id="demo">
      <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);">
        <tr>
          <td colspan=1>1</td>
        </tr>
        <tr>
          <td><a href="#" class="close-classic">2</a></td>
        </tr>
      </table>

    </div>
</form>

<input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();"
  style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">

原文由 Saurabh Agrawal 发布，翻译遵循 CC BY-SA 3.0 许可协议