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

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

Answer 1

你在这里犯的一个错误是你忘记关闭你的 <form>标记，首先使用display:none在您的表单标签中然后使用 onclick()将其样式更改为 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; ">