1

I noticed a form on one of my web apps was submitting instead of calling a Javascript function, but only on any iOS browser (WebKit). There was no submit button on the form, only an anchor with a onclick="submit()" attribute. It appears that in WebKit, the form's submit() method is being called instead of my own.

Here is a sample code that reproduces the problem:

<html>
<body>
    <form id="my-form">
        <a onclick="submit()" href="#">Test</a>
    </form>
    <script>
        function submit() {
            console.log("Hello!");
        }
    </script>
</body>
</html>

Running this on a non-WebKit browser will just output "Hello!" on the console. Running it on a WebKit browser will do a refresh of the page.

I created a more comprehensive example on JS Bin. In that example I added an event listener for the submit event of the form and a hidden input field. I did not include the submit() function. As you will see, when clicking on the link on a WebKit browser the page will refresh and you'll notice the URL change. But on other browser it won't and will output the error of the missing submit() method on the console. What's is very odd is that, in WebKit, the page will refresh as if the form was submitted but the event listener will not trigger.

Changing the function's name solved the issue for me. But I wonder why would it behave differently in WebKit. My best guess is that WebKit is calling the form's submit method. But I do not know for certain.

Hector Toledo Soto
  • 11
  • 3
  • 2
    I'm using Chrome, aka WebKit and it's saying hello as expected.. – Keith Dec 10 '20 at 19:45
  • 1
    Your jsBin code is *significantly* different than what you posted here. In particular, there's no global `submit()` method, as there is in the code you posted here. – Pointy Dec 10 '20 at 19:48
  • @Keith, Chrome does not use WebKit anymore. I will add the clarification in the post anyway. – Hector Toledo Soto Dec 10 '20 at 19:53
  • @Pointy, yes, my example on JS Bin is a bit different to demonstrate several points I talk about in the second to last paragraph of my question. – Hector Toledo Soto Dec 10 '20 at 19:53
  • I have problems finding references, but unless I'm crazy it *used* to be true that using `onclick` inside a `
    ` would result in the handler being built such that the form element properties would be in scope in the function code, as if the code were surrounded by a `with ()` block. If you change the function name to `soobmit()` or something, does that help?
     – Pointy Dec 10 '20 at 19:59
  • @Pointy, yes. If I change the name of the function it does work as expected. My question really is why is this behavior present only on WebKit browsers? – Hector Toledo Soto Dec 10 '20 at 20:11
  • As I said, I'm pretty sure it used to work that way in all browsers. You might try IE11 if you have access. – Pointy Dec 10 '20 at 20:18
  • [See this answer to an old question.](https://stackoverflow.com/a/21975639/182668) – Pointy Dec 10 '20 at 20:22
  • It looks like it may be a WebKit peculiarity. The stuff I was talking about, according to the HTML5 spec, is supposed to only apply to elements with a "form owner", which applies to things like `` and ` – Pointy Dec 10 '20 at 20:33

0 Answers0