Bonjour,
J'utilise une page php coupé en 3 parties et dans la page centrale quand j'affiche mon formulaire en 3 volets mais la commande "Suite" ne fonctionne pas.
Je vous donne le Javascript :
Partie html :
J'utilise une page php coupé en 3 parties et dans la page centrale quand j'affiche mon formulaire en 3 volets mais la commande "Suite" ne fonctionne pas.
Je vous donne le Javascript :
//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;
})Partie html :
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<link rel='stylesheet' href='css/inscription.css' type='text/css' media='screen' />
<script type='text/javascript' src='js/msform.js'></script>
<!-- MultiStep Form -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Perso</li>
<li>Social</li>
<li>Compte</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Perso</h2>
<h3 class="fs-subtitle"></h3>
<input type="text" name="nom" placeholder="Nom"/>
<input type="text" name="prenom" placeholder="Prénom"/>
<input type="tel" name="tel" placeholder="N° de Tel"/>
<input type="text" name="adress" placeholder="Adresse"/>
<input type="text" name="adress2" placeholder="Complément d'Adresse"/>
<input type="text" name="cp" placeholder="Code postal"/>
<input type="text" name="commune" placeholder="Commune"/>
<label for="naissance">Date de naissance</label>
<input type="date" name="naissance" placeholder="Date de naissance"/>
<input type="button" name="next" class="next action-button" value="Suivant"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Social</h2>
<h3 class="fs-subtitle"></h3>
<input type="text" name="twitter" placeholder="Twitter"/>
<input type="text" name="facebook" placeholder="Facebook"/>
<input type="text" name="gplus" placeholder="Google Plus"/>
<input type="button" name="previous" class="previous action-button-previous" value="Précédent"/>
<input type="button" name="next" class="next action-button" value="Suivant"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Compte</h2>
<h3 class="fs-subtitle"></h3>
<input type="email" name="email" placeholder="Email"/>
<input type="password" name="pass" placeholder="Mot de passe"/>
<input type="password" name="cpass" placeholder="Confirmez Mot de passe"/>
<input type="button" name="previous" class="previous action-button-previous" value="Précédent"/>
<input type="submit" name="submit" class="submit action-button" value="Envoyer"/>
</fieldset>
</form>
</div>
</div>
<!-- /.MultiStep Form -->
