form

Javascript複数のセレクトメニュー(プルダウンメニュー)どちらかが変更されたらGETで送信したい時

表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。

ちなみにセレクトメニュー(プルダウンメニュー)が1個の場合は

Javascript

function navi(c){
var class = c.options[c.selectedIndex].value;
location.href = '?c=' + class;
}

HTML

<form method="get" action="" name="form">
	<select name="class" onChange="navi(this)" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">1組</option>
		<option value="2">2組</option>
	</select>
</form>

上記ではクラスのプルダウンを変更すると同ページにGETで引数が付いた状態でジャンプする。

例 https://www.digital-gate.com/?c=3

セレクトメニュー(プルダウンメニュー)が2個の場合は

Javascript

function multipleNavi(obj){
var class = document.form.class.value;
var group = document.form.group.value;
location.href = '?c=' + class + '&g=' + group;
}

HTML

<form method="get" action="" name="form">
	<select name="class" onChange="multipleNavi()" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">1組</option>
		<option value="2">2組</option>
	</select>
	<select name="group" onChange="multipleNavi()" id="group-items">
		<option value="0">全グループ表示</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
	</select>
</form>

上記ではクラスまたはグループいずれかのプルダウンを変更すると同ページにGETで両方の引数が付いた状態でジャンプする。

例 https://www.digital-gate.com/?c=2&g=1

iuiのトグルスイッチをフォーム(form)で使う方法 サンプル付き

iuiのトグルスイッチをフォーム(form)で使う方法 サンプル付き

iPhone 3G用のWebページを作る時に便利なものとしてiPhone用のページが簡単に作れる『iUI』というWeb製作支援ライブラリがある。
iUIを導入することにより、標準的なHTMLを記述するだけで、iPhone用のページを簡単に作ることができものでありコードは次のページで入手できる。

iui User Interface (UI) Library for Safari development on iPhone
http://code.google.com/p/iui/

上記URLからライブラリをダウンロードしたら、ui.cssとiui.jsの階層に合わせてHTML変更しアップロードする。
特別な間違いをしない限り、music.htmlとprefs.htmlにてiPhone 3G用にデザインされたページを確認できるはず。

さて、このiui(ui.cssとiui.js)を使う上で魅力的なのはiPhoneの中で随所に使われているUIであるトグルスイッチが再現できていることなのだが、ダウンロードしたサンプルはあくまでUIの画面表示を再現できるだけで、そのままでは実際のフォームボタンとしては使えない。
単にフォームの中にそのままのタグを埋め込んで、トグルスイッチを切り替えてみても、送信されたフォーム(form)の中には何も値は送られない。

ダウンロードしたprefs.html内のトグルスイッチの部分のタグ

HTML

<div class="row">
<label>Repeat</label>
<div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>

上のタグを見ればわかるようにnameの指定もvalueの指定も無いからvalueが送信されないのは当然。

そこで、実際のフォームで使うための解決方法として、タグ内にあるonclickを使い、トグルスイッチの状態をjavascriptで取得し、その値をjavascriptを使ってhiddenで設定した項目の値に渡すことで、トグルスイッチの値をフォーム(form)で送る方法を使う。

説明

まずはonclick=””の部分を onclick=”setToggle1(this.getAttribute(‘toggled’))”とすることにより、トグルスイッチを切り替えた時の状態をjavascriptのsetToggle1に渡す。実際の値はtrueおよびfalseになる。

次に、取得した値trueおよびfalseをhiddenで設定した項目の値に代入する

document.upForm.copyright.value = value;を上のonclickから呼び出す。

setToggle1(value){document.upForm.copyright.value = value;}

送られてきたトグルの状態を示す値(value:trueおよびfalse)を受けるフォームを記述する。

<input type="hidden" name="copyright">

以上で送信されたものname=copyrightのvalueとしてtrueまたはfalseが送信される。

確認の時はPOSTの指定をGETにしてやるとアドレスバーで確認できて便利。

■サンプル(フォーム内の記述サンプル)

<li class="row"><b>Copyright</b><div class="toggle" onclick="setToggle1(this.getAttribute('toggled'))"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div><input type="hidden" name="copyright"></li>

■サンプル(ヘッダ部分のjavascriptの記述サンプル)

<script type="text/javascript">
function setToggle1(value){document.upForm.copyright.value = value;}
</script>

■サンプルサイト(iPhone用壁紙登録・配布サイト)

DG Wallpaper for iPhone
http://iphone.digital-gate.com/wallpaper/index.php?mode=add

※PCからのアクセスはPC用のページが表示されるので、確認はiPhoneから。