How to take this string from user at run time?

Question

Look at the below code, this JavaScript is used to take a string (in a language other than English) and convert it into English.

<script type="text/javascript">
    google.load("language", "1");

    function initialize() {
       var content = document.getElementById('translation');
       // Setting the text in the div.
       content.innerHTML = '<div id="text">HELLO WORLD<\/div>
                            <div id="translation"/>';

       // Grabbing the text to translate
       var text = document.getElementById("text").innerHTML;

       // Translate from Spanish to English, and have the callback of
       // the request put the resulting translation in the
       // "translation" div.  Note: by putting in an empty string for
       // the source language ('es') then the translation will
       // auto-detect the source language.

       google.language.translate(text, '', 'en', function(result) {
       var translated = document.getElementById("translation");
       if (result.translation) {
           translated.innerHTML = result.translation;
       }
     });
   }

   google.setOnLoadCallback(initialize);

</script>

I want that the string "HELLO WORLD" must be entered by user at run time in a text field and then that string is passed to the div id text. So is this possible?

Answer 1

Hope you are referring to the document below:

http://code.google.com/apis/language/translate/v1/getting_started.html

Please refer to the section "Getting Started" where it says about "Signing up for an API key". This needs to be done before you could implement the code in your page.

Once done, make the modification to the script file which you include in the html page with your key.

Here, replace your key with "MY_KEY_STRING" in the bottom code and get started.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Language API Sample</title>
    <script src="https://www.google.com/jsapi?key=MY_KEY_STRING"></script>
    <script type="text/javascript">

    google.load("language", "1");

    function initialize() {
    //Show the translate button
    document.getElementById("translateButton").style.display = "";
     }
    google.setOnLoadCallback(initialize);
    function translate() {
    var text = document.getElementById("fromText").value;
        google.language.translate(text, 'es', 'en', function(result) {
        var translated = document.getElementById("toText");
        if (result.translation) {
          translated.innerHTML = result.translation;
        }
      });
    }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    From:<input type="text" id="fromText"/>
    To:<span id="toText"></span>
    <input type="button" value="Translate" onclick="translate()" style="display: none;" id="translateButton">
  </body>
</html>

Answer 2

HTML:

<form id="translate">
  <textarea id="translate-me"></textarea>
  <input type="submit" />
</form>

JavaScript:

var form = document.getElementById('translate')
var textarea = document.getElementById('translate-me')

form.onsubmit = function () {
  google.language.translate(textarea.value, ...)
  return false; // prevent default action (form submission)
}

Using jQuery or something similar would make this easier, of course.

How to take this string from user at run time?

Question

2 answers

solution1
1 ACCPTED 2011-10-22 07:06:34

solution2
0 2011-10-22 05:29:38

How to take this string from user at run time?

Question

2 answers

solution1 1 ACCPTED 2011-10-22 07:06:34

solution2 0 2011-10-22 05:29:38

solution1
1 ACCPTED 2011-10-22 07:06:34

solution2
0 2011-10-22 05:29:38