Question

Thanks for taking the time to look at my question. I’m making a very basic “translator” in Javascript, and I simply want to take user input, make a few changes with RegExp, then send back the modified information into an empty div.

When I click on the submit button, the information submits to the URL, removes itself from the input area, and flashes briefly in the desired area… but requires a second click to remain in #receptive as desired. I’m not sure if the effect I’m looking for requires AJAX.

<form name="translate" id="translate_frm" action="#">

Try it out: <input type="text" name="inputField" id="inputField" />

<button name="submit" onclick="processFormData();">Do it!</button>
</form>

<div id="receptive"></div>

<script>

function age(str) {
 return str.replace(/my/, "mine")
  .replace(/\bis\b/g, "be")
  .replace(/y\b/g, "ye")
  .replace(/t\b/g, "te")
  .replace(/t,/g, "te,")
  .replace(/t\./g, "te.");
}

function finalWrite(text, location) {
  document.getElementById(location).innerHTML = "<p>" + text + "</p>";
}

function processFormData() {
  var inputText = document.getElementById("inputField");
  var refactored = age(inputText.value);
  finalWrite(refactored, "receptive");
}

</script>

Answer 1

You probably need to cancel the form action by returning false when the button is clicked. You can check this to see if there is an extra request being sent using Firebug (or Chrome/IE developer tools).

function processFormData() {
  var inputText = document.getElementById("inputField");
  var refactored = age(inputText.value);
  finalWrite(refactored, "receptive");
  return false;
}

See the fiddle at: http://jsfiddle.net/W7nRW/ (note: the handler is being applied unobtrusively using jQuery. If you remove the return statement from processFormData, you’ll get an error about needing to use a POST request)