読者です 読者をやめる 読者になる 読者になる

kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

フォームを動的に操作してみた

Androidで、PhoneGapとjQuery Mobileを勉強しています。jQuery Mobileのフォームを動的に生成し、フォーム入力内容を取得する処理を作成しましたので、メモしておきます。

概要

次のように、ユーザ入力の画面と、ユーザ入力値を表示する画面を用意しました。

テキスト入力

入力ページのHTML

<div data-role="fieldcontain">
	<label for="jsform_text">Text input:</label>
	<input type="text" name="jsform_text" id="jsform_text" value="サンプルテキスト" />
</div>

出力ページのHTML

<p class="wordbreak">Text<br><span id="jsformresult_text" class="ui-body-c"></span></p>

出力ページにユーザ入力値を設定するJavaScript
ページを何度も表示した時、前回の入力値が残らないように、empty()を呼んでから、ユーザ入力値を設定しています。ここでは、ユーザ入力値を直接出力項目へ設定していますが、複数ページをまたがって値の受け渡しをする場合は、直接設定することはできないようです。一旦変数に入れるなどして値を保持する必要がありそうです。

$("#jsformresult_text").empty().append($("#jsform_text").val());

フリップスイッチ

入力ページのHTML

<div data-role="fieldcontain">
	<label for="jsform_flip">Select slider:</label>
	<select name="jsform_flip" id="jsform_flip" data-role="slider">
		<option value="off">Off</option>
		<option value="on">On</option>
	</select>
</div>

出力ページのHTML

<p class="wordbreak">On/off slider<br><span id="jsformresult_flip" class="ui-body-c"></span></p>

出力ページにユーザ入力値を設定するJavaScript

$("#jsformresult_flip").empty().append($("#jsform_flip").val());

スライダー

入力ページのHTML

<div data-role="fieldcontain">
	<label for="jsform_slider">Input slider:</label>
	<input type="range" name="jsform_slider" id="jsform_slider" value="3" min="0" max="10"  />
</div>

出力ページのHTML

<p class="wordbreak">Number slider<br><span id="jsformresult_slider" class="ui-body-c"></span></p>

出力ページにユーザ入力値を設定するJavaScript

$("#jsformresult_slider").empty().append($("#jsform_slider").val());

チェックボックス

入力ページのHTML

<div data-role="fieldcontain">
	<fieldset data-role="controlgroup" id="jsform_checkbox_fieldset">
		<legend>Choose as many snacks as you'd like:</legend>
		<div id="jsform_checkbox_group"></div>
	</fieldset>
</div>

チェックボックスに選択項目を設定するJavaScript
チェック有効状態のサンプルとして、1件目を選択状態にしています。出力ページでは、選択項目のインデックスを取得することにしたため、inputタグのvalue属性にはインデックスを設定しています。data-role='controlgroup'のdivタグですが、静的なページでは、jQuery Mobile側で生成されるためタグの記述不要でしたが、動的なページでは、自分で記述しないと選択項目の1つ1つが独立したボタンの形になってしまいました。

var checkboxContents = "";
checkboxContents += "<div data-role='controlgroup'>";
for (i = 0; i < jsformData.checkboxItems.length; i++) {
	var label = jsformData.checkboxItems[i];
	var checked = "";
	if (i == 0) {
		checked = "checked";
	}
	checkboxContents += '<input type="checkbox" name="jsform_checkbox" id="jsform_checkbox'
			+ i
			+ '" value="'
			+ i
			+ '" class="custom" '
			+ checked + ' />';
	checkboxContents += '<label for="jsform_checkbox' + i
			+ '">' + label + '</label>';
}
checkboxContents += "</div>";
$("#jsform_checkbox_group").empty().append(checkboxContents).trigger("create");

出力ページのHTML

<p class="wordbreak">Checkbox<br><span id="jsformresult_checkbox" class="ui-body-c"></span></p>

出力ページにユーザ入力値を設定するJavaScript
チェック有効の項目のみを、カンマ区切りで表示するようにしてみました。

var checkboxResult = "";
$("input[name='jsform_checkbox']:checked").each(function() {
	if (checkboxResult.length > 0) {
		checkboxResult += ",";
	}
	checkboxResult += $(this).val();
});
$("#jsformresult_checkbox").empty().append(checkboxResult);

ラジオボタン

入力ページのHTML

<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
		<legend>Choose a pet:</legend>
		<div id="jsform_radio_group"></div>
	</fieldset>
</div>

ラジオボタンの選択項目を設定するJavaScript
チェック有効状態のサンプルとして、1件目を選択状態にしています。出力ページでは、選択項目のインデックスを取得することにしたため、inputタグのvalue属性にはインデックスを設定しています。data-role='controlgroup'のdivタグですが、静的なページでは、jQuery Mobile側で生成されるためタグの記述不要でしたが、動的なページでは、自分で記述しないと選択項目の1つ1つが独立したボタンの形になってしまいました。

var radioContents = "";
radioContents += "<div data-role='controlgroup'>";
for (i = 0; i < jsformData.radioItems.length; i++) {
	var label = jsformData.radioItems[i];
	var checked = "";
	if (i == 0) {
		checked = "checked";
	}
	radioContents += '<input type="radio" name="jsform_radio" id="jsform_radio'
			+ i
			+ '" value="'
			+ i
			+ '" class="custom" '
			+ checked + ' />';
	radioContents += '<label for="jsform_radio' + i + '">'
			+ label + '</label>';
}
radioContents += "</div>";
$("#jsform_radio_group").empty().append(radioContents)
		.trigger("create");

出力ページのHTML

<p class="wordbreak">Radio<br><span id="jsformresult_radio" class="ui-body-c"></span></p>

出力ページにユーザ入力値を設定するJavaScript

$("#jsformresult_radio").empty().append($("input[name='jsform_radio']:checked").val());

セレクトメニュー

入力ページのHTML

<div data-role="fieldcontain">
	<label for="jsform_select" class="select">Shipping method:</label>
	<select name="jsform_select" id="jsform_select">
	</select>
</div>

セレクトメニューの選択項目を設定するJavaScript
選択状態は設定していませんが、デフォルトで1件目が選択されます。

var selectContents = "";
for (i = 0; i < jsformData.selectItems.length; i++) {
	var label = jsformData.selectItems[i];
	selectContents += '<option value="' + i + '">' + label + '</option>';
}
$("#jsform_select").empty().append(selectContents)
		.selectmenu("refresh");

出力ページのHTML

<p class="wordbreak">Select<br><span id="jsformresult_select" class="ui-body-c"></span></p>

出力ページにユーザ入力値を設定するJavaScript

$("#jsformresult_select").empty().append($("#jsform_select").val());

動作環境

  • Android: 2.1以降
  • PhoneGap(Cordova): 1.5.0
  • jQuery Mobile: 1.1.0
  • 動作確認端末: Xperia SO-01B