Google Language and Dynamic URLS

[Monark]

One of the greatest things about the internet is the international audience. One the weakest links is the adoption of language translation. So I set out to fix this for one of my websites.

I was able to modify the translate website frame on Google (http://translate.google.com/translate_t) to place this into a website. I was able to remove the text field by manually entering the url inside the code. The result is nothing more then a drop down list with a submit button. Very clean and easy to use. It is an on-page "complete" Google Translate tool! Upon clicking submit it works.

However, I don't want to have to change this on every page if I can avoid it. Is there a javascript that can enter the current page url into the value of a form tag? from what I can tell it must go into the exact feild that has <input type="hidden" name="u" value="INSERT URL HERE" />

Thanks for your help if you can!!!!!

Disclaimer: I do not know any java, so assume I know nothing about where to place the parts. can you provide a complete code solution? I am trying to be xhtml valid, thanks! :o

Here is the code: please fell free to do with it what you want

<!--begin translation, insert into body where you want it to show -->

<table width="100%" cellpadding="3" cellspacing="0" border="0" align="left">
<tr bgcolor="#ffffff">
<td>
<form name="translateForm" target="_translate" action="http://www.google.com/translate?u=" method="get">
<table>
<tr bgcolor="#ffffff">
<td><form name="translateForm" form action="http://www.google.com/translate?" >
<input type="hidden" name="u" value="INSERT URL HERE" />
<select name="langpair">
<option value="en|de" selected="selected">English to German</option>
<option value="en|es">English to Spanish</option>
<option value="en|fr">English to French</option>
<option value="en|it">English to Italian</option>
<option value="en|pt">English to Portuguese</option>
<option value="en|ar">English to Arabic</option>
<option value="en|ja">English to Japanese</option>
<option value="en|ko">English to Korean</option>
<option value="en|zh-CN">English to Chinese&nbsp;(Simple)</option>
<option value="de|en">German to English</option>
<option value="de|fr">German to French</option>
<option value="es|en">Spanish to English</option>
<option value="fr|en">French to English</option>
<option value="fr|de">French to German</option>
<option value="it|en">Italian to English</option>
<option value="pt|en">Portuguese to English</option>
<option value="ar|en">Arabic to English/option>
<option value="ja|en">Japanese to English</option>
<option value="ko|en">Korean to English</option>
<option value="zh-CN|en">Chinese&nbsp;(Simple) to English</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" />
</form>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

<!-- end translation-->

[Twey]

I am trying to be xhtml valid, thanks!Remove that outer form, then. I'm sure nested forms aren't valid.
<form name="translateForm" form action="http://www.google.com/translate" onsubmit="this.elements.u.value = window.location.href;">
Remember, though, that this is a temporary measure until you can change each page individually. It is a nowhere near as good a solution, since it requires scripting support.

[Monark]

Twey,

I knew this would be simple but I have to tell you that what I little code there was took me about 23 hours to get figured out.

I come from a WYSIWYG user side world. This has been one of the most educational and frustrating ideas of my life.

Thanks for your help! :)

Mark

[Monark]

Is it possible to simplify this by removing the submit button and simply making it a onselect event?

This is what I have now.. Thanks again for your wonderful help! - Mark

<table align="left">
<form name="translateForm" form action="http://www.google.com/translate" onsubmit="this.elements.u.value = window.location.href;">
<input type="hidden" name="u" value="" />
<select name="langpair">
<option value="" selected="selected">Translate</option>
<option value="en|it">Italian</option>
<option value="en|de">German</option>
<option value="en|es">Spanish</option>
<option value="en|fr">French</option>
<option value="en|pt">Portuguese</option>
<option value="en|ar">Arabic</option>
<option value="en|ja">Japanese</option>
<option value="en|ko">Korean</option>
<option value="en|zh-CN">Chinese (S)</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" />
</form>
</table>

[Twey]

<table align="left">
<form name="translateForm" action="http://www.google.com/translate" onsubmit="this.elements.u.value = window.location.href;">
<input type="hidden" name="u" value="" />
<select name="langpair" onchange="this.form.submit()">
<option value="" selected="selected">Translate</option>
<option value="en|it">Italian</option>
<option value="en|de">German</option>
<option value="en|es">Spanish</option>
<option value="en|fr">French</option>
<option value="en|pt">Portuguese</option>
<option value="en|ar">Arabic</option>
<option value="en|ja">Japanese</option>
<option value="en|ko">Korean</option>
<option value="en|zh-CN">Chinese (S)</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" name="sub" />
</form>
<script type="text/javascript">
document.forms['translateForm'].elements['sub'].style.display = "none";
</script>
</table>

[Monark]

Twey,

This unfortuntely does not work. It generates a url of http://www.google.com/translate_t

It does not grab the page info, that langpair has been getting my goat for a while.

You can see how it works on code-of-ethics dot org, keep in mind the site changes often as I am still hammering out design and other scripts.

Thanks!

Mark

[Twey]

Really? I see no reason why it would...

[Monark]

Twey,

Not to be pushy but, does that mean this is something you wish to pursue or is this dead?

Regards,

Mark

[Twey]

No, no, I haven't given up on you :) An URL would be nice though.

[Monark]

Twey,

Thank you, thank you, thank you. :cool:

I am trying to keep the spiders from finding the web site at this point, so I broke the URL apart. The url is www dot code-of-ethics dot org

Kindest Regards,

Mark

[Twey]

OK, use:
onchange="this.form.elements['sub'].click();"I've still no idea why this doesn't work with form.submit(). Maybe Mike or John will tell us.

[Monark]

I'm sorry to say, this still does not work, the same result. I will patiently wait for the answer,

-Mark

[Twey]

Eh?
It worked for me.
If you remove the code hiding the submit button and click it, it does still go through OK, doesn't it?

[Monark]

Twey,

This is the code I have... What are you deleting? Yes I ama total noob on this stuff. Sorry -Mark

<table align="left">
<form name="translateForm" action="http://www.google.com/translate" onchange="this.form.elements['sub'].click();">
<input type="hidden" name="u" value="" />
<select name="langpair" onchange="this.form.submit()">
<option value="" selected="selected">Translate</option>
<option value="en|it">Italian</option>
<option value="en|de">German</option>
<option value="en|es">Spanish</option>
<option value="en|fr">French</option>
<option value="en|pt">Portuguese</option>
<option value="en|ar">Arabic</option>
<option value="en|ja">Japanese</option>
<option value="en|ko">Korean</option>
<option value="en|zh-CN">Chinese (S)</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" name="sub" />
</form>
<script type="text/javascript">
document.forms['translateForm'].elements['sub'].style.display = "none";
</script>
</table>

[Twey]

If you remove <script ... </script>, purely for the purposes of testing, does the button work?

[Monark]

Twey,


If you remove <script ... </script>, purely for the purposes of testing, does the button work?
No it does not, it is up on the website now.

[Twey]

Aha. You appear to mistakenly have overwritten the onsubmit event handler.
onchange="this.form.elements['sub'].click();"should be
onsubmit="this.form.elements['u'].value=window.location.href;"I intended you to put that code in the place of the existing onchange handler :)

[Monark]

I am so sorry,:o

Is this what you mean?? Because if it is this does not work either :confused:


<table align="left">
<form name="translateForm" action="http://www.google.com/translate" onsubmit="this.form.elements['u'].value=window.location.href;">
<input type="hidden" name="u" value="" />
<select name="langpair" onchange="this.form.submit()">
<option value="" selected="selected">Translate</option>
<option value="en|it">Italian</option>
<option value="en|de">German</option>
<option value="en|es">Spanish</option>
<option value="en|fr">French</option>
<option value="en|pt">Portuguese</option>
<option value="en|ar">Arabic</option>
<option value="en|ja">Japanese</option>
<option value="en|ko">Korean</option>
<option value="en|zh-CN">Chinese (S)</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" name="sub" />
</form>
<script type="text/javascript">
document.forms['translateForm'].elements['sub'].style.display = "none";
</script>
</table>

[Twey]

Instead of
<select name="langpair" onchange="this.form.submit()">try
<select name="langpair" onchange="this.form.elements['sub'].click();">

[Monark]

This is now what I have but the same result :confused:


<table align="left">
<form name="translateForm" action="http://www.google.com/translate" onsubmit="this.form.elements['u'].value=window.location.href;">
<input type="hidden" name="u" value="" />
<select name="langpair" onchange="this.form.elements['sub'].click();">
<option value="" selected="selected">Translate</option>
<option value="en|it">Italian</option>
<option value="en|de">German</option>
<option value="en|es">Spanish</option>
<option value="en|fr">French</option>
<option value="en|pt">Portuguese</option>
<option value="en|ar">Arabic</option>
<option value="en|ja">Japanese</option>
<option value="en|ko">Korean</option>
<option value="en|zh-CN">Chinese (S)</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" name="sub" />
</form>
<script type="text/javascript">
document.forms['translateForm'].elements['sub'].style.display = "none";
</script>
</table>

[benslayton]

Ok try to follow along. Would it not be easier to do this....


STEP 1.
Find a script like this one from DD...
http://www.dynamicdrive.com/dynamicindex1/combodescribe.htm.

STEP 2.
Go to google's Translator (http://translate.google.com/translate_t), and enter the Url. Example (http://translate.google.com/translate?u=http%3A%2F%2Fdynamicdrive.com&langpair=en%7Ces&hl=en&ie=UTF8)

STEP 3.
Right click on the back ground and select properties. It gives you this address (http://64.233.179.104/translate_c?hl=en&langpair=en%7Ces&u=http://dynamicdrive.com/).

STEP 4.
Now go in to the web page using the script above from step 1 and link them.

STEP 5. (optional)
If you do not want the link coming up at the top of the address bar you can make a page (eg. http://www.yourdomain.org/french/) and use this code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of your Page</title>
<META NAME="description" CONTENT="Meta name">
<META NAME="keywords" CONTENT="Meta Name">
</head>
<FRAMESET rows="0%,100%" border="0">
<FRAME src="http://www.shout.to/hidden">
<FRAME src="http://www.bellsouthpwp2.net/b/e/benslayton124/index.htm">
</FRAMESET><noframes></noframes>
</html>

This is the code that i got from the redirect service i use http://shout.to

*This is just an idea Twey or jscheuer1 would know more than I would.

[Monark]

Twey,

I found my error!!!! Thank you so much!:D

I had this

onsubmit="this.form.elements['u'].value=window.location.href;"

Should be this

onsubmit="this.elements.u.value = window.location.href;"

Resulting in a final file of this

<table align="left">
<form name="translateForm" action="http://www.google.com/translate" onsubmit="this.elements.u.value = window.location.href;">
<input type="hidden" name="u" value="" />
<select name="langpair" onchange="this.form.elements['sub'].click();">
<option value="" selected="selected">Translate</option>
<option value="en|it">Italian</option>
<option value="en|de">German</option>
<option value="en|es">Spanish</option>
<option value="en|fr">French</option>
<option value="en|pt">Portuguese</option>
<option value="en|ar">Arabic</option>
<option value="en|ja">Japanese</option>
<option value="en|ko">Korean</option>
<option value="en|zh-CN">Chinese (S)</option>
</select>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="UTF8" />
<br />
<input type="submit" value="Translate" name="sub" />
</form>
<script type="text/javascript">
document.forms['translateForm'].elements['sub'].style.display = "none";
</script>
</table>

[Monark]

Twey,

In case I never said it, and even if I did I want to say it again. Your patience is incredible. Thank you so much for all of your time and help!

- Mark