JavaScript初心者です。
PHPとXHTMLでHPを作成中ですが、タイトルにあるようにHPの一部のみ更新することが可能でしょうか?
JavaScriptで不可能な場合はどの言語で出来ますか?
やりたいことはセレクトで選択したらobjectで表示中のページのみ変更する事です。
分からないなりに作ってみたサンプルの結果がこれです。
index.php
------------------------
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>サンプル</title>
</head>
<body>
<div>
<div>
<form action="aaa.php" method="post">
<select name="category" id="category" onchange="submit();">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
・
・
・
<option value="25">Z</option>
</select>
</form>
<object data='test.php?category='<?=$_POST['category']?> height="50" width="200" ></object>
</div>
ここに別要素の表示<br />
出来れば更新したくない。
<div>
</div>
</body>
</html>
------------------------
test.php
------------------------
<html>
<body>
<?php
if($_POST['category']==0){
$a='AAA';
}elseif($_POST['category']==1){
$a='BBB';
}elseif($_POST['category']==2){
$a='CCC';
}elseif($_POST['category']==3){
$a='ddd';
}elseif($_POST['category']==25){
$a='ZZZ';
}
print $a.'が選択されました。';
?>
</body>
</html>
------------------------
これだとtest.phpにパラメータが送れませんし、セレクトで選択しても更新がかかって初期のAに戻ってしまいます。
かといって<form action="test.php" method="post">にするとtest.phpへ飛んでしまいます。
出来れば詳しいサンプルコードを教えていただけるとありがたいです。
No.2ベストアンサー
- 回答日時:
全部phpで処理しているなら、
別要素を表示するphpをaaa.phpとして、test.phpと同じく下のように作っておいて
<aaa.php>
------------------------
<html>
<body>
<?php
if($_GET['category']==0){
$a='aaa';
}elseif($_GET['category']==1){
$a='bbb';
}elseif($_GET['category']==2){
$a='CCC';
}elseif($_GET['category']==3){
$a='ddd';
}elseif($_GET['category']==25){
$a='ZZZ';
}
print(file_get_contents($a . ".htm"));
?>
</body>
</html>
------------------------
これを呼び出す別の<object>をindex.phpで出力すればよい
<index.php>
------------------------
<body>
<div>
<div>
<?php
$selected["category"][$_POST["category"]]=" selected";
print <<<eof1
<form method="post" action="{$_SERVER["PHP_SELF"]}">
<select name="category" id="category" onchange="this.form.submit();">
<option value="0"{$selected["category"]["0"]}>A</option>
<option value="1"{$selected["category"]["1"]}>B</option>
<option value="2"{$selected["category"]["2"]}>C</option>
<option value="3"{$selected["category"]["3"]}>D</option>
</select>
</form>
<object data="test.php?category={$_POST['category']}" height="50" width="200" ></object>
eof1;
?>
</div>
ここに別要素の表示<br />
<?php
print <<<eof2
<object data="aaa.php?category={$_POST['category']}" height="480" width="600" ></object>
eof2;
?>
</div>
</body>
------------------------
test.php
------------------------
<html>
<body>
<?php
if($_POST['category']==0){
$a='AAA';
}elseif($_POST['category']==1){
$a='BBB';
}elseif($_POST['category']==2){
$a='CCC';
}elseif($_POST['category']==3){
$a='ddd';
}elseif($_POST['category']==25){
$a='ZZZ';
}
print $a.'が選択されました。';
?>
</body>
</html>
------------------------
yyr446さん回答ありがとうございます。
質問した私が間違っていました。
<form action="aaa.php" method="post">とありますが「aaa.php」ではなく「index.php」の間違いでした。
aaa.phpで作っていてindex.phpに修正して掲載するはずがそのまま掲載してしまいました。
おバカなことしてすみませんm(_ _)m
ですが、yyr446さんの回答をヒントにaaa.phpのワンクッションを入れずにtest.phpを直接表示させることが出来ました。
ありがとうございました。
No.3
- 回答日時:
インラインフレームはダメですか?
(一部端折り&改造)
index.php
<form action="aaa.php" target="betsu" method="post">
<select name="category" id="category" onchange="submit();">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
</form>
<iframe src="about:blank" name="betsu"></iframe>
-------------
aaa.php
<html>
<body>
<?php
var $pages=['AAA','BBB','CCC'];
var $page=$pages[$_POST['category']]||'blank';
print $page.'が選択されました。';
?>
</body>
</html>
この回答への補足
回答ありがとうございます。
XHTMLの厳密形を使用すると「インラインフレームは非推奨となるのでオブジェクトで代用」という記事を見たのでインラインフレームを使用していません。
この方法はオブジェクトでは出来ないのですか?
と言ってもXHTMLの厳密形である理由は「どうせ勉強するなら今後主流になる?という記事を見たので厳密形をやろう」と言うくらいなので、特にこだわりはありません。
いまさらながらXHTMLの厳密形は良くないのでしょうか?
No.1
- 回答日時:
そういうのはajaxでやるのが妥当でしょう。
また、>セレクトで選択しても更新がかかって初期のAに戻ってしまいます。
だけが問題なら、戻らないずパラメータを引き継ぐように
<?
$selected["category"][$_POST["category"]]=" selected";
print <<<eof
<form method="post">
<select name="category" id="category" onchange="this.form.submit();">
<option value="0"{$selected["category"]["0"]}>A</option>
<option value="1"{$selected["category"]["1"]}>B</option>
<option value="2"{$selected["category"]["2"]}>C</option>
<option value="3"{$selected["category"]["3"]}>D</option>
</select>
</form>
eof;
?>
のような書き方でもよいと思います
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/12】 急に朝起こしてきた母親に言われた一言とは?
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・好きな「お肉」は?
- ・あなたは何にトキメキますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
VBScriptでHTMLのセレクトボッ...
-
プルダウン選択を変更すると、...
-
selectを変更不可にしたい
-
プルダウンの値によって活性・...
-
スマホのフォームでのselect複...
-
select要素のvalueを配列で取得...
-
<select> をmultiple にしてい...
-
C#(csファイル)とjavascriptと...
-
動的なセレクトボックスの生成...
-
検索窓とプルダウンメニュー機...
-
プルダウンメニューに連動する...
-
連動プルダウンのclonenode
-
JavaScriptの演算について
-
Selectボックスの要素入力を省...
-
return falseが効かない
-
javascriptでセレクトボックス...
-
<input>の選択肢をプルダウンメ...
-
javascriptで合計金額を算出し...
-
Selectボックスの一覧表示方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
<input>の選択肢をプルダウンメ...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
JavaScriptで<select>の<option...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
複数のプルダウンを1つにまとめ...
-
VBScriptでHTMLのセレクトボッ...
-
<select> をmultiple にしてい...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
webページの一部のみの更新につ...
-
javascript:データを日本語で...
-
スマホのフォームでのselect複...
-
ラジオボタンの選択に応じてプ...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
おすすめ情報