タグ「フォーム」での検索

● jQuery でのフォーム操作

● フォームの種類を判別する( 例 : checkbox か radioか)

alert( $('#hoge').prop('type') );

● タグ名からフォームの種類を判別する( 例 : <SELECT name="yoyaku"> を判別 )

if ( $("[name='yoyaku']").prop("tagName") == 'SELECT' ){
//処理
}

● name="xxxx" の部分一致

前方一致

$("[name^='yoyaku']")

yoyaku_01 , yoyaku_02 などにマッチします。

後方一致

$("[name$='_01']")

name="data_01" や name="hoge_01" などにマッチします。

部分一致

$("[name*='at']")

name="created_at" や name="atmark" などにマッチします。

● 1行テキストエリア(id="hoge")の値を取得する

<input type="text" name="hoge" id="hoge" value="999" >
//  jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;

● 1行テキストエリア(id="hoge")へ値('test_string')をセットする

//  jQuery
$('#hoge').val('test_string');

● ドロップダウンリストの(id="hoge")の値を取得する

var v = $('#hoge').val();

● ドロップダウンリストの選択された option のテキストを取得する

  var select_obj = $("[name='school_id']");
  var selected_option_text = select_obj.children(':selected').text();

● ドロップダウンリスト の選択状態を変更する

$('.hoge').val(currency_unit);

● ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

● ラジオボタンのチェックを外して未選択にする

$( "[name='my_radio']" ).prop('checked', false);

// ↑ これで動かない場合は attr を使用する
$( "[name='my_radio']" ).attr('checked', false);

● 単一チェックボックス(id=cb1)の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

● checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

● checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

● 「全てを選択する」ボタンを押すと全てのチェックボックスのチェックを付ける

id="all_check_on”な要素をクリックするとname = ”user_id[]" のチェックボックス全てにチェックをつける(または解除)します
html

<label><input type="checkbox" id="all_check_on">全て選択する</label>
<input type="checkbox" name="user_id[]" value="1">
<input type="checkbox" name="user_id[]" value="2">
<input type="checkbox" name="user_id[]" value="3">

js

$("#all_check_on").click(function() {
    if ($(this).prop("checked")) {
        $('[name="user_id[]"]').prop("checked", true);
    } else {
        $('[name="user_id[]"]').prop("checked", false);
    }
});

● チェックされている複数チェックボックスの値をURLパラメーターの形式で取得する

name = ”user_id[]" のチェックされている全てのチェックボックスの値をURLに渡せる形式で取得します。 js

param = $('[name="user_id[]"]:checked').map(function(){
	return this.name + '=' + $(this).val();
}).get().join('&');

console.log( param );

表示結果

user_id[]=1&user_id[]=2

● フォームをサブミットする

<form id="FM"></form>
 $('#FM').submit();

● (id="input_button")の送信ボタンを押せないようにする

$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる

● ドロップダウンリスト(class="my_list")を選択できないようにする

$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる

● フォーム要素一括セレクタ

$(":input")		// 全てのフォーム要素
$(":button")	// 全てのボタン要素

$(":text")		// テキストボックス
$(":password")	// パスワード入力ボックス
$(":radio")		// ラジオボタン
$(":checkbox")	// チェックボックス
$(":file")		// ファイル選択ボックス
$(":submit")	// 送信ボタン
$(":image")		// 画像ボタン
$(":reset")		// リセットボタン

例:全てのフォーム要素にアクセスする

$(":input").each(function(index, el) {
    console.log(el.name);
});

● セレクトボックス(ドロップダウンリスト)が変更されたら実行

<script type="text/javascript">
$(document).ready(function() {
	$("[name='mt_payment_id']").change(function() {
		console.log( '変更されました' );
	});	
});
</script>
No.666
02/26 21:06

edit

prototype.js
jQuery
フォーム

jqueryのイベント一覧

● jqueryのイベント(ユーザー操作イベント)

イベント名 説明
click 指定要素上で左クリック時に発火
dblclick 指定要素上でダブルクリック時に発火(clickも発火)
contextmenu 指定要素上でマウス右ボタンを押した時に発火
mousedown 指定要素上で左or右ボタンを押した時に発火
mouseup 指定要素上で左or右ボタンを離した時に発火
mousemove 指定要素上でマウスカーソルが動いた時に発火
mouseover / mouseenter 指定要素上にマウスカーソルが入った時に発火
mouseout / mouseleave 指定要素上からマウスカーソルが離れた時に発火
keydown / keypress キーを押した瞬間に発火
keyup キーを離した瞬間に発火

● jqueryのイベント(要素イベント)

イベント名 説明
focus / focusin 要素にフォーカスが当たった時に発火
blur / focusout 要素からフォーカスが外れた時に発火
change 要素の内容が変更された時に発火(1行テキストや複数行テキストの場合変更がありかつフォーカスが外れた瞬間)
select inputやtextareaのテキストを選択した時に発火
submit フォームが送信された時に発火

● jqueryのイベント(その他イベント)

イベント名 説明
scroll 画面がスクロールした時に発火
resize ウィンドウのサイズが変更された時に発火
ready HTMLが読み込まれた時に発火
unload 別のページに遷移する時に発火
load データの読み込みが完了した時に発火
error データの読み込みに失敗した時に発火
No.1142
12/15 15:46

edit

フォーム
jQuery

jQueryでフォームの入力途中で画面遷移しようとするとアラートを出して注意する

● jQueryでフォームの入力途中で画面遷移しようとするとアラートを出す例

● フォーム例

<form action="test.php" name="MYNAME">
	<input type="text" name="input1">
	<textarea name="input2"></textarea>
</form> 

● JavaScript

$(function(){
var form_change_flg = false;
    $(window).on('beforeunload', function() {
        if (form_change_flg) {
          return "入力画面を閉じようとしています。入力中の情報がありますがよろしいですか?";
        }
    });
    //フォームの内容が変更されたらフラグを立てる
    $('form[name=MYNAME] input[name=title1]').change(function() {
        form_change_flg = true;
    });
    $('form[name=MYNAME] textarea[name=input2]').change(function() {
        form_change_flg = true;
    });
    // フォーム送信時はアラートOFF
    $('form[name=MYNAME]').submit(function(){
        form_change_flg = false;
    });
});

No.1092
12/15 15:16

edit

フォーム
jQuery

No.1082
12/15 15:17

edit

jQuery
フォーム

JavaScript(jQuery) で郵便番号から住所を自動入力する2つのライブラリ

● 1.【 jQueryプラグイン jquery.jpostal.js】

設置が簡単なのでおすすめです。住所データも自動更新。
https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jpostal.js"></script>

スクリプトの実行(郵便番号を入力すると自動でフォームに住所を入力)

$('#postcode1').jpostal({
	postcode : [
		'#postcode1', // 郵便番号 前3桁
		'#postcode2' // 郵便番号 後4桁
	],
	address : {
		'#address1'  : '%3', // 都道府県
		'#address2'  : '%4', //住所1
		'#address3'  : '%5' // 住所2
	}
});

です。とても簡単ですね。

HTMLは次のように準備します。

郵便番号 : <input type="text" name="postcode1" id="postcode1" > - <input type="text" name="postcode2" id="postcode2" > 

都道府県 : <input type="text" name="address1" id="address1" > 
住所1 : <input type="text" name="address2" id="address2" > 
住所2 : <input type="text" name="address3" id="address3" > 

● 「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力する

「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力するには、

<button id="btn_post" type="button">郵便番号から住所を自動入力</button>

というボタンを設置して

  $(document).ready(function() {
    $('#btn_post').jpostal({
      click : '#btn_post',
      postcode : [
        '#zip_code'
      ],
      address : {
        '#prefecture_name': '%3',
        '#addr_name'    : '%4%5'
      }
    });
  });

という風に呼び出します。


● 郵便番号が入力されたときに自動的に全角から半角へ変換する

moji.js を使用して次のようにします。

・moji.js

https://github.com/niwaringo/moji

<script src="./js/moji.js"></script>
<script type="text/javascript">
 $("#zip_code").keyup(function(){
    var str = $(this).val();
    var han = moji(str).convert("ZEtoHE").toString();
    $(this).val(han);
  });
</script>


● 2. 【ajaxzip3】

郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。
https://github.com/ajaxzip3/ajaxzip3.github.io

ライブラリの読み込み

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

郵便番号入力欄に追加

正規表現で郵便番号が7桁入力された時に検索を実行するようにします。 【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると 【name=prefecture】のドロップダウンリスト 【name=address】の1行テキストに住所が反映されます。 ■ HTMLの1行テキストを下記のように修正

<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />

■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)

<script>
var postal_name = '';
function check_zip( _this ){
    if ( postal_name != _this.value ){
        AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
        postal_name = _this.value;
    }
}
</script>

これだけです。

No.870
02/27 10:13

edit

jQuery
フォーム