Hola amigos quiero poder llenar un formulario en varias partes, los botones next y previous me funcionan perfectamente.
Lo que sucede es que al cargar el documento se muestran las 3 partes del formulario. Quisiera que solo me apareciera el primer Fieldset y hasta que presione los botones vaya mostrando los demas Fieldset.
Ya he intentado la funcion window.onload=function(){}
pero me sigue mostrando lo mismo.
codigo:
<!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>
Alguien me puede decir, porque me cargan los 3 Fieldset al mismo tiempo? y como evitar que aparezca todo mi formulario al cargar la ventana?