一旦模态关闭，我怎样才能回到我的多步形式的第一个？
我设法将百分比重置为原始数字，但不是表单。
这是我的多步JavaScript ：
/**
* Created by admin on 20/05/2017.
*/
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($("#register-form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
});
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
}）;
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
/*
* 100/TheNumberOfWidget * TheCurrentOne
* If we remove the current one (currstep), the progress bar won't increase.
*/
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
// Simply show % in the progress-bar class.
};
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
/*
* limit = The nubmer of the widget, and it is a integer value.
*/
$(".action").hide();
// Hide the buttons
if(current < limit) btnnext.show();
/*
* If there is at least one widget after the current one :
* it will show next
*/
if(current > 1) btnback.show();
/*
* If there is at least one widget before the current one :
* it will show back
*/
if (current === limit) {
// Show entered values when we reached the the last widget form.
$(".display label:not(.control-label)").each(function(){
console.log($(this).parent().find("label:not(.control-label)").html($("#"+$(this).data("id")).val()));
});
btnnext.hide();
btnsubmit.show();
}
};
这是我的表单
<!-- Modal Register -->
<div class="modal fade modal-ext modal-register" id="modal-register" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- Modal Register | Container -->
<div class="modal-content">
<!-- Modal Register | Form-->
<form method="post" role="form" id="register-form" autocomplete="off">
<!-- Modal Register | Title -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Sign up</h4>
</div>
<!--/.Modal Register | Title -->
<!-- Modal Register | Content -->
<div class="modal-body">
<!-- json response will be here -->
<div id="error_register"></div>
<!-- json response will be here -->
<div class="progress">
<div class="progress-bar progress-bar-custom progress-bar-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Modal Register | Firstname -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-user prefix"></i>
<input type="text" id="firstname" name="firstname" class="form-control" required>
<label for="firstname">Firstname</label>
<span class="help-block" id="error"></span>
</div>
<!-- Modal Register | Lastname -->
<div class="md-form modal_md_form">
<i class="fa fa-circle prefix"></i>
<input type="text" id="lastname" name="lastname" class="form-control" required>
<label for="lastname">Lastname</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Register | Username -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-user prefix"></i>
<input type="text" id="username" name="username" class="form-control" required>
<label for="username">Username</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Register | Password -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="password" name="password" class="form-control" required>
<label for="password">Password</label>
<span class="help-block" id="error"></span>
</div>
<!-- Modal Register | Retype Password -->
<div class="md-form modal_md_form">
<i class="fa fa-asterisk prefix"></i>
<input type="password" id="cpassword" name="cpassword" class="form-control" required>
<label for="cpassword">Retype Password</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Register | Email -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="email" name="email" class="form-control"
pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9.-]+">
<label for="email">Mail</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Login | Check -->
<?php
$number_a = rand(1, 5);
$number_b = rand(0, 4);
$_SESSION['register_valid_operation'] = $number_a + $number_b;
?>
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-calculator prefix"></i>
<input type="text" id="register_result" name="register_result" class="form-control" required>
<label for="register_result"><?php echo($number_a) ?> + <?php echo($number_b) ?> = ?</label>
<span class="help-block" id="error"></span>
</div>
</div>
<br>
<div class="step display">
<h5> Confirm details</h5>
<br>
<div class="modal_md_form">
<div>
<label class="col-xs-2 control-label">Firstname</label>
<div class="col-xs-10">
<label data-id="firstname"></label>
</div>
</div>
</div>
<div class="modal_md_form">
<label class="col-xs-2 control-label">Lastname</label>
<div class="col-xs-10">
<label data-id="lastname"></label>
</div>
</div>
<div class="modal_md_form">
<label class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<label data-id="username"></label>
</div>
</div>
<div class="modal_md_form">
<label class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<label data-id="email"></label>
<br><br>
</div>
</div>
</div>
<!-- Modal Register | Send -->
<div class="row">
<div class="col-xs-12">
<div class="pull-left">
<button type="button" class="action back btn btn-primary">Back</button>
<button type="button" class="action next btn btn-primary">Next</button>
<button class="action submit btn btn-primary" id="btn-signup">Submit</button>
</div>
</div>
</div>
</div>
<!--/.Modal Register | Content -->
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
<!--/.Modal Register | Form-->
</div>
<!--/.Modal Register | Container -->
</div>
</div>
<!--/ Modal Register -->
以下是关闭模式，重置模式并重置进度条的脚本：
$('#modal-register').on('shown.bs.modal', function () {
var current = 1;
$("#register-form").trigger('reset');
setProgress(current);
});
如何将表单重置为步骤1（名字和姓氏）？
答案 0 :(得分：1)
尝试完代码后，我认为你得到了错误的关闭按钮。
$(document).ready(function () {
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
btnclose = $(".btn-default");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function () {
if (current < widget.length) {
// Check validation
//if ($("#register-form").valid()) {
widget.show();
widget.not(':eq(' + (current++) + ')').hide();
setProgress(current);
//}
}
hideButtons(current);
});
// Back button click action
btnback.click(function () {
if (current > 1) {
current = current - 2;
if (current < widget.length) {
widget.show();
widget.not(':eq(' + (current++) + ')').hide();
setProgress(current);
}
}
hideButtons(current);
});
btnclose.on("click", function() {
current = 0;
$("#register-form").trigger("reset");
btnnext.trigger("click");
});
});
// Change progress bar action
var setProgress = function (currstep) {
var percent = parseFloat(100 / widget.length) * currstep;
/*
* 100/TheNumberOfWidget * TheCurrentOne
* If we remove the current one (currstep), the progress bar won't increase.
*/
percent = percent.toFixed();
$(".progress-bar").css("width", percent + "%").html(percent + "%");
// Simply show % in the progress-bar class.
};
// Hide buttons according to the current step
var hideButtons = function (current) {
var limit = parseInt(widget.length);
/*
* limit = The nubmer of the widget, and it is a integer value.
*/
$(".action").hide();
// Hide the buttons
if (current < limit) btnnext.show();
/*
* If there is at least one widget after the current one :
* it will show next
*/
if (current > 1) btnback.show();
/*
* If there is at least one widget before the current one :
* it will show back
*/
if (current === limit) {
btnnext.hide();
btnsubmit.show();
}
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade modal-ext modal-register" id="modal-register" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- Modal Register | Container -->
<div class="modal-content">
<!-- Modal Register | Form-->
<form method="post" role="form" id="register-form" autocomplete="off">
<!-- Modal Register | Title -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Sign up</h4>
</div>
<!--/.Modal Register | Title -->
<!-- Modal Register | Content -->
<div class="modal-body">
<!-- json response will be here -->
<div id="error_register"></div>
<!-- json response will be here -->
<div class="progress">
<div class="progress-bar progress-bar-custom progress-bar-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Modal Register | Firstname -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-user prefix"></i>
<input type="text" id="firstname" name="firstname" class="form-control" required>
<label for="firstname">Firstname</label>
<span class="help-block" id="error"></span>
</div>
<!-- Modal Register | Lastname -->
<div class="md-form modal_md_form">
<i class="fa fa-circle prefix"></i>
<input type="text" id="lastname" name="lastname" class="form-control" required>
<label for="lastname">Lastname</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Register | Username -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-user prefix"></i>
<input type="text" id="username" name="username" class="form-control" required>
<label for="username">Username</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Register | Password -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="password" name="password" class="form-control" required>
<label for="password">Password</label>
<span class="help-block" id="error"></span>
</div>
<!-- Modal Register | Retype Password -->
<div class="md-form modal_md_form">
<i class="fa fa-asterisk prefix"></i>
<input type="password" id="cpassword" name="cpassword" class="form-control" required>
<label for="cpassword">Retype Password</label>
<span class="help-block" id="error"></span>
</div>
</div>
<!-- Modal Register | Email -->
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-envelope prefix"></i>
<input type="email" id="email" name="email" class="form-control"
pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9.-]+">
<label for="email">Mail</label>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="step">
<br>
<div class="md-form modal_md_form">
<i class="fa fa-calculator prefix"></i>
<input type="text" id="register_result" name="register_result" class="form-control" required>
<label for="register_result"><?php echo($number_a) ?> + <?php echo($number_b) ?> = ?</label>
<span class="help-block" id="error"></span>
</div>
</div>
<br>
<div class="step display">
<h5> Confirm details</h5>
<br>
<div class="modal_md_form">
<div>
<label class="col-xs-2 control-label">Firstname</label>
<div class="col-xs-10">
<label data-id="firstname"></label>
</div>
</div>
</div>
<div class="modal_md_form">
<label class="col-xs-2 control-label">Lastname</label>
<div class="col-xs-10">
<label data-id="lastname"></label>
</div>
</div>
<div class="modal_md_form">
<label class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<label data-id="username"></label>
</div>
</div>
<div class="modal_md_form">
<label class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<label data-id="email"></label>
<br><br>
</div>
</div>
</div>
<!-- Modal Register | Send -->
<div class="row">
<div class="col-xs-12">
<div class="pull-left">
<button type="button" class="action back btn btn-primary">Back</button>
<button type="button" class="action next btn btn-primary">Next</button>
<button class="action submit btn btn-primary" id="btn-signup">Submit</button>
</div>
</div>
</div>
</div>
<!--/.Modal Register | Content -->
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
<!--/.Modal Register | Form-->
</div>
<!--/.Modal Register | Container -->
</div>
</div>