Safari 7.0.1 and onsubmit

Asked 17/1, 2014 at 21:14 Answered 9/3, 2016 at 22:27

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>

Backstage answered 17/1, 2014 at 21:14 Comment(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? – Esposito 17/1, 2014 at 21:18

hello Félix, I have the exact same behavior with the onclick of the input of type "submit". – Backstage 18/1, 2014 at 21:24

it's funny. according to this page quirksmode.org/dom/events the submit event should be fully supported by safari. – Esposito 18/1, 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... – Backstage 20/1, 2014 at 7:14

Still not working in Safari 7.0.5 – Shultz 5/12, 2014 at 19:40

Try this link #9573833 It may help you – Cryohydrate 9/3, 2016 at 10:23

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>

Thigmotaxis answered 18/12, 2014 at 8:46 Comment(0)

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;
}

Approachable answered 9/3, 2016 at 22:27 Comment(0)

-1

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>

Stanislas answered 9/3, 2016 at 6:51 Comment(0)

Recommended topics

Hot tags