Ganzes Formular auf Knopfdruck anzeigen/senden

Question

Ich habe ein Formular erstellt. Beim Abschicken des Formulars möchte ich das ganze Formular anzeigen, tut es aber momentan nicht. Hier ist mein Code:

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

Sie haben einen Fehler gemacht in style.Change wie unten:

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

<div style = "display:none"> 

Anzeige und Sichtbarkeit beide unterschiedlich sind.

Anzeige: Keine ist auf der Seite nicht verfügbar und belegt keinen Platz.

Sichtbarkeit: versteckt verbirgt ein Element, aber es wird immer noch den gleichen Platz wie zuvor einnehmen.

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

Ein Fehler, den Sie hier gemacht ist, dass Sie Ihre <form> Tag, Erster Einsatz display:none in Ihrem Formular-Tag zu schließen vergessen haben, dann mit onclick() Änderung es Stil ist zu display:block.

Versuchen Sie, diese

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

Diese Arbeit sollte:

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

versuchen diese

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

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

Answer 5

Sie in Ihrer Funktion wie diese verwenden:

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) 

oder style.visibility tatsächlich die div machen immer noch da sein, aber sein „alle leer“ oder „alles weiß“

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

Wenn Sie jQuery verwenden, können Sie es noch einfacher machen können, solange Sie die Anzeige Eigenschaft festlegen möchten:

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

Answer 6

Scheint Ihr gesamter Code ist korrekt, mit Ausnahme einiger schließender HTML-Tags.

function Openform() 
 
{ 
 
    alert("Openform clicked!"); 
 
    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> 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; ">

Glücklich Codierung :)