admin管理员组

文章数量:1430472

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>
  • javascript
  • html
  • safari
  • onsubmit
Share Improve this question asked Jan 17, 2014 at 21:14 Tom - Lunabee.Tom - Lunabee. 3562 silver badges18 bronze badges 6
  • if you remove the onsubmit event and instead call loadLoader() in an onclick event on the input. maybe onclick is 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
 |  Show 1 more ment

3 Answers 3

Reset to default 1

Sorry 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>

本文标签： javascriptSafari 701 and onsubmitStack Overflow

版权声明：本文标题：javascript - Safari 7.0.1 and onsubmit - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745498375a2660913.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。