I've been trying to make this website with a steps form from jQuery. I ran through multiple tutorials on how to use it, but it never works. It always shows me the whole content of the form without the "pagination" style steps.
I used an example from this website:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.steps.js"></script>
<link href="/Content/jquery.steps.css" rel="stylesheet">
</head>
<body>
<form id="wizard" action="#">
<h1>Account</h1>
<fieldset>
<legend>Account Information</legend>
<label for="userName">User name *</label>
<input id="userName" name="userName" type="text" class="required">
<label for="password">Password *</label>
<input id="password" name="password" type="text" class="required">
<label for="confirm">Confirm Password *</label>
<input id="confirm" name="confirm" type="text" class="required">
<p>(*) Mandatory</p>
</fieldset>
<h1>Profile</h1>
<fieldset>
<legend>Profile Information</legend>
<label for="name">First name *</label>
<input id="name" name="name" type="text" class="required">
<label for="surname">Last name *</label>
<input id="surname" name="surname" type="text" class="required">
<label for="email">Email *</label>
<input id="email" name="email" type="text" class="required email">
<label for="address">Address</label>
<input id="address" name="address" type="text">
<label for="age">Age (The warning step will show up if age is less than 18) *</label>
<input id="age" name="age" type="text" class="required number">
<p>(*) Mandatory</p>
</fieldset>
<h1>Warning</h1>
<fieldset>
<legend>You are to young</legend>
<p>Please go away ;-)</p>
</fieldset>
<h1>Finish</h1>
<fieldset>
<legend>Terms and Conditions</legend>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
</fieldset>
</form>
</body>
<script>
$("#wizard").steps({
bodyTag: "fieldset"
});
</script>
</html>
It always looks like this:
Can someone help? What am I doing wrong?
[EDIT1] I changed the code a bit. I added the div container with the wizard id around the form (updated the code and the image). So i get the container and the 'Next' and 'Prev' Buttons below. But still no functionality. Can someone give me the next breadcrump? [\EDIT1]
[EDIT2] After deleting the div container and changing the form id to "wizard" it looks like that. So the functionality is there but the contents of the form are gone. (Updated Code and Picture) [\EDIT2]
Look at the bottom of the page you linked to, it's calling events
etc, you are not. the main documentation is github jquery-steps docs