フォームを動的に操作してみた
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());
