Member Avatar for 360anish

Hi,

i have two input box

input box 1 : name is first

input box 2 : name is second

suppose if i enter "fresh" should be transliterated using google and the output in french should be displayed in the second input box.

does anyone have any idea how to do this???

  • 2 Contributors
  • 2 Replies
  • 292 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by 360anish

Dani AI

Generated

Quick clarification first: you probably want translation, not transliteration. Transliteration maps characters between different writing systems (Latin -> Greek, Cyrillic -> Devanagari, etc.). French and English both use the Latin alphabet, so a transliteration library will not "convert" English words into French words. s experiment with the transliteration control explains why you saw Greek output — that control is for script conversion. was right to point out you need an API when using Google services.

A practical, robust approach:

  • Treat the problem as translation: send the first input to a translation service and write the translated result into the second input.
  • Protect any API key on the server. Do the actual translation server-side and expose a small JSON endpoint the page can call.
  • Avoid firing a request on every keystroke. Use the input event plus a debounce so you only translate after the user pauses typing.
  • Keep UI concerns separate: preserve focus and cursor, handle empty input, show errors or fallback text, and cache recent translations to reduce calls.

Example (client-side debounce + fetch to a server endpoint):

<input id="first" />
<input id="second" />

<script>
const debounce = (fn, wait=350) => {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), wait);
  };
};

async function translateText(text) {
  const res = await fetch('/translate.php', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({text, target:'fr'})
  });
  const j = await res.json();
  return j.translatedText || '';
}

const onInput = debounce(async (e) => {
  const out = document.getElementById('second');
  const txt = e.target.value.trim();
  if (!txt) { out.value = ''; return; }
  try { out.value = await translateText(txt); } catch (err) { out.value = '[error]'; }
}, 350);

document.getElementById('first').addEventListener('input', onInput);
</script>

Server-side sketch (PHP): accept JSON, call your chosen translation API from server code, return {"translatedText":"..."}. Keep API keys out of client code and handle rate limits.

Troubleshooting notes: avoid update loops (do not attach the same handler to the target field), consider language detection if you accept multiple source languages, and remember single-word translations like "fresh" depend on context and gender in French ("frais" vs "fraiche"). If your goal really is transliteration into a non-Latin script, the transliteration control is appropriate; otherwise use an official translation API and the pattern above.

Recommended Answers

All 2 Replies

Member Avatar for Taywin

If you are going to use google, you need their API (javascript library). Not sure if they have this library available.

Member Avatar for 360anish

thanks for replying.


the google API is available...

the transliteration library actually does not support French so we can use Greek language

please check the code below

<html>
<head>
<title> Transliteration Help </title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("elements", "1", {packages: "transliteration"});
</script> 

<script>
function OnLoad() {
	var currValue = document.getElementById("second");

	var options = {
		sourceLanguage:
		google.elements.transliteration.LanguageCode.ENGLISH,
		destinationLanguage:
		[google.elements.transliteration.LanguageCode.GREEK],
		shortcutKey: 'ctrl+g',
		transliterationEnabled: true
	};

	var control = new
	google.elements.transliteration.TransliterationControl(options);
	control.makeTransliteratable(["second"]);
	var postValue = document.getElementById("second");

	}

	google.setOnLoadCallback(OnLoad);

</script> 

<script type="text/javascript">
function tcall()
	{
		document.getElementById('second').value = document.getElementById('first').value;
	}
	
	
</script>

</head>
<body>
<br>
Translietration test.
<br><br><center>


	<form name="trans">First Box
		<input size="40" type="text" id="first" name="first" onkeydown="javascript: tcall();" onkeyup="javascript: tcall();"  />

		<br /><br />Second Box
		<input size="40" type="text" id="second" name="second"  />

	</form>

<br /><br />transliterated text should be there in the second box.

</body>
</html>

i hope this may help proceed further.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.