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

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

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

<div style = "display:none">

显示和可见性都不同。

显示：无法在页面中显示，并且不会占用任何空间。

可见性：隐藏了一个元素，但它仍然会占用与以前相同的空间。

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

Answer 2

您在此处犯的一个错误是忘记关闭<form>标记，首先在表单标记中使用display:none，然后使用onclick()将其样式更改为display:block。< / p>

试试这个

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

Answer 3

这应该有效：

function Openform()
{
document.getElementById("form1").style.visibility = "visible";
}

HTML：

<div id = "form1" style = "visibility:hidden">
<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>

Answer 4

试试这个

＆＃13;

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

＆＃13;

<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></td>
      </tr>
      <tr>
        <td>
          <a href="#" class="close-classic"></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; ">

＆＃13;

Answer 5

好像你的所有代码都是正确的，除了很少关闭HTML标签。

＆＃13;

function Openform()
{
    alert("Openform clicked!");
    document.getElementById('form1').style.display = '';
}

＆＃13;

<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> Welcome User</td></tr>
<tr>
    <td><a href="#" class="close-classic">I am the second line</a></td>
</tr>
</table>
</div>
</form>
</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; ">

＆＃13;

快乐编码：）

Answer 6

您可以在您的函数中使用：

var elem = document.getElementById('id');
 elem.style.display = 'none'; // hide
 elem.style.display = 'block'; // show - use this for block elements (div, p)
 elem.style.display = 'inline'; // show - use this for inline elements (span, a)

或style.visibility实际上会使div仍然存在，但是＆＃34;所有空的＆＃34;或者＆＃34;所有白色＆＃34;

 elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
 elem.style.visibility = 'visible';

如果您使用的是jQuery，只要您想设置display属性，就可以更轻松地完成：

$(elem).hide();
$(elem).show();

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

6 个答案: