0

私の質問を見てくれてありがとう。私は Javascript で非常に基本的な「トランスレーター」を作成しています。ユーザー入力を取得し、RegExp でいくつかの変更を加えてから、変更された情報を空の div に送り返したいだけです。

送信ボタンをクリックすると、情報が URL に送信され、入力領域から削除され、目的の領域で短時間点滅します...ただし、必要に応じて #receptive にとどまるには 2 回目のクリックが必要です。探している効果に 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 に答える