Zeige ein verstecktes div beim Reload nach submit_form button click

Question

Ich muss ein div auf Seite neu laden, nachdem der Benutzer klickt auf senden Formular Schaltfläche.

Konkret habe ich ein PHP-Kontaktformular in einem show/hide div. Ein Klick auf Kontakt zeigt und verbirgt das Kontaktformular. Sowohl das show/hide js als auch das php Kontaktformular funktionieren perfekt. Wenn der Benutzer klickt senden - die Seite neu geladen und die "Nachricht gesendet" wird in das Kontaktformular div geschrieben. Aber wenn die Seite neu geladen wird, ist das Formular in einem div-Set auf display: none; im CSS - so wird die Seite standardmäßig geladen.

Nach senden, ich brauche die Seite neu zu laden und zeigen das Kontaktformular in der versteckten div. Ich bin mir nicht sicher, wo ich anfangen soll, da das JavaScript für die Seite standardmäßig neu geladen wird. Da es alles PHP ist, kann ich keinen Anker setzen oder im div von content_form aufrufen.

Danke!

Answer 1

Sie können einen PHP-Code verwenden, um ein Skript nur dann zu schreiben, wenn das Formular erfolgreich gesendet wurde.

Dann echo nur ein JavaScript, das Element Anzeige einstellen zu blockieren (zu dem folgenden PHP-Code ähnlich):

if($form_is_valid) 
{ 
    echo '<script type="text/javascript">' 
     . 'document.getElementById("elementID").style.display = "block";' 
     . '</script>'; 
} 

Answer 2

Ich würde eine CSS-Lösung über einen JS vorziehen.

if ($form_is_valid) 
    echo '<style type="text/css">#contact { display: block; }</style>'; 

Edit: nur die Dinge ein wenig sauberer zu machen, würde ich vorschlagen, eine Klasse zu Ihrem Formular hinzufügen, wenn es erfolgreich abgegeben wurde. Etwas wie folgt aus:

$class = $form_is_valid ? ' class="submitted"' : ''; 
echo '<form method="..." action="..."' . $class . '>...</form>'; 

Dann könnten Sie einfach eine CSS-Definition tun, die nach der display: none; Definition kommt, etwa so:

form.submitted { display: block; } 

Answer 3

Antwort der Durchbruch sollte gut funktionieren, aber ich persönlich nicht gefällt Jede Art von Erfolgs- oder Fehlernachricht in das Markup einfügen, selbst wenn es von CSS ausgeblendet wird, wenn es zum Zeitpunkt des Ladens der Seite nicht wirklich der Fall ist. Da die Seite ohnehin neu lädt, würde dies zu tun eliminiert die Notwendigkeit eines JavaScript oder CSS überhaupt dieses Problem zu beheben:

<?php if ($form_is_valid) include('SnippetFileWithSuccessMessageDivInIt.php') /> 

Answer 4

Wenn Sie das Formular mit dem eingereichten Inhalt geladen ist, können Sie Javascript verwenden, um die Gegenwart zu erkennen von Text in den Eingabefeldern. Wenn ein Inhalt vorhanden ist, setzen Sie display: block.