0

感谢您花时间看我的问题。我正在用 Javascript 制作一个非常基本的“翻译器”，我只想接受用户输入，使用 RegExp 进行一些更改，然后将修改后的信息发送回一个空的 div。

当我单击提交按钮时，信息将提交到 URL，从输入区域中删除，并在所需区域短暂闪烁......但需要第二次单击才能根据需要保留在 #receptive 中。我不确定我正在寻找的效果是否需要 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>
4

1 回答 1

1

您可能需要在单击按钮时通过返回 false 来取消表单操作。您可以使用 Firebug（或 Chrome/IE 开发人员工具）检查是否有额外的请求发送。 

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

请参阅以下位置的小提琴：http: //jsfiddle.net/W7nRW/ （注意：处理程序正在使用 jQuery 不显眼地应用。如果从 中删除 return 语句processFormData，您将收到有关需要使用 POST 请求的错误）

于 2013-01-30T04:38:30.707 回答