Bonjour,

Je voudrais faire un genre de cadre où lorsque l'on clique dessus, il fait apparaître le formulaire ci-dessous :

    <form action="secret.php" method="post">
    <p>
    <input type="password" name="mot_de_passe" /> 
    <input type="submit" value="Valider" />
    </p>
</form>

Est ce possible ? Si oui si quelque pourrait m'aider merci sa serait cool 

Zoki_Marciano a écrit:

tu passes par javascript en écoutant un événement au click sur <form>.

Utilise du PHP. Je connait pas la syntax exact mais je pense que tu fait un petit coup de include et ca passe.

<div>

<?php 

if $_POST['click_form']{
    include('formulaire.php'); ?>

</div>

Fait attention ca risque d'actualise ta page...

Bonsoir,

Selon la structure de ton HTML, soit avec un "target" en css, ou le mieux en JavaScript comme l'indique Zoki_Marciano 

addEventListener sur le bouton : https://www.w3schools.com/jsref/met_element_addeventlistener.asp 

tu créés 2 classes CSS et tu fais un Toggle dans ta fonction (dans le listener)

https://www.w3schools.com/howto/howto_js_toggle_class.asp

C'est vraiment très simple, si tu n'y arrives pas postes dans le forum Javascript ou consulte le cours JS d' OCR.

PS: En PHP, c'est pas son rôle la... on reste côté client UI.

-
Edité par pipelette13 13 novembre 2018 à 0:11:38

Bein fallait pas répondre ......  jt'e taquine  

Ta solution est valable, mais pourquoi recharger une page juste pour afficher un conteneur HTML ? donc du JavaScript sauf s'il ya des données sensibles, ce qui est peu probable ici.

On est pas la pour fournir un code tout fait mais pour aider et apprendre, ce n'est pas une solution, sinon c'est un commerce !

Quand j'ai commencée il n'y avait pas encore internet en France, alors comment faisions nous hein  (moi c'était le langage basic avec des livres parfois en Anglais)

Se documenter fait au moins 50% du travail, après on transcris en code...

J'ai donnée les mots clés , je me cite moi même qui l'est écrite seule sans aide : 

pipelette13 a écrit:

Bonsoir,

Selon la structure de ton HTML, soit avec un "target" en css, ou le mieux en JavaScript comme l'indique Zoki_Marciano 

addEventListener sur le bouton : https://www.w3schools.com/jsref/met_element_addeventlistener.asp 

tu créés 2 classes CSS et tu fais un Toggle dans ta fonction (dans le listener)

https://www.w3schools.com/howto/howto_js_toggle_class.asp

C'est vraiment très simple, si tu n'y arrives pas postes dans le forum Javascript ou consulte le cours JS d' OCR.

PS: En PHP, c'est pas son rôle la... on reste côté client UI.

-
Edité par pipelette13 il y a environ 1 heure

 Il y a tout, donc go le cours je ou le forum js, ou target en css.

--> Voilà un exemple basique : https://jsfiddle.net/928ofbmt/ 

Le Listener (écouteur d'événements) + un Toggle == happy ??? 

-
Edité par pipelette13 13 novembre 2018 à 1:32:49

pipelette13 a écrit:

Bonsoir,

Selon la structure de ton HTML, soit avec un "target" en css, ou le mieux en JavaScript comme l'indique Zoki_Marciano 

addEventListener sur le bouton : https://www.w3schools.com/jsref/met_element_addeventlistener.asp 

tu créés 2 classes CSS et tu fais un Toggle dans ta fonction (dans le listener)

https://www.w3schools.com/howto/howto_js_toggle_class.asp

C'est vraiment très simple, si tu n'y arrives pas postes dans le forum Javascript ou consulte le cours JS d' OCR.

PS: En PHP, c'est pas son rôle la... on reste côté client UI.

Ok merci, je vais me renseigner avec les sources que vous m'avez donné

EDIT:Lorsque le cadre a disparu, le but est d'écrire dans le formulaire et de valider. Je ne peux rien faire car lors d'un clique le cadre réapparait...

-
Edité par ThomasOtt1 13 novembre 2018 à 9:56:42

Normal c'est un Toggle (comme une switch)  

Redstruct90 mettait en doute ma réponse...

---

mots-clé: classList.remove et classList.add

Sinon bloquer via un booléen

Si j'ai le temps ce soir...

-
Edité par pipelette13 13 novembre 2018 à 11:40:54

pipelette13 a écrit:

Normal c'est un Toggle (comme une switch)  

Redstruct90 mettait en doute ma réponse...

---

mots-clé: classList.remove et classList.add

Sinon bloquer via un booléen

Si j'ai le temps ce soir...

-
Edité par pipelette13 il y a environ 1 heure

Merci pour le temps que tu a pris le code ci-dessous répond a ce que je voulais ! 

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css" />


<div class="content">
  <form class="pas-vu" action="passe.php" method="post">
    <p>
    <input type="password" name="mot_de_passe" />
    <input type="submit" value="Valider" />
    </p>
 </form>
<script>
const content = document.querySelector('.content');
const form = document.querySelector('.content form');


content.addEventListener('click', function(){
  form.classList.remove('pas-vu');  
});


</script>
</div>
</html>

Et bein voilà, c'est mieux de le faire sois même non ?

Tu sais maintenant utiliser le Listener, dans lequel tu peux cumuler les événement : clic, mouseover, focus, ect... dans une même fonction.

Ainsi qu'ajouter / supprimer une class ou faire un toggle, c'est pratique... et tu peux séparer ton js du html

Bonne continuation 

-
Edité par pipelette13 13 novembre 2018 à 13:13:49

Hello,

Même si cela reste anecdotique, c'est un minimum de mettre un +1 à la personne qui à prise du temps pour t'aider  

C'est la moindre des choses non ? en plus de ton merci 

Lucky13 a écrit:

Hello,

Même si cela reste anecdotique, c'est un minimum de mettre un +1 à la personne qui à prise du temps pour t'aider  

C'est la moindre des choses non ? en plus de ton merci 

Ok je comprend, merci 

-
Edité par Lucky13 13 novembre 2018 à 21:51:30