デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

form

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

    ·

    master

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

    ちなみにセレクトメニュー（プルダウンメニュー）が１個の場合は

    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">１組</option>
		<option value="2">２組</option>
	</select>
</form>

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

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

    セレクトメニュー（プルダウンメニュー）が２個の場合は

    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">１組</option>
		<option value="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で両方の引数が付いた状態でジャンプする。

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

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

    ·

    master

    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から。