【ツリーメニューの保持】

質問

【ツリーメニューの保持】

１．フォーム内の「タイプ」のラジオボタンをどれか1つ選択すると該当のツリーメニューが表示される
2．・必要項目を入力し、form送信、POSTで受け取る。
3.・form送信後も表示されていたツリーメニューを保持

ということを実装したいと思っています。
javascriptは初心者で、ネットで調べてつくりました。

「ラジオボタン選択でツリー表示」はできましたが
「form送信後も表示されていたツリーメニューを保持」部分が実装できません。

一人ではどうしても解決できず、どなたかご教授いただけませんでしょうか？
よろしくお願い致します。

------------------------------------------------------------------------------

【php】

if($_REQUEST["mode"] == "regist") {
var_dump($_REQUEST);
}

【javascript】

//送信後もツリーメニュー保持
function check() {
if (document.fm.type[0].checked == true) {
document.getElementById('A').style.display = "block";
} else if(document.fm.type[1].checked == true) {
document.getElementById('B').style.display = "block";
}
}

//ラジオボタン選択でツリーメニュー表示
function treeMenu(tName) {
radio = document.getElementsByName('type')

if(radio[0].checked) {
document.getElementById('A').style.display = "block";
document.getElementById('B').style.display = "none";
} else if(radio[1].checked) {
document.getElementById('A').style.display = "none";
document.getElementById('B').style.display = "block";
}

【form】

<form action="hogehoge.php" method="post" name="fm">
<input type="hidden" name="mode" value="regist">

<table>
<tr>
<td>タイプ</td>
<td>
<input type="radio" name="type" value="1" onClick="treeMenu('A')">
<input type="radio" name="type" value="2" onClick="treeMenu('B')">
</td>
</tr>
</table>

<div id="A">
<table>
<tr>
<td>住所</td>
<td><input type="text" name="address" value="<?php echo $_REQUEST[address]?>"></td>
</tr>
</table>
</div>

<div id="B">
<table>
<tr>
<td>電話番号</td>
<td><input type="text" name="tel" value="<?php echo $_REQUEST[tel]?>"></td>
</tr>
</table>
</div>

<table>
<tr>
<td>年齢</td>
<td><input type="text" name="age" value="<?php echo $_REQUEST[age]?>"></td>
</tr>
</table>

<input type="submit" value="確認" onclick="check()">
</form>

回答No.1

yambejp · ベストアンサー

こういうのはidで管理すれば楽になります

ちなみにサニタイズしてない$_REQUESTをそのままソースに埋め込むのはNGです。
ちょっと雑ですが、こんな感じのフローでどうでしょうか？

<?PHP

$checked=setchecked();
$text=setText();

function setchecked(){
$checked["type"][$_REQUEST["type"]]=" checked";
return $checked;
}
function setText(){
$text["address"]=htmlspecialchars($_REQUEST["address"]);
$text["tel"]=htmlspecialchars($_REQUEST["tel"]);
$text["age"]=htmlspecialchars($_REQUEST["age"]);
return $text;
}
?>
<script>
window.onload=function(){check();}
function check() {
document.getElementById('A').style.display = document.getElementById('type1').checked?"block":"none";
document.getElementById('B').style.display = document.getElementById('type2').checked?"block":"none";
}
</script>

<form>
<table>
<tr>
<td>タイプ</td>
<td>
<input type="radio" id="type1" name="type" value="1" onclick="check()"<?PHP print $checked["type"][1];?> /><label for="type1">1</label>
<input type="radio" id="type2" name="type" value="2" onclick="check()"<?PHP print $checked["type"][2];?> /><label for="type2">2</label>
</td>
</tr>
</table>
<div id="A">
<table>
<tr>
<td>住所</td>
<td><input type="text" name="address" value="<?PHP print $text["address"]; ?>"></td>
</tr>
</table>
</div>

<div id="B">
<table>
<tr>
<td>電話番号</td>
<td><input type="text" name="tel" value="<?PHP print $text["tel"]; ?>"></td>
</tr>
</table>
</div>

<table>
<tr>
<td>年齢</td>
<td><input type="text" name="age" value="<?PHP print $text["age"]; ?>"></td>
</tr>
</table>
<input type="submit" value="確認">
</form>

お礼

お礼が遅くなり大変申し訳ありません。
yambejp様のおかげでやりたかったことが実装できました。

自分では解決できなかったので、とても助かりました。
今後もっと勉強していきたいと思います。

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