Ouvrir un popup de formulaire apres clic sur un lien href

**aba2s** · 16/09/2019, 11h19

Bonjour la communauté,

Je souhaiterai en cliquant sur "ouverture formulaire" afficher mon formulaire (form.html) sur ma page (test2.html) sous forme d'un popup.
Actuellement le formulaire s'ouvre sur une autre page.

Pourriez-vous svp m'aider?

Merci

--> form.test

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="" id="formtest"action="index.html" method="post">
      <label for="test">votre nom</label>
      <input type="text" name="" id="test" value="">
      <input type="submit" name="" value="submit">
    </form>
  </body>
</html>

---> test2.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test2</title>
  </head>
 
  <body>
    <ul>
      <li><a id="testhref" href="form.html"> Ouverture formulaire</a></li>
    </ul>
 
    <script type="text/javascript" src="pop.js"></script>
  </body>
</html>

---> pop.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
document.getElementById("testhref").addEventListener('click', function() {
  document.getElementById("formtest").style.display='visible';
});

**SpaceFrog** · 16/09/2019, 11h41

Si ton form est sur une autre page tu peux le faire apparaitre avec un .load() (JQuery)

ou avec un XMLHttprequest en js

Invité · 16/09/2019, 14h43

Bonjour,

un exemple avec bouton et formulaire dans la même page (utilise jQuery) :

https://codepen.io/jreaux62/pen/wBxPoe

Sinon, il existe des plugins (popup / modal)...

**aba2s** · 16/09/2019, 16h51

Merci pour votre aide.

meme en copiant les 3 bouts de code (html, css, jquery) je n'ai pas le formulaire.
Quelque chose m'échappe.

Merci

**aba2s** · 16/09/2019, 17h39

Bonjour @jreaux62,

Ton lien est exactement ce que je cherche sauf que quand je copie les codes dans trois fichiers séparés (js, html, css), je ne retrouve pas le résultat
attendu.

Peux-tu stp détaillé un peu le code js? Je n'ai jamais utilisé jquery auparavant. Je pense qu'il y a quelque chose de plus concernant jquery à inclure.

Merci

Invité · 16/09/2019, 18h36

Il faut bien sûr inclure la librairie jQuery avec (par exemple) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Voir :

Ouvrir un popup de formulaire apres clic sur un lien href

JavaScript

Discussions similaires

Partager

Partager