Afficher un div masqué sur le rechargement après le bouton submit_form cliquez sur

Question

Je dois montrer un div sur page recharger après que l'utilisateur clique sur le soumettre formulaire bouton.

Plus précisément, j'ai un formulaire de contact PHP dans un div show/hide. Un clic sur contact affiche et masque le formulaire de contact. Les deux show/hide js et le formulaire de contact php fonctionnent parfaitement. Lorsque l'utilisateur clique sur soumettre - la page se recharge et le "message envoyé" est écrit dans le formulaire de contact div. Mais lorsque la page se recharge, le formulaire est dans un ensemble div à display: none; dans le CSS - qui est comment la page se charge par défaut.

Sur soumettre, j'ai besoin de la page pour recharger et afficher le formulaire de contact dans la division cachée. Je ne sais pas exactement par où commencer puisque tout le javascript pour la page se recharge par défaut. De plus, puisque PHP est tout ce que je ne peux pas définir ou appeler une ancre dans la div contenu_form.

Merci!

Answer 1

Vous pouvez utiliser du code PHP pour écrire un script uniquement si le formulaire a été envoyé avec succès.

Ensuite, il suffit d'écho d'un script JavaScript pour définir l'affichage de l'élément à bloquer (similaire au code PHP suivant):

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

Answer 2

je préférerais une solution CSS sur un JS.

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

Edit: Juste pour rendre les choses un peu plus propre, je suggère d'ajouter une classe à votre formulaire si elle a été soumise avec succès. Quelque chose comme ceci:

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

Ensuite, vous pouvez simplement faire une définition CSS qui vient après la définition display: none;, comme ceci:

form.submitted { display: block; } 

Answer 3

réponse de percée devrait fonctionner correctement, mais personnellement, je n'aime pas mettre n'importe quel type de succès ou message d'erreur dans le balisage, même caché par CSS, si ce n'est pas vraiment le cas au moment du chargement de la page. Étant donné que la page est rechargeait de toute façon, faire cela éliminerait la nécessité de tout code JavaScript ou CSS pour résoudre ceci:

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

Answer 4

Si vous le formulaire est chargé avec le contenu soumis, vous pouvez utiliser javascript pour détecter la présence de texte dans les champs de saisie. Si un contenu est présent, définissez display: block.