manishekhawat manishekhawat - 1 year ago 65
HTML Question

Google Translate Tool does not work on the input type text value?

I am using Google Translate tool for website on my page, and it is working fine but when I checked the same on a page with form, it is not changing the value written inside the input field.

Am I missing something or Google Translate tool does not do it?

PFB the snippet of my test :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<title>Untitled Page</title>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
</script><script src="//"></script>
<input type="text" value="system" />

<option value="welcome">Welcome</option>
<input type="radio" />Right?
<input type="submit" value="Submit" />

Answer Source

Apparently Google Website Translator does not translate input element values, even when set in HTML source. I tested with a textarea element too, with the same result. However, it does translate user input via an element other than a form field; such elements can be created using the contenteditable attribute, which is widely (though not quite universally) supported in modern browsers. But extra measures would be needed to make the translated text to be submitted along with a form (since it won’t be in a form field).

In my book Going Global with JavaScript and Globalize.js, I describe some of the issues in automatic translation and suggest that although it might not be a good idea to have widgets for it on web pages in general, it could be useful for user input. For example, consider a discussion forum where discussions take place in English. You could add functionality that lets everyone use his native language, have it instantly translated into English, check it out, and submit it. There’s a simple demo of this: Translation of user input. (It uses a contenteditable element and writes the translated content into a hidden field.)