document.getElementById ("test"). Style.display = "hidden" non funziona

Question

Voglio nascondere il mio modulo quando faccio clic sul pulsante di invio. Il mio codice è il seguente:

<script type="text/javascript"> 
    function hide() { 
     document.getElementById("test").style.display = "hidden"; 
    } 
</script> 
<form method="post" id="test"> 
    <table width="60%" border="0" cellspacing="2" cellpadding="2"> 
     <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" 
     align="center"> 
      <td>Ample Id</td> 
      <td>Find</td> 
     </tr> 
     <tr align="center" bgcolor="#E8F8FF" style="color:#006"> 
      <td> 
       <input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" 
       /> 
      </td> 
      <td> 
       <input type="image" src="../images/btnFind.png" id="find" name="find" 
       onclick="javascript:hide();" /> 
      </td> 
     </tr> 
    </table> 
</form> 

Ma quando faccio clic sul pulsante "Trova", quella particolare forma non viene nascosta.

Answer 1

Sostituire hidden con none. Vedi MDN reference.

Answer 2

Imposta la proprietà di visualizzazione CSS su nessuno.

document.getElementById("test").style.display = "none"; 

Inoltre, non è necessariojavascript: per l'attributo onclick.

<input type="image" src="../images/btnFind.png" id="find" name="find" 
    onclick="hide();" /> 

Infine, assicuratevi di non si dispone di più elementi con lo stesso ID .

Se il modulo non va da nessuna parte, Phil ha suggerito di impedire l'invio del modulo. Semplicemente return false nel gestore inviamento.

<form method="post" id="test" onsubmit="return false;"> 

Se si desidera che il modulo per pubblicare, ma nasconde il div sulla successiva caricamento della pagina, si dovrà utilizzare il codice lato server per nascondere l'elemento:

<script type="text/javascript"> 
function hide() { 
    document.getElementById("test").style.display = "none"; 
} 
window.onload = function() { 
    // if form was submitted, PHP will print the below, 
    // which runs function hide() on page load 
    <?= ($_POST['ampid'] != '') ? 'hide();' : '' ?> 
} 
</script> 

Answer 3

sua un elemento di blocco, ed è necessario utilizzare none

document.getElementById("test").style.display="none" 

hidden è utilizzato per visibility

Answer 4

è necessario utilizzare display = none

valore nascosto è collegato con attributet chiamato visibility

modo che il codice dovrebbe essere così

<script type="text/javascript"> 
function hide(){ 
document.getElementById("test").style.display="none"; 
} 
</script> 

Answer 5

questo dovrebbe essere Prova.

document.getElementById("test").style.display="none"; 

Answer 6

è possibile utilizzare qualcosa di simile ....div contenitore

<script type="text/javascript"> 
function hide(){ 
document.getElementById("test").innerHTML.style.display="none"; 
} 
</script> 
<div id="test"> 
<form method="post" > 

<table width="60%" border="0" cellspacing="2" cellpadding="2" > 
    <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center"> 
    <td>Ample Id</td> 
    <td>Find</td> 
    </tr> 

    <tr align="center" bgcolor="#E8F8FF" style="color:#006" > 
    <td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td> 
    <td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td> 
    </tr> 

</table> 

</form> 
</div> 

Answer 7

Attraverso JavaScript

document.getElementById("test").style.display="none"; 

Attraverso Jquery

$('#test').hide(); 

Answer 8

Dovrebbe essere sia

document.getElementById("test").style.display = "none"; 

o

document.getElementById("test").style.visibility = "hidden"; 

Seconda opzione mostrerà uno spazio vuoto in cui la forma era inizialmente presente, dove come la prima opzione non

Answer 9

Ci sono due modi per farlo.

La maggior parte delle risposte ha correttamente rilevato che style.display non ha alcun valore definito "nascosto". Non dovrebbe essere nessuno.

Se si desidera utilizzare "nascosto", la sintassi dovrebbe essere la seguente.

object.style.visibility="hidden" 

La differenza tra i due è la visibilità = proprietà "nascosto" si nasconde solo il contenuto di voi elemento, ma trattenerlo posizione sulla pagina. Mentre il display = "none" nasconderà l'elemento completo e il resto degli elementi nella pagina riempirà quel vuoto creato da esso.

Scegli questa illustration

Answer 10

utilizzando jQuery:

$('#test').hide(); 

utilizzando JavaScript:

document.getElementById("test").style.display="none"; 

ha gettato un errore "'display' Non è possibile impostare di non definito"

S o, fissare per questo sarebbe:

document.getElementById("test").style="display:none"; 

dove il vostro codice html sarà simile a questa:

<div style="display:inline-block" id="test"></div> 

Answer 11

Forse si può aggiungere una classe come 'nascondere'.

Seguire l'esempio qui: https://developer.mozilla.org/fr/docs/Web/API/Element/classList.

document.getElementById ("test"). ClassList.add ("anotherclass");