jQueryを使った、Form処理プラグイン｜HTMLアークアップ
- IEではスタイルシートが適用できないので画像によるデザインができます
- ezMark: jQuery Checkbox & Radiobutton Plugin
数字バリデーション：
- ライブラリーの追加機能として使えそうな、とっても軽い「11KB」プラグインです
- jQuery.validity
簡単にAjax化：
日本語入力モード制御：
jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例
【Forms 】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ
.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
【Selectors】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ
:checked
チェックの入っているボックスの数を取得。
※必須項目が選択されているか確認するときなど
function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n == 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);引用元URL：http://semooh.jp/jquery/api/selectors/%3Achecked/
- -
$("#test_result :checkbox").click(function(){
$("#display").text(
"チェックされている数は"+$("#test_result :checkbox:checked").length+"個だよ"
);
});引用元URL：http://stacktrace.jp/jquery/api/selectors/checked.html
:selected
選択状態にある全ての要素を選択。
$("#test_result select").change(function(){
var str = "";
$("#test_result option:selected").each(function() {
str += $(this).text() + " ";
});$("#display").text(str);
});
引用元URL：http://stacktrace.jp/jquery/api/selectors/selected.html
:radio
type属性がradio要素を選択。
$("#test_result :radio").parent().append($("").text("<-- radio").css("background", "yellow"));
:text
全てのtext要素を選択。
:contains(text)
指定された文字列を含む要素を返す。
※テキストエリアから禁止キーワードを探すときなど
[attribute]
マッチした要素のうち、指定された属性名を返します。
※のname属性で探すときなど
[属性名=文字列]
[attribute=value]
指定された文字列に”等しい要素”を返す。
[attribute!=value]
指定された文字列と”異なる要素”を返す。
[attribute^=value]
指定された文字列で”始まる要素”を返す。
[attribute$=value]
指定された文字列で”終わる要素”をす。
[attribute*=value]
指定された文字列を”含む要素”を返す。
（この記事はマークアップ勉強用メモです）
【その他の追加処理】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ
.end()
jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻す。1つ前の状態が無い場合、空の選択状態を返す。
.length
jQueryオブジェクトのエレメント数を保持する。
保持する値はjQueryオブジェクトのsizeメソッドの戻り値と同じ。
.size()
jQueryオブジェクトのエレメント数を返す。
返される値はjQueryオブジェクトのlengthプロパティと同じ。
.trim(str)
文字列の先頭と末尾から、正規表現で空白とみなされたものを除去。
改行コードや全角のブランクであっても、空白として処理される。
＞Utilities
.scrollTo()
送信ボタンをクリックしたときに、画面の上部へ移動 $.scrollTo("#pagetop", 300);
（この記事はマークアップ勉強用メモです）
