Why would translation in the Chrome browser disable submit buttons in a web page?

Question

I have a web application that uses old-fashioned HTML forms to submit information to the server. It was recently pointed out that the system does not work in Chrome with translation. (The system has its own internal translation for users, but occasionally someone wants to translate another language back to English for viewing. I got complaints that the system didn't work when viewing another language in Chrome with translation to English, and sure enough it didn't.)

I think I solved the problem by embedding the submit buttons in <span class="notranslate"></span>, but wondered why translation would disable submit buttons in the first place. They are basic <input type=submit value="[label on button]" ... />. Chrome would translate the value attribute (the text labels on the buttons) if the buttons were not in a notranslate span. But somehow that seems to disable them.

Answer 1

The buttons have not been disabled. The issue is that your form will POST/GET the values in the buttons. If these are selected as translated in Chrome by the user then they may not match the conditions required to detect a successful form submit.

E.g. There's a button in your form:

<input type=submit value="Continue" ... />

Google Chrome translates this in German:

<input type=submit value="Fortsetzen" ... /> 

and it will submit this translated value. But, your submit detect code is (in php for example):

if (isset($_POST["submit"]) && $_POST["submit"]=="Continue") 

so the form will be submitted but the value will not match.

It seems to me this will have been breaking large parts of the internet, not just your system.

BTW thanks for the suggestion: <span class="notranslate">

Answer 2

This problem can be due to faulty html structure of the form.

Things like extra </div> may OK in a normal web page, but after google translation kicks in the browser can no longer show the form in a correct way, causing the submit button to appear outside the form and hence clicks on it does not trigger any action.

By correcting the Dom structure of the form (and/or other parts of the page) the problem can be resolved.