I'm using setTimeout to display a bootstrap3 progress bar. It works the first time I display it when I press submit. But when I press submit again, the progress bar doesn't start from 0 which I've tried to ensure using setTimeout.
I'm using the following JavaScript code:
$(document).ready(function() {
$("#name-form").submit(function(event) {
event.preventDefault();
$(".progress").css("display", "block");
$(".progress-bar").css("width", "0%");
setTimeout(function() {
$(".progress-bar").css("width", "70%");
}, 10000);
var $form = $(this),
url = $form.attr('action');
setTimeout(function() {
$(".progress-bar").css("width", "100%");
$('#message-heading').append("Welcome");
}, 2000);
});
});
Why is this happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-sm-offset-4 col-sm-4">
<form action="/" class="form text-center" method="post" id="name-form">
<button type="submit" class="btn btn-primary btn-lg" id="submit-id-submit">Submit</button>
<div>
<ul class='list-unstyled' id='error-list'></ul>
</div>
</form>
<br>
<div class="progress" style="display: none">
<div class="progress-bar progress-bar-striped active" role="progressbar"></div>
</div>
</div>
</div>
<div class='container text-center'>
<h3 id='message-heading'></h3>
<p id='message-body'>
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#name-form").submit(function(event) {
event.preventDefault();
$(".progress").css("display", "block");
$(".progress-bar").css("width", "0%");
setTimeout(function() {
$(".progress-bar").css("width", "70%");
}, 10000);
var $form = $(this),
url = $form.attr('action');
setTimeout(function() {
$(".progress-bar").css("width", "100%");
$('#message-heading').append("Welcome");
}, 2000);
});
});
</script>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
