jQueryを使ってsubmitイベントをキャプチャし、JSONとしてフォーマットされたフォーム要素をPHPページに送信することを試みています。
最初は .click()
イベントを使っていたのですが、代わりに .submit()
イベントを使うようにしました。
現在、以下のようなコードに切り詰めています。
HTML
<form method="POST" id="login_form">
<label>Username:</label>
<input type="text" name="username" id="username"/>
<label>Password:</label>
<input type="password" name="password" id="password"/>
<input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>
Javascript
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
});
コードをdocument readyで囲み、デフォルトの送信アクションを防ぐ。
$(function() { //shorthand document.ready function
$('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
var data = $("#login_form :input").serializeArray();
console.log(data); //use the console for debugging, F12 in Chrome, not alerts
});
});
を試してみてください。
イベントの流れを断ち切るために、 ´return false´を使います。
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
編集。
jQueryの 'length'を持つフォーム要素があるかどうかを確認します。
alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
ORになります。
はDOMの準備が整うのを待ちます。
jQuery(function() {
alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
});
コードをドキュメントのイベント"ready"の中に入れるのか、それともDOMの準備ができてから入れるのか。
form.submit関数を独自の実装で置き換えるだけです。
var form = document.getElementById('form');
var formSubmit = form.submit; //save reference to original submit function
form.onsubmit = function(e)
{
formHandler();
return false;
};
var formHandler = form.submit = function()
{
alert('hi there');
formSubmit(); //optionally submit the form
};