2011-08-23 14 views
6

Ciao, sto avendo qualche problema a far funzionare tutto questo, molto semplicemente tutto quello che voglio fare è mostrare un div dopo che il mio modulo HTML è stato inviato.Nascondi/Mostra Div dopo che il modulo è stato inviato?

<head> 

<script type="text/javascript"> 
function showHide() { 
    var div = document.getElementById(hidden_div); 
    if (div.style.display == 'none') { 
    div.style.display = ''; 
    } 
    else { 
    div.style.display = 'none'; 
    } 
} 
</script> 

</head> 


<body> 

<form method="post" name="installer"> 

<label>Home Keyword</label> 
<br /> 
<input type="text" name="hello" value=""> 
<br /> 
<input type="submit" value="" name="submit" onsubmit="showHide()"> 

</form> 

<div id="hidden_div" style="display:none"> 
<p>Show me when form is submitted :) </p> 
</div> 

</body> 

Qualsiasi aiuto sarebbe molto apprezzato grazie :)

+0

Spostare l'attributo onsubmit al form. Inoltre, non utilizzare "Invia" come nome di controllo del modulo mentre ombreggia il metodo di invio del modulo. In quanto sopra, * form.submit * farà riferimento al controllo, non al metodo, quindi chiamarlo genererà un errore. – RobG

risposta

16

penso che stai manca solo tra virgolette "hidden_div" nel tuo document.getElementById("hidden_div") chiamata!

Ma in realtà, la pagina probabilmente sta postando indietro, reimpostando lo stato della pagina e quindi lasciando hidden_div apparentemente sempre in uno stato nascosto - hai intenzione di gestire l'invio del modulo tramite AJAX?

Se volete vedere il comportamento previsto, si dovrebbe spostare la chiamata showHide() all'elemento <form>, e restituire false dopo che è:

<form method="post" name="installer" onsubmit="showHide(); return false;"> 

e lasciare il pulsante di invio come:

<input type="submit" value="" name="submit" /> 

Si noti inoltre che non è stato auto-chiuso il tag del pulsante <input /> o che è stato visualizzato alcun testo da mostrare al suo interno.

+0

Grazie Cory sì che sembra fare il trucco e haha ​​sì ho le virgolette nel mio codice originale ma si sono perse nella traduzione, penso che il mio caffè abbia bisogno di un rabbocco: P – Jessica

+0

Non c'è bisogno di "chiudere" l'input tag, l'OP non ha indicato che XHTML è in uso ed è estremamente raro utilizzarlo sul web. – RobG

+0

@RobG: l'ho dedotto solo dal fatto che lo stava facendo con i tag '
', ma potresti avere ragione. –

2

è necessario mettere showhide funzione sulla forma onsubmit invece di input

<form method="post" name="installer" onsubmit="showHide()"> 

si sta anche perdendo citazioni come @Cory menzionato

Problemi correlati