I need to show the progress bar when I click the button submit. Below is the code, when I click the button the console is printing the message but, the div element converting_prog is not showing.
What wrong with below code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<?php
//process the forms and upload the files
if ($_POST) {
//specify folder for file upload
$user = $_GET["user"];
?>
<script>
console.log("posting...");
</script>
<script type="text/javascript">document.getElementById('converting_prog').style.display = 'block';</script>
<?php
}
?>
</head>
<body>
<div id="outPopUp">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input class="btn" name="submit" type="submit" id="submit" value="Submit"/>
</form>
<div id="converting_prog" class="progress" style="display:none; margin-right:20px;margin-left:20px;margin-top:20px;width:auto">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Converting %
</div>
</div>
</div>
</body>
</html>
When it runs, the DOM hasn't loaded yet. Try moving the whole PHP if block to the end of the page, so that the JS can run later.
Or you could wrap that script in a window.onload = function(){} handler.
Since you are detecting post button after form is submitted (unusual) then at time when page is generated you already know if form is submitted or not. Because of that you don't need that JS code to hide the block - just simply don't print it when it's not needed.
if (!$_POST) {
?>
<div id= "converting_prog" class="progress" style="margin-right:20px;margin-left:20px;margin-top:20px;width:auto">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Converting %
</div>
</div>
<?php
}
So just add that if around your existing progress bar code.
Use this code between your script tags :
document.getElementById("id of your button").addEventListener("click", function(){
document.getElementById("converting_prog").style.display = "block";});
I change your $_POST checking status and position with following code which is working fine :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="outPopUp">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input class="btn" name="submit" type="submit" id="submit" value="Submit" />
</form>
<div id= "converting_prog" class="progress" style="display:none; margin-right:20px;margin-left:20px;margin-top:20px;width:auto">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Converting %
</div>
</div>
</div>
</body>
</html>
<?php
//process the forms and upload the files
if (isset($_POST['submit'])) {
//specify folder for file upload
//$user = $_GET["user"];
?>
<script>
$('#converting_prog').show();
</script>
<?php
} ?>