4
votes

Comment changer le CSS après la soumission d'un formulaire

J'affiche des données sur une page après avoir soumis un formulaire, dans un div sous le formulaire dont la visibilité est initialement définie sur hidden

en utilisant JavaScript Je l'ai configuré pour devenir visible après un clic sur le bouton

HTML:

function showDiv() {
document.getElementById("aftersubmit").style.visibility = 'visible';
}

JS:

<form action = "page2.php" method = "POST">
<select>
    <option selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option selected>Choose...</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<button type="submit" name="btn1" onclick="showDiv()">Next</button>
</form>

<div style = "visibility:hidden" id = "aftersubmit">
    <p>Data</p>
    ...
</div>

Je veux que le div soit visible après avoir cliqué sur le bouton d'envoi du formulaire , mais depuis la publication du formulaire, la page s'actualise et le style redevient masqué.

javascript html css

2 commentaires

utilisez AJAX si vous ne voulez pas l'actualisation, ou utilisez une variable backend (comme tester $ _POST en PHP) pour définir le CSS, ou les cookies, ou le stockage local, etc.

Vous devez soumettre le formulaire via AJAX

3 Réponses :

2
votes

Vous pouvez utiliser Ajax pour envoyer le formulaire sans actualiser.

Pour une solution plus simple, vous pouvez définir une variable GET dans l'url et vérifier si la variable est définie. Je suppose que vous envoyez les données à la même page et que vous souhaitez une solution javascript uniquement.

HTML

if(window.location.href.indexOf("submitted") > -1){
   document.getElementById("aftersubmit").style.visibility = 'visible';
}

<form action = "page2.php?submitted" method = "POST">
<select>
    <option selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option selected>Choose...</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<button type="submit" name="btn1" onclick="showDiv()">Next</button>
</form>

<div style = "visibility:hidden" id = "aftersubmit">
    <p>Data</p>
    ...
</div>

6 commentaires

le formulaire est envoyé avec une méthode POST

Oui, mais vous pouvez toujours définir une variable dans l'url dans l'action de formulaire

@Dialex Merci, cela a fonctionné, mais est-ce la meilleure solution à ce problème?, Ou devrais-je me pencher sur AJAX, je suis prêt à le faire si c'est mieux.

Cela dépend vraiment de vos besoins. Je ne connais pas le contexte de votre code (je ne sais pas si vous utilisez PHP ou non), mais si cela vous suffit, vous pouvez rester avec ce code. L'avantage d'ajax est qu'il ne rafraîchira pas la page et vous obtiendrez le résultat immédiatement sur la page.

@Dialex J'utilise PHP pour mon code, je pense que je vais me pencher sur AJAX car cela pourrait être mieux dans mon cas. Quoi qu'il en soit, merci.

Oui, alors je le recommande. Cela peut être utile pour d'autres cas que vous pourriez avoir à l'avenir :-)

0
votes

si vous n'allez pas utiliser AJAX, alors peut-être qu'un ternaire abrégé pour échanger une classe est une bonne option.

J'utilise une classe utilitaire dans l'exemple ( u-visible ).

HTML / PHP

isset($_POST) && $_POST['formSubmitted']

CSS

<input type="hidden" name="formSubmitted">

ÉDITER: J'utilise $ _POST seul ici, mais vous pouvez l'attacher à un nom d'entrée, ou ajouter une entrée masquée à votre formulaire pour l'utiliser à la place, par exemple

.u-hidden {
    visibility: visible
}

.u-visible {
    visibility: hidden;
}

XXX

J'espère que cela vous aidera. :-)

0 commentaires

-1
votes

Pour ce faire, vous devez envoyer les données par Ajax et utilisez always () et done () et d'autres fonctions!

0 commentaires