Question

感谢您抽出宝贵时间来查看我的问题。我在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>

Answer 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进行不显眼的应用。如果从processFormData中删除return语句，您将收到有关需要使用POST的错误请求）

Javascript .innerHTML插入需要两次点击才能显示

1 个答案: