Haris Haris - 4 months ago 12
HTML Question

php show div element when POST

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>

Answer

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.