Hello friends, I want to be able to fill out a form in several parts, the next and previous buttons work perfectly for me.
What happens is that when loading the document, the 3 parts of the form are shown. I would like only the first Fieldset to appear and until I press the buttons, it will show the other Fieldsets.
I have already tried the function window.onload=function(){}
but it keeps showing me the same thing.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>Example: for StackOverFlow</h2>
<div class="alert alert-success hide"></div>
<form id="register_form" novalidate action="form_action.php" method="post">
<fieldset>
<h2>Step 1: Add Account Details</h2>
<div class="form-group">
<label for="email">Email address*</label>
<input type="email" class="form-control" required id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password*</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div>
<input type="button" class="next1 btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2> Step 2: Add Personal Details</h2>
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
</div>
<input type="button" name="previous" class="previous-form btn btn-default" value="Previous" />
<input type="button" name="next" class="next2 btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2>Step 3: Add Contact Information</h2>
<div class="form-group">
<label for="mobile">Mobile*</label>
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="Mobile Number">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
</div>
<input type="button" name="previous" class="previous-form btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
</fieldset>
</form>
</div>
<script>
$(document).ready(function(){
var current = 1, current_step, next_step, steps;
steps = $("fieldset").length;
$(".next1").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
});
$(".next2").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
});
$(".previous-form").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
});
// Handle form submit and validation
$( "#register_form" ).submit(function(event) {
var error_message = '';
if(!$("#email").val()) {
error_message+="Please Fill Email Address";
}
if(!$("#password").val()) {
error_message+="<br>Please Fill Password";
}
if(!$("#mobile").val()) {
error_message+="<br>Please Fill Mobile Number";
}
// Display error if any else submit form
if(error_message) {
$('.alert-success').removeClass('hide').html(error_message);
return false;
} else {
return true;
}
});
});
</script>
</body>
</html>
Can someone tell me why the 3 Fieldsets load at the same time? and how to prevent my entire form from appearing when the window loads?
I have optimized your code a bit. Deletion of variables, only a next class, renaming of some variable and the logic that you were missing to hide the fieldsets.
As soon as the form is loaded, you hide all the fieldsets except the first one. With that you have it.