人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLで表示しているcheckboxのチェック状態を、保存ボタンを押すと保存できるようにしたいと考えています。
この際、画面推移することなく、保存後はそのチェック状態を保って、次の作業を行うことができるようにするには、Ajaxを使う必要があるということが分かり、コードの書き方の勉強を始めていますが、頭がすっきり整理されてない状態です。

以下のcheckboxのチェック状態をAjaxで保存する場合、どういったコードを書く必要があるのでしょうか?
今後の勉強の礎にさせて頂きたいと思いますので、よろしくお願いしますm(_ _)m
(PHPやJavaScriptの知識は初心者程度です)

*HTML
<input id="time_1" name="time[]" type="checkbox" value="morning">朝
<input id="time_2" name="time[]" type="checkbox" value="noon">昼
<input id="time_3" name="time[]" type="checkbox" value="evening">夜

●質問者: toshistyle
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● tdoi
ベストアンサー

こういうこと?

この前の回答の最初の方をちょっといじっただけですが。


<?php
if (isset($_GET['record'])) {
 $times = $_GET['time'];
 setcookie('times', serialize($times), time() + 30 * 60);
 exit;
}

$time = array();
if (isset($_COOKIE['times'])) {
 $times = unserialize($_COOKIE['times']);
}
?>
<html>
 <head>
 <script type="text/javascript" src="./jquery.js"></script>
 <script language="JavaScript">
<!--
function recordTime()
{
 var checkList = new Array(document.getElementById('morning'),
 document.getElementById('noon'),
 document.getElementById('evening'));
 var times = new Array();
 for (i = 0; i < checkList.length; ++i) {
 if (checkList[i].checked) {
 times.push(checkList[i].value);
 }
 }
 $.get("./index.php", { "time[]": times, "record": 1 });
}
-->
 </script>
 </head>
 <body>

 <form action="#">
 <div id ="time">
 <input name="time[]" type="checkbox" value="morning" id="morning" <?php if (in_array('morning', $times)) {?>checked="CHECKED"<?php } ?> >
 <label for="morning">朝</label>
 <input name="time[]" type="checkbox" value="noon" id="noon" <?php if (in_array('noon', $times)) {?>checked="CHECKED"<?php } ?> >
 <label for="noon">昼</label>
 <input name="time[]" type="checkbox" value="evening" id="evening" <?php if (in_array('evening', $times)) {?>checked="CHECKED"<?php } ?> >
 <label for="evening" >夜</label>
 </div>

 <input type="submit" value="保存" onClick="recordTime(); return false;" />

 </form> 
 </body>
</html>

仕組みとしては、前回の指定のままCookieを使っています。

このPHPスクリプトは、普通にブラウザで表示した際には、最初の5行は実行されません。そして、すでにCookieに登録されているものがあれば、それにチェックを入れたHTMLを表示するようになっています。

チェックを変更して保存ボタンを押した際に、JavaScriptの処理が起動して、recordTime()という関数が実行されます。この中では、現在のチェック状態を取得して、同じスクリプトにjQueryというライブラリを使って送信しています。この送信はバックグラウンドで行われるので画面は切り替わりません。

先頭5行はこの送信に対する処理で、受け取った情報をCookieに書き込んでいます。

例えばですが、この画面をどこかのサーバに置いて、適当にチェックを入れて保存ボタンを押した後、チェックを変更した後リロードすると、保存ボタンを押したときの状態に戻ることが分かると思います。


あまり詳しくないとのことなので、PHP、JavaScriptという言語そのものだけでなく、PHPはサーバサイドで動作し、JavaScriptはクライアントサイドで動作することや、それらの兼ね合い。あるいは、jQueryなどのライブラリの利用など知るべきことはたくさんあると思いますが、がんばってください。

何かの参考になれば。


追記 (10/18 1:42):

パスの指定の問題です。

僕の場合はテスト環境では、index.phpとjquery.jsは同じディレクトリに置いてあったので、./query.jsという指定になっています。index.phpと同じディレクトリにあるjsというディレクトリの中にjquery.jsがあるのであれば、./js/jquery.jsと指定する必要があります。

他にもたくさんあると思いますが、この辺りでも読んでみてはどうでしょう?

http://www.shoshinsha.com/hp/1hour/know/pass.html

◎質問者からの返答

早速の回答ありがとうございますm(_ _)m

大変分かりやすい説明で、だいぶん頭が整理されました。

引き続き勉強がんばろうと思います。

ありがとうございました。


追記(10/18 1:39):

不足していたことを勉強し、ほぼ理解することができましたが、

一点質問があります。

<script type="text/javascript" src="./jquery.js"></script>の./jquery.jsは、

index.phpにjquery.jsを組み込んでいるということなのでしょうか?

Dreamweaverを使い、jsフォルダにjquery.jsがあるのですが、

js/jquery.jsとするとうまくいきません。

きっと./jquery.jsの部分を正しく理解していないのだと思います。

簡単なことかもしれませんが、よろしくお願いしますm(_ _)m


追記(10/19 11:30):

早速のご回答ありがとうございますm(_ _)m

教えて頂いたコードを参考に、いろいろ試しているのですが、

「適当にチェックを入れて保存ボタンを押した後、チェックを変更した後リロードすると、保存ボタンを押したときの状態に戻る」

ことがどうしてもうまくいきません。

src="./jquery.js" や form action="#" の部分で何か誤解していることがあるのではないかと考えましたが、この部分では特に問題ないことが分かりました。

クッキーの制限もしておらず、どこに問題があるのか探しているのですが、なかなか解決できずにいます。

原因として考えられることがあれば、教えて頂くと助かります。

重ね重ね申し訳ありません。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ