Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme formulaire a etape javascript

KevinDruart
    7 janvier 2019 à 17:22:43

    Bonjour ,

    J'ai réaliser un petit formulaire a etapes (qui n'est pas encore fini^^) mais je rencontre un probleme avec celui-ci:

    Il ne fonctionne pas...

    Si quelqu'un peut m'aaiguiller sur ce que j'ai pu mal faire ou alors oublier ce serait sympa.

    voici le code html:

    Merci a vous

    <!DOCTYPE html>

<html>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <head>
        <title>
            BIENVENUE SUR CE SITE
         </title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <link rel="stylesheet" href="TEST.CSS">
        
    </head>
    <body>


<div id="entete">
    <!--BARRE DE NAVIGATION -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="test2.html"><img src="images/img1.jpg" alt="Le site"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
      </li>
 
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Je suis un Pro
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="login.php">Je me connecte</a>
          <a class="dropdown-item" href="enregistrementpro.php">Je souhaite m'inscrire</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="infospro.php">En savoir plus</a>
        </div>
    
    </ul>
  </div>
</nav>
</div>
<!--MENU VERTICAL -->
<div id="main">
 <div id="menu">
 <div class="btn-group-vertical">
    <button type="button" class="btn btn-secondary" href="#section aide">J'ai deja un ou plusieur(s) devis</button>
    <button type="button" class="btn btn-secondary" href="#section recherche pro">Je recherche un ou plusieur(s) professionnel</button>
    <button type="button" class="btn btn-secondary" href="#section nos services">Nos services d'aides aux particuliers</button>
    <button type="button" class="btn btn-secondary" href="#section informations">En savoir plus </button>
</div>
 </div>

 <div id="contenu">
 <script src="form.js"></script>    

     <!-- MultiStep Form -->
<div class="row">
    <div class="formulaire">
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">Informations personnelles</li>
                <li>Votre Adresse</li>
                <li>Votre Projet</li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Informations personnelles</h2>
                <h3 class="fs-subtitle">Parler nous de vous </h3>
                <input type="text" name="fname" placeholder="Prenom"/>
                <input type="text" name="lname" placeholder="Nom"/>
                <input type="text" name="phone" placeholder="Telephone"/>
               <input type="text" name="mail" placeholder="Em@il"/>
                <input type="button" name="next" class="next action-button" value="Etape suivante"/>
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Votre Adresse</h2>
             
                <input type="text" name="adresse" placeholder="Adresse"/>
                <input type="text" name="postal" placeholder="Code postale"/>
                <input type="text" name="ville" placeholder="Ville"/>
                <input type="button" name="previous" class="previous action-button-previous" value="Etape precedente"/>
                <input type="button" name="next" class="next action-button" value="Etape suivante"/>
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Votre projet</h2>
                <h3 class="fs-subtitle">Expliquer nous votre projet</h3>
                <input type="text" name="email" placeholder="nombre de m² de votre habitation"/>
                <input type="password" name="pass" placeholder="Password"/>
                <input type="password" name="cpass" placeholder="Confirm Password"/>
              <div class="checkbox">
  <label><input type="checkbox" value="">Isolation des murs et planchers bas</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Isolation du toit</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Fenêtres, volets, portes extérieures</label>
</div>
                <input type="button" name="previous" class="previous action-button-previous" value="Etape precedente"/>
                <input type="submit" name="submit" class="submit action-button" value="Valider"/>
            </fieldset>
        </form>
    </div>
</div>
     
     
     
 </div>
    </div>
 

<div id="footer">
 Pied de Page
</div>
 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>        
</body>
</html>

    voici le css:

    #entete, #menu, #contenu, #footer {
padding:1px 0;
}
#entete {
background-color:#FF9900;
text-align:center;
}

#menu  {
float:left;
width:240px;
background-color:#FF3366;
margin: 50px auto;
}

#footer {
background-color:#669933;
text-align:center;
clear:both;
}

/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    background: #6441A5; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #6441A5, #2a0845); /* Chrome 10-25, Safari 5.1-6 */
}

body {
    font-family: montserrat, arial, verdana;
    background: transparent;
}

/*form styles*/
#msform {
    text-align: center;
    position: relative;
    margin-top: 30px;
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

    /*stacking fieldsets above each other*/
    position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

/*inputs*/
#msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}

#msform input:focus, #msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #ee0979;
    outline-width: 0;
    transition: All 0.5s ease-in;
    -webkit-transition: All 0.5s ease-in;
    -moz-transition: All 0.5s ease-in;
    -o-transition: All 0.5s ease-in;
}

/*buttons*/
#msform .action-button {
    width: 100px;
    background: #ee0979;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #ee0979;
}

#msform .action-button-previous {
    width: 100px;
    background: #C5C5F1;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button-previous:hover, #msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
}

/*headings*/
.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    letter-spacing: 2px;
    font-weight: bold;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
    letter-spacing: 1px;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 24px;
    height: 24px;
    line-height: 26px;
    display: block;
    font-size: 12px;
    color: #333;
    background: white;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #ee0979;
    color: white;
}


/* Not relevant to this form */
.dme_link {
    margin-top: 30px;
    text-align: center;
}
.dme_link a {
    background: #FFF;
    font-weight: bold;
    color: #ee0979;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 5px 25px;
    font-size: 12px;
}

.dme_link a:hover, .dme_link a:focus {
    background: #C5C5F1;
    text-decoration: none;
}

    et voici le js:

    //jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".submit").click(function(){
	return false;
})




    -
    Edité par KevinDruart 7 janvier 2019 à 17:24:16

    • Partager sur Facebook
    • Partager sur Twitter
    tlgMan
    • Javascript
      7 janvier 2019 à 18:55:09

      Salut,

      As-tu une erreur dans la console ?

      Déjà pour moi tu ne charges pas ton script (fom.js) au bon endroit. Tu utilises jquery avant de l'avoir chargé.

      Ajoute en dernier ton script

      <script src="form.js"></script>

      -
      Edité par tlgMan 7 janvier 2019 à 18:55:43

      • Partager sur Facebook
      • Partager sur Twitter
      KevinDruart
        8 janvier 2019 à 8:43:20

        Salut ,

        Merci pour ta réponse!

        J'ai essayer de charger le script a la fin mais cela ne fonctionne pas non plus..

        • Partager sur Facebook
        • Partager sur Twitter
        tlgMan
        • Javascript
          8 janvier 2019 à 9:38:15

          Ok, C'est la première étape, mais as-tu des erreurs dans ta console navigateur ?
          • Partager sur Facebook
          • Partager sur Twitter
          KevinDruart
            10 janvier 2019 à 8:05:13

            Oui j'ai celle-ci:

            Uncaught ReferenceError: $ is not defined

                at form.js:7

            • Partager sur Facebook
            • Partager sur Twitter
            KevinDruart
              14 janvier 2019 à 14:33:42

              Personne pour m'aider?

              KevinDruart a écrit:

              Oui j'ai celle-ci:

              Uncaught ReferenceError: $ is not defined

                  at form.js:7



              • Partager sur Facebook
              • Partager sur Twitter
              AliasDmc
              • Javascript
                14 janvier 2019 à 18:20:23

                Bonjour KevinDruart

                1 pb : avec le code que tu as affiché

                tu fait appel a $ dans form.js mais la librairie jquery (jquery-3.3.1.slim.min.js) n'est pas chargé

                Il faut donc charger la librairie jquery avant form.js

                Un fois que tu auras fais cela, tu risques d'avoir de problème d'accès au DOM 

                Il te faudra utiliser  .ready()

                • Partager sur Facebook
                • Partager sur Twitter
                Découvrez les Css avec la zonecss.fr

                probleme formulaire a etape javascript

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur ●
                • Markdown