Menu
Due to Safari (7.0.1 / Mac OS), I'm struggling with a simple Javascript problem. I submit a form, and I want to display an icon during the page loading.
From what I can see, it's not related to the javascript itself, but more to the onsubmit behavior (if I move it outside the function, it does the expected job when loading the page instead of at "submit" time).
This is my code (working perfectly on Chrome and Firefox). Any idea?
<html>
<body>
<img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
<form method="POST" action="js.php" onsubmit="loadLoader()">
<input type="submit" value="Go"/>
</form>
<script type="text/javascript">
function loadLoader(){
document.getElementById('loadingImage').style.display = 'block';
return true;
}
</script>
</body>
</html>
945
The onsubmit attribute provides the script datas to executed whenever the submit event is occurred so it does not submit the datas to the server with the help of submit() function it will be postponed to the server side.
The onsubmit attribute fires when a form is submitted.
Sorry I can't comment your post due my reputation. As you JS code is non blocking I tried to move it to the head and added javascript before the function call. I tested it in Safari 7.0.1 and it worked.
<html>
<head>
<script type="text/javascript">
function loadLoader() {
alert('loadLoader called');
document.getElementById('loadingImage').style.display = 'block';
return true;
}
</script>
</head>
<body>
<img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;" />
<form method="POST" action="js.php" onsubmit="javascript:loadLoader()">
<input type="submit" value="Go" />
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
