プロが教える店舗＆オフィスのセキュリティ対策術

jquerymobileで作成するアンケートページ

解決済

  • 質問者：timesugar
  • 質問日時：
  • 回答数：1件

jQuerymobileでアンケートページを作成しております。アンケートの結果(textbox,checkbox,radioboxなど)をformからcgiに飛ばして最終的にcsvファイルでデータを見る方法を考えております。cgiは「WebHandlerPro」(http://www.tryhp.net/webhandler.htm)の物を使用させていただいております。
ソースは
[page1]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initital-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobil … />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></sc …
<script type="text/javascript" charset="utf-8">
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = false;
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobil …
</head>

css省略

<body>
<div data-role="page" id="page1" data-add-back-btn="true" data-back-btn-text="戻る" data-title="page1">
<div data-role="header" data-position="fixed">
<a href="#home" data-icon="home" data-iconpos ="notext" class="ui-btn-right"></a>
<h1>page1</h1>
<h3>アンケート</h3>
</div> <!-- header -->
<div data-role="content">
<h3>以下の設問に～</3>
<h4>～～</h4>
<p>以下の設問項目の～</p>
<form method="post" action="～.cgi" name="myform">
<div data-role="fieldcontain" class="radio">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>aaa</legend>
<input type="radio" name="s1" value="1" id="s1-1">
<label for="s1-1">1</label>
<input type="radio" name="s1" value="2" id="s1-2">
<label for="s1-2">2</label>
<input type="radio" name="s1" value="3" id="s1-3" checked="checked">
<label for="s1-3">3</label>
<input type="radio" name="s1" value="4" id="s1-4">
<label for="s1-4">4</label>
<input type="radio" name="s1" value="5" id="s1-5">
<label for="s1-5">5</label>
</fieldset>
</div>　<!-- radio -->

<div data-role="fieldcontain" data-theme="b">
<label for="impression">aaa</label>
<select name="impression" id="impression" data-native-menu="false" multiple data-theme="b" data-mini="true" data-inline="true">
<option value="1" selected>b</option>
<option value="2">c</option>
<option value="3">d</option>
　　<option value="4">e</option>
<option value="5">f</option>
</select>
</div> <!-- select -->

<div data-role="footer" class="ui-bar" data-position="fixed">
<input type="submit" value="送信"data-icon="arrow-r" data-inline="true" data-iconpos="right">
</div>
</form>
</div> <!-- menu -->
</body>
</html>

こんな感じのhtmlが何枚もあるようなアンケートです。
jQQuerymobileを使用しないでhtml、cssだけでつくったアンケートはうまく行くので,jQuelymobileでformを使う際におかしな点がありましたらご指摘頂きたいです。
まだ,かなり初心者なのでよくわかっていないところがありますがどなたか詳しい方よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

フォームの送信処理をどうやっているのかわからないのですが……、ひょっとして、通常のフォームと同様に、単に指定のCGIにSubmitで送信しているだけでしょうか。



jQuery Mobileは、実際にコードを書いてみればわかるように、複数のページを１つのHTMLで管理します。つまり、一度読み込んだら、ページ移動などを行わず、JavaScriptの処理でページ切り替えなどをすべて行うように設計されているわけですね。ですからフォームの送信も、そのままSubmitで送信してはいけません（まぁ、Ajaxを切って送信することはできますが、それではjQuery Mobileのよさを失うことになります）。

どうするかというと、Ajaxを使ってフォームを非同期通信でCGIに送り、その結果を受け取ってJavaScriptを使って結果表示などをすべて行うのです。jQuery Mobileは、jQueryのプラグインとして機能しますので、このへんの処理はjQueryのAjax機能をそのまま使って行えます。jQueryの機能について少し調べてみるとよいでしょう。

参考アドレス
http://libro.tuyano.com/index3?id=72001
    • good
    • 0
    • 件
通報する
この回答へのお礼

jQueryとjavascriptの勉強をもう少ししてみようと思います。
迅速な回答ありがとうございました。

通報する
お礼日時：2012/11/24 15:15

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報