(多分)JavaScriptで分からない所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。
【やりたいこと】
1. ボタンをクリックするとボタンにチェック(とりあえず色)をつけた上で、ページの再読み込みをしたいです。
2. ページの再読み込み後、ページの再読み込み前の状態に復旧したい(ページの再読み込み前にチェックしていたボタンの状態を保持しておきたい)です。
【状況】
1はできております。
ただし、1のページの再読み込み後、今までチェックしていたボタンが未チェック状態に戻ってしまいます。
【ソースコード】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>title</title>
<script type="text/javascript">
<!--
var f=new Array(5);
f[0]=0;
f[1]=0;
f[2]=0;
f[3]=0;
f[4]=0;
f[5]=0;
function jump(b){
if (f[b]==0){
document.getElementById("form_check").elements[b].style.background='#dbed00';
document.getElementById("form_check").elements[b].style.color='#323232';
f[b]=1;
} else {
document.getElementById("form_check").elements[b].style.background='#d6d6d6';
document.getElementById("form_check").elements[b].style.color='#666666';
f[b]=0;
}
var text = "";
if (f[0] == 1) {
text += document.getElementById("form_check").a.value;
}
if (f[1] == 1) {
text += document.getElementById("form_check").b.value;
}
if (f[2] == 1) {
text += document.getElementById("form_check").c.value;
}
if (f[3] == 1) {
text += document.getElementById("form_check").d.value;
}
if (f[4] == 1) {
text += document.getElementById("form_check").e.value;
}
if (f[5] == 1) {
text += document.getElementById("form_check").f.value;
}
if (text) {
alert("チェックされているのは" + text + "です。\n「OK」で再読み込み実施。");
} else {
alert("何もチェックされていません。\n「OK」で再読み込み実施。");
}
}
-->
</script>
</head>
<body>
<form id="form_check" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<p><input type="submit" value="a" name="a" onclick="jump(0)" onkeypress="jump(0)" /></p>
<p><input type="submit" value="b" name="b" onclick="jump(1)" onkeypress="jump(1)" /></p>
<p><input type="submit" value="c" name="c" onclick="jump(2)" onkeypress="jump(2)" /></p>
<p><input type="submit" value="d" name="d" onclick="jump(3)" onkeypress="jump(3)" /></p>
<p><input type="submit" value="e" name="e" onclick="jump(4)" onkeypress="jump(4)" /></p>
<p><input type="submit" value="f" name="f" onclick="jump(5)" onkeypress="jump(5)" /></p>
</form>
</body>
</html>
どこかご教示いただけるようでしたら、ご教示いただければと思います。
以上、よろしくお願いします。
No.7ベストアンサー
- 回答日時:
pick52さん、ご指摘ありがとうございます。
ぼけてました。仕様もちょっと勘違いしてたので、こんな感じでどうでしょ?
//hoge.php
<?
session_start();
$req_s=$_REQUEST["s"];
$ses_s=&$_SESSION["s"];
if(is_array($ses_s)) $key=array_search($req_s,$ses_s);
if (is_numeric($key)){
unset($ses_s[$key]);
}else{
$ses_s=array_merge($ses_s,$req_s);
}
if(is_array($ses_s)){
foreach($ses_s as $val){
$class[$val]="class='color0'";
}
}
//print_r($ses_s);//セッションの内容を確認
print <<<eof
<html>
<head>
<title>title</title>
<script type="text/javascript" src="hoge.js"></script>
<link rel="stylesheet" type="text/css" href="hoge.css" />
</head>
<body>
<form id="form_check" method="post" action="{$_SERVER['PHP_SELF']}">
<p><input type="submit" value="a" name="s" onClick="return jump(this);"{$class["a"]} /></p>
<p><input type="submit" value="b" name="s" onClick="return jump(this);"{$class["b"]} /></p>
<p><input type="submit" value="c" name="s" onClick="return jump(this);"{$class["c"]} /></p>
<p><input type="submit" value="d" name="s" onClick="return jump(this);"{$class["d"]} /></p>
<p><input type="submit" value="e" name="s" onClick="return jump(this);"{$class["e"]} /></p>
<p><input type="submit" value="f" name="s" onClick="return jump(this);"{$class["f"]} /></p>
</form>
</body>
</html>
eof;
?>
//hoge.css
.color0{
background-Color:#dbed00;
color:#323232;
}
p{
margin:0px;
padding:0px;
}
//hoge.js
function jump(obj){
var f=obj.form;
var c=obj.className;
obj.className=c=="color0"?"":"color0";
var text="";
for(var i=0;i<f.length;i++){
if(f[i].type=="submit" && f[i].name==obj.name && f[i].className=="color0"){
text+=(text==""?"":",")+f[i].value;
}
}
if (text) {
var flg=confirm("チェックされているのは" + text + "です。\n再読み込みしますか?");
} else {
alert("何もチェックされていません。");
var flg= false;
}
if(flg) return true;
obj.className=c;
return false;
}
この回答への補足
いつもお世話になっております。
「この回答へのお礼」欄に記載させていただいた内容ですが、「この回答へのお礼」の手順の場合のみ $_REQUEST["s"] の中にひとつ前にクリックした値が入るのが原因みたいです(普通はクリックした値が入っていました)。
その為、hoge.jsの
alert("何もチェックされていません。");
の下に下記を追記した所、その部分に関しては動作するようになりました(単にセッションを破棄していてhoge.phpのif(is_array($ses_s)){(略)}の中に入らないようにしただけですが・・・)。
<?php
$_SESSION = array();
?>
もっとも変わりにメッセージが表示されなくなってしまいました・・・。
以上、よろしくお願いします。
ありがとうございます。
こちらでもセッションを使用し、値を保持しようとしたのですが、うまくいかず手詰まりとなっておりました。
一通り動作確認確認した所、下記の一点のみ仕様と異なりました。
【手順1】
1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。
2. aをクリックし、再読み込み・・・aにチェックが付いています(○)。
3. 再度aをクリックし、再読み込み・・・aにチェックが付いています(×)。
※ページの再読み込み前の状態に復旧したい為、3の場合は、どこにもチェックが付いてほしくないです(なおその際のメッセージは「何もチェックされていません。」と表示されるので、この部分は正常な動作となります)。
こちらでもソースを読みし、どの部分で問題が発生しているか特定してみようと思います。
以上、よろしくお願いします。
No.6
- 回答日時:
yambejpさんの方法ってなんかサーバ側で特殊な設定しないとPHPとして
動作しないんじゃ...。
(しかもApacheなどの特定のサーバしか対応していないんじゃないで
しょうか)
ちょっと興味があったので調べてみるとまず通常、PHPスクリプトの
拡張子はphpですしPHPコードは <?php ~ ?> としないといけませんよね。
変数を出力するには echo() を使わないとHTML上に表示されませんし。
で、その若干の修正を区祝えてテストしてみましたが、チェックは
一つだけしか保持しないようです。
まあ、そこはJavaScriptの修正で対応できるのかもしれませんが
これ以上のことはよく分かりません。
この回答への補足
下記の回答で誤りがあったみたいなので、訂正いたします。
×1回目の再読み込みのみに対応している
○クリックしたボタンのみ再読み込み後に引き継いでいるようです。
その為、以前クリックした値は引き継がれないようです。
ソースを追った所、下記の2点にその原因があるような感じです。
・s.valueにクリックした値しか入っていないようです。
・textにクリックした値しか入っていないようです。
以上、よろしくお願いします。
ありがとうございます。
まさにご指摘のとおりでした。
使用しているサーバはApacheなのでサーバの設定を変更(拡張子htmでphpが動作するように変更、短縮型の記述の有効化)した所、動作するようになりました。
そして動作結果も私が試した結果と同じような感じです
(ただ、1回目の再読み込みのみに対応しているのか、1つだけしか保持できないのかはまだソースを追っていないため、未検証です)。
ご確認いただきありがとうございます。
以上、よろしくお願いします。
No.5
- 回答日時:
あれぇ・・・おかしいなコピペミスかな・・
通常IE6/Firefox3でしかチェックしてないんですが
あらためてOpera9/Netscape7.1でも確認しましたが動作していますね。
単純にコピペするだけなんですけどねぇ・・・
ありがとうございます。
どうもこちらの環境でphpの短縮型の記述が無効化されているのが原因だったみたいです。
actionのphp部分は修正したのですが、valueのphp部分を修正していなかったためそのような動作になったようです。
サーバの設定を変更し、phpの短縮型を有効にした上で、コピペした所、先ほどとは違う動作になりました。
しかし、意図していた動作とは違っているような感じでした。
以下がその結果となります。
どうも1回目の再読み込みのみ対応しているような気がしました
(私のソースでは1回目の再読み込み自体に対応していません)。
その為、2回目以降は正常に動作しないような感じです。
【手順1】
1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。
2. aをクリックし、再読み込み・・・aにチェックが付いています(○)。
3. bをクリックし、再読み込み・・・bにチェックが付いています(×)。
※ページの再読み込み前の状態に復旧したい為、3の場合は、a,bにチェックが付いてほしいです。
【手順2】
1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。
2. aをクリックし、再読み込み・・・aにチェックが付いています(○)。
3. 再度aをクリックし、再読み込み・・・aにチェックが付いています(×)。
※ページの再読み込み前の状態に復旧したい為、3の場合は、どこにもチェックが付いてほしくないです。
ご教示いただいたソースが動く環境が整いましたので、こちらでも検証してまいりたいと思います。
以上、よろしくお願いします。
No.4
- 回答日時:
cookieは面倒なので、php+javascriptでこんなかんじでどうでしょう?
//hoge.htm
<html>
<head>
<title>title</title>
<script type="text/javascript" src="hoge.js"></script>
<link rel="stylesheet" type="text/css" href="hoge.css" />
</head>
<body>
<input type="hidden" id="s" value="<?=$_REQUEST['s'];?>">
<form id="form_check" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
<p><input type="submit" value="a" name="s" onClick="return jump(this);" /></p>
<p><input type="submit" value="b" name="s" onClick="return jump(this);" /></p>
<p><input type="submit" value="c" name="s" onClick="return jump(this);" /></p>
<p><input type="submit" value="d" name="s" onClick="return jump(this);" /></p>
<p><input type="submit" value="e" name="s" onClick="return jump(this);" /></p>
<p><input type="submit" value="f" name="s" onClick="return jump(this);" /></p>
</form>
</body>
</html>
//hoge.css
.color0{
background-Color:#dbed00;
color:#323232;
}
p{
margin:0px;
padding:0px;
}
//hoge.js
window.onload=function(){
var s=document.getElementById("s");
var f=document.getElementById("form_check");
if(s.value=="" || f.elements[s.value]) return false;
for(var i=0;i<f.length;i++){
if(f[i].name=="s" && f[i].value==s.value){
f[i].className="color0";
break;
}
}
}
function jump(obj){
var f=obj.form;
obj.className="color0";
var text=obj.value;
if (text) {
var flg=confirm("チェックされているのは" + text + "です。\n再読み込みしますか?");
} else {
alert("何もチェックされていません。");
var flg= false;
}
if(!flg) return false;
return true;
}
ありがとうございます。
記載されているソースを試してみた所、下記の動作となりました(私が質問欄で記載させていただいたソースと見た目の動作は同じように見受けられました)。
もしかしたら私のコピペミスや、開発環境の違いかもしれませんが・・・。
【IE7、Firefox2】
1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。
2. aをクリックし、再読み込み・・・どこにもチェックは付いておりません(×)。
【私が質問欄で記載させていただいたソースのIE7の動作】
1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。
2. aをクリックし、再読み込み・・・どこにもチェックは付いておりません(×)。
まだご教示いただいたソースを読み込んでいない為、ソースを確認しながら対応していきたいと思います。
以上、よろしくお願いします。
No.3
- 回答日時:
>ページの再読み込みをしたいです。
って、リロードってことでしょうか? 同じ内容をリロードする意味がよくわかりません。
通常は、次の処理(入力内容の確認画面とか)に移動するのが普通だと思うのですが?
その場合はフォームの内容がサーバに送信されるので、サーバ側のスクリプトでその内容に応じて処理をすることになると思います。ただし、質問文の内容だと、変数の状態はフォームの中にないので送信されませんね。hiddenのフォームに変数の内容をいれて送るとかすればできますが、サーバサイドの処理を実行できる環境でしょうか?
クライアント側での処理を基本にするのなら、#2様の回答のように変数をクッキーに保存しておいて受け渡すのが一番簡単でしょう。
ありがとうございます。
ページの再読み込みはリロードとなります。
考えている動作としては、ボタンをクリックすると「ある処理」を行い、再度そのページに戻ってくる事をイメージしております。
なお今回のソースでは「ある処理」の部分は省かせていただき、あくまで実行後再度そのページに戻ってくる部分のみ抽出させていただきました。
なので、例としてあげていただいた入力内容の確認画面(多分メールフォームの確認画面などを指しているものと思われますが)とは異なるのかなと思います(確かに通常は入力画面→確認画面というように遷移するものと思われます)。
それとサーバサイドの処理は可能です。
現在私の管理しているサーバで検証を行っておりますので、php.iniやhttpd.confなどの設定変更なども可能な環境となっております。
その為、必ずしもクライアント側での処理にはこだわっておりません(サーバ側、クライアント側どちらでも大丈夫です)。
以上、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitした値を返したい
-
複数のフォームを一括で自動送...
-
タブキーでなくエンターキーで...
-
enterキーでのtab移動
-
別ウィンドウへのsubmitの挙動...
-
指定したタグを書き換えるには?
-
フォームのvalueに配列を格納す...
-
フォームが空欄の時にフォーム...
-
POST時に要素を削除してからPOST
-
クライアントマシンからルータ...
-
javascript による POST 送信時...
-
関数を順番に呼び出したい
-
ページを再読み込み後、再読み...
-
リンク先アドレスの一部にテキ...
-
チェックボックスのON/OFFでVal...
-
正規表現で複数マッチ条件で悩...
-
onchangeイベントを強制的に発...
-
プルダウン 項目が多いので先頭...
-
TextBoxに半角数字以外を入れた...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1つのページにformを2つ設置。2...
-
複数のフォームを一括で自動送...
-
Cookieに保存されない
-
別ウィンドウへのsubmitの挙動...
-
submitした値を返したい
-
formのsubmitイベントの発生に...
-
javascriptでASPにデータを渡す
-
フォームが空欄の時にフォーム...
-
focus()が上手くいかない
-
iframe内のformをサブミットす...
-
POST時に要素を削除してからPOST
-
FormのonsubmitでJavaスクリプ...
-
1つのform内に2つのsubmitボタ...
-
JavascriptからSubmitして画面...
-
submitボタン押下後、disabled...
-
添付ファイルの未選択チェック方法
-
enterキーでのtab移動
-
ファイル選択と同時にアップロ...
-
別窓ウィンドウから親ウィンド...
-
Javascript IEで「識別子があり...
おすすめ情報