2012-01-11 9 views
1

私は現在、HTML形式のデータをPHPファイルに直接投稿しています。送信ボタンがJavaScript関数にデータを送信し、AJAX関数を作成できるようにコードを更新したいと思います。送信ボタンがPHPファイルにポストするのではなく、JavaScript関数をアクティブにすることは可能ですか?私が出ている唯一のものは以下の通りです、かなり明らかに動作しない:送信ボタンを使用してAJAX機能を有効にすることはできますか?

<html> 
<head> 
<script type="text/javascript"> 
function ajax(){ 
    //... 
} 
</script> 
</head> 

<body> 
<form action="ajax();"> 
    <!-- ... --> 
    <input type="submit" value="Submit" /> 
</form> 
</body> 
</html> 

答えて

6

明示的に行われてから、デフォルトの動作を妨げ入力し「送信」「クリック」ハンドラを与えることができます。次に、関数内

<input type='submit' value='Submit' onclick='ajax(event)'> 

function ajax(event) { 
    if ('preventDefault' in event) event.preventDefault(); 
    event.returnValue = false; // for IE before IE9 
    // ... 
} 

編集 @Esailijaは別のオプションではなく<form>要素の「提出」イベントを処理することであることを正しく指摘しています。機能はほとんど同じ、実際にはまったく同じになりますが、あなたはこのようにそれを配線したい:

<form id='yourForm' onsubmit='ajax(event)'> 

その意志等も「Enter」キーアクションのようなトラップの事、

+0

この場合、「イベント」は何か説明できますか?また、これはフォームのデータをjavascript関数に送信するか、それとも自分で取得する必要がありますか? – ewok

+0

"event"パラメータは、イベントハンドラへの呼び出しをトリガしたイベントを記述するためにブラウザによって作成されるオブジェクトです。そのコードはどこにも送信しません。これは、あなたが尋ねたように、あなたがどのように機能を設定するかの単なる例です。私の例では、関数の最初の2行がAjax呼び出しを行うコードになります。あなたのフォームやサーバーなどによっては、あなたのやり方はまったく異なります。 – Pointy

+1

しかし、フォームはまだ他の手段(enterキーを押すなど)で送信されますので、フォームでこれを行うのがより堅牢だと思いますonsubmit and leave送信ボタンだけ。 – Esailija

2

もちろんできます。しかし、このような入力であなたのJavascript関数を呼び出すほうが便利です:

フォーム内のアクション部分を削除してください。

0

Pointyが正しい...送信ボタンにクリックハンドラを追加するだけですが、フォームが実際にフォームのアクションに投稿されないように、クリックハンドラの最後の行が "false"を返すようにしてください。

<html> 
<head> 
<script type="text/javascript"> 
function ajax(){ 
    //... 
return false; 
} 
</script> 
</head> 

<body> 
<form action="thispage.htm"> 
    <!-- ... --> 
    <input type="submit" value="Submit" onclick="ajax();" /> 
</form> 
</body> 
</html> 
+0

'を呼び出す。preventDefault() 'を呼び出し、' returnValue'を 'false'に設定すると、要素のデフォルトアクションをキャンセルする効果があります。 – Pointy

+0

'falseを返す 'ことがあれば、それはハンドラ関数内にある必要があります。 'onclick =" ajax(); falseを返す "または' onclick = "return ajax();" – Esailija

関連する問題