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>
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>
-
if you remove the
onsubmitevent and instead call loadLoader() in anonclickevent on the input. maybeonclickis more supported by all browsers, and logically results in the form being submitted? – Félix Adriyel Gagnon-Grenier Commented Jan 17, 2014 at 21:18 - 1 hello Félix, I have the exact same behavior with the onclick of the input of type "submit". – Tom - Lunabee. Commented Jan 18, 2014 at 21:24
- it's funny. according to this page quirksmode/dom/events the submit event should be fully supported by safari. – Félix Adriyel Gagnon-Grenier Commented Jan 18, 2014 at 21:35
- Indeed. I've just seen that on my iPad Air, the behavior is the one expected. It looks like a bug on Safari Mac 7.0.1... – Tom - Lunabee. Commented Jan 20, 2014 at 7:14
- Still not working in Safari 7.0.5 – Carlos Commented Dec 5, 2014 at 19:40
3 Answers
Reset to default 1Sorry I can't ment 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>
In first, let's talk about what's going on when you submit a form.
Browser calls onsubmit method and after starts to prepare POST request and sends it to the server. After POST request browser get a new html page, browser unload old page and load new one.
You wouldn't see the loadingImage if whole process is too fast. But if server handles POST request slowly, you will see loading image on old page before browser will render new page.
You can try to add console.log and turn on a console flag to prevent cleaning for logs and you will see 'show loader', but you will not see image, because browser has been loading new page and handling it.
function loadLoader(){
console.log('show loader');
document.getElementById('loadingImage').style.display = 'block';
return true;
}
You can call function onClick attribute of Button and by Id of Button.
option 1: With OnClick attribute
<html>
<body>
<img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
<form method="POST" action="js.php">
<input type="submit" value="Go" onclick="loadLoader()"/>
</form>
<script type="text/javascript">
function loadLoader(){
document.getElementById('loadingImage').style.display = 'block';
return true;
}
</script>
</body>
</html>
Option 2: Button Click event by Id
<html>
<body>
<img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
<form method="POST" action="js.php">
<input id="btnsubmit" type="submit" value="Go"/>
</form>
<script type="text/javascript">
$("#btnsubmit").click(function() {
document.getElementById('loadingImage').style.display = 'block';
return true;
});
</script>
</body>
</html>
Option 3: By Form Submit Method
<html>
<body>
<img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
<form method="POST" action="js.php">
<input id="btnsubmit" type="submit" value="Go"/>
</form>
<script type="text/javascript">
$('form').submit(function() {
document.getElementById('loadingImage').style.display = 'block';
return true;
});
</script>
</body>
</html>