【Forms 】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ

ｊQuery

.blur()
要素がフォーカスを失ったタイミングで実行。
戻り値にfalseを返すことなどでキャンセル。
＞Form Events

.change()
フォーカスを失った状態のinput要素がフォーカスを得て、値の変更を完了した時に実行。


$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();

引用元URL：http://semooh.jp/jquery/api/events/change/fn/
＞Form Events

.focus()
要素がフォーカスを受け取ったタイミングで実行。
＞Form Events

jQuery.param()
Collection Manipulation, Helper Functions

.select()
テキストエリアの”文字列”を選択状態にしたり、選択範囲を変更したタイミングで実行。

$(document).select( function () {
$("div").text("Something was selected").show().fadeOut(1000);
});
＞Form Events

.serializeArray() , .serialize()
FormやElementをシリアライズ。JSON形式のデータ構造で戻り値を返す(左API)。

function showValues() {
var fields = $(":input").serializeArray();
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}

$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();

引用元URL：http://semooh.jp/jquery/api/ajax/serializeArray/+/

    • -

var obj = $('form').serializeArray();
$.each(obj, function(index, item) {
$('body').append(item.name + ":" + item.value + "
");
});

引用元URL：フォームからの入力値をJSON形式の文字列に変換するには？

＞Helper Functions

.submit()
フォームがsubmitされた際に呼び出されます。

$("form").submit(function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});

引用元URL：http://semooh.jp/jquery/api/events/submit/fn/
＞Form Events

.val()
全ての要素のvalue属性を返す。
checkboxやselects、radioなどの値を設定することも可能。

$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});

引用元URL：http://semooh.jp/jquery/api/attributes/val/val/
＞Attributes, General Attributes