bonjour,
voila je voudrai mettre un formulaire jquery en 3 étapes sur mon site.
J'ai trouver plusieurs site mais après plusieurs mon choix c'est arrêté sur:
http://www.jankoatwarpspeed.com/post...rd-jquery.aspx.
voila le formulaire:
le fichier formtowiard.js:
Code : 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="formToWizard.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) }); </script> </head> <body> <form id="SignupForm" method="post" action="" > <fieldset> <legend>Account information</legend> <label for="Name">Name</label> <input id="Name" type="text" /> <label for="Email">Email</label> <input id="Email" type="text" /> <label for="Password">Password</label> <input id="Password" type="password" /> </fieldset> <fieldset> <legend>Company information</legend> <label for="CompanyName">Company Name</label> <input id="CompanyName" type="text" /> <label for="Website">Website</label> <input id="Website" type="text" /> <label for="CompanyEmail">CompanyEmail</label> <input id="CompanyEmail" type="text" /> </fieldset> <fieldset> <legend>Billing information</legend> <label for="NameOnCard">Name on Card</label> <input id="NameOnCard" type="text" /> <label for="CardNumber">Card Number</label> <input id="CardNumber" type="text" /> <label for="CreditcardMonth">Expiration</label> <select id="CreditcardMonth"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select id="CreditcardYear"> <option value="2009">2009</option> </select> <label for="Address1">Address 1</label> <input id="Address1" type="text" /> <label for="Address2">Address 2</label> <input id="Address2" type="text" /> <label for="City">City</label> <input id="City" type="text" /> <label for="City">City</label> <select id="Country"> <option value="CA">Canada</option> <option value="US">United States of America</option> </select> </fieldset> <p> <input id="SaveAccount" type="button" value="Submit form" /> </p> </form> </div> </body>
Code : 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73 /* Created by jankoatwarpspeed.com */ (function($) { $.fn.formToWizard = function(options) { options = $.extend({ submitButton: "traitement.php" }, options); var element = this; var steps = $(element).find("fieldset"); var count = steps.size(); var submmitButtonName = "#" + options.submitButton; $(submmitButtonName).hide(); // 2 $(element).before("<ul id='steps'></ul>"); steps.each(function(i) { $(this).wrap("<div id='step" + i + "'></div>"); $(this).append("<p id='step" + i + "commands'></p>"); // 2 var name = $(this).find("legend").html(); $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>"); if (i == 0) { createNextButton(i); selectStep(i); } else if (i == count - 1) { $("#step" + i).hide(); createPrevButton(i); } else { $("#step" + i).hide(); createPrevButton(i); createNextButton(i); } }); function createPrevButton(i) { var stepName = "step" + i; $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>"); $("#" + stepName + "Prev").bind("click", function(e) { $("#" + stepName).hide(); $("#step" + (i - 1)).show(); $(submmitButtonName).hide(); selectStep(i - 1); }); } function createNextButton(i) { var stepName = "step" + i; $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>"); $("#" + stepName + "Next").bind("click", function(e) { $("#" + stepName).hide(); $("#step" + (i + 1)).show(); if (i + 2 == count) $(submmitButtonName).show(); selectStep(i + 1); }); } function selectStep(i) { $("#steps li").removeClass("current"); $("#stepDesc" + i).addClass("current"); } } })(jQuery);
petit problème j’ai beau regarder sur les commentaire et l'aide, je ne sais pas comment récupérer les données POST par la suite pour les mettre dans ma BDD.
J'ai rajouter <form id="SignupForm" method="post" action="traitement.php" >
method="post" et action='traiement.php'
mais cela ne change rien
Merci.
Partager