※ ChatGPTを利用し、要約された質問です（原文：JavaScriptの入力制御がうまく働きません。）
JavaScriptでフォームの入力制御がうまく働かない
このQ&Aのポイント
JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたが、一部の入力項目で正常に表示されない問題が発生
PHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、JavaScriptをOFFにすると正常に表示されることから、JavaScriptのtxt.value="";の部分に問題があると思われる
JavaScriptとPHPの双方に詳しい方に問題の原因と解決策を教えてほしい
JavaScriptの入力制御がうまく働きません。
JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたのですが、下の例の「フード」で「その他」以外を選択するとまったく何も表示されません。ちなみにPHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、またJavaScriptをOFFにすると正常に表示されることから、PHPのコードではなく、JavaScriptのtxt.value="";
の部分に問題があると思われます。ですが、いろいろ調べましたが手詰まりになりました。
PHPとJavaScriptの双方にお詳しい方、どうかご教授くださいますようお願いいたします。
以下、問題のコードです。長くて申し訳ありませんm(_ _)m
<script type="text/javascript">
function zzz(list,txt){
if (list.value == "その他"){
txt.disabled=false;
}else{
txt.value="";
txt.disabled=true;
}
}
</script>
<?php
if(!isset($_POST['pet'])){
?>
<body onload="zzz(document.getElementById('pet'),document.getElementById('petOther')),zzz(document.getElementById('food'),document.getElementById('foodOther'))">
<form method="post" action="test.php">
ペット：
<select name="pet" id="pet" onchange="zzz(this,document.getElementById('petOther'))">
<option value="" selected="selected">↓</option>
<option value="犬">犬</option>
<option value="猫">猫</option>
<option value="その他">その他</option>
</select>
（⇒<input type="text" name="petOther" value="" size="20" id="petOther" />）
<br />
フード：
<select name="food" id="food" onchange="zzz(this,document.getElementById('foodOther'))">
<option value="" selected="selected">↓</option>
<option value="缶詰">缶詰</option>
<option value="ドライフード">ドライフード</option>
<option value="その他">その他</option>
</select>
（⇒<input type="text" name="foodOther" value="" size="20" id="foodOther" />）
<button class="submit" type="submit"><span class="submitBTN">送信内容確認画面へ進む</span></button>
</form>
<?php
}else{
print "<body>\n";
foreach($_POST as $key => $val){
if($key == "pet"){
if($val != "その他"){
$pet = $val;
}
}
if($key == "petOther"){
if(!empty($val)){
$pet = $val;
}
}
if($key == "food"){
if($val != "その他"){
$food = $val;
}
}
if($key == "foodOther"){
if(!empty($val)){
$food = $val;
}
print $pet."に".$food."を与える";
}
}
}
?>
</body>
</html>
お礼
素早いご返答ありがとうございます。 おっしゃる通り、printを最後に持ってくるとちゃんと表示されました！ JavaScriptをoffにすることで正常に表示されていたので、てっきりJavaScriptに問題があるのかとばかり思っていました。お恥ずかしい限りです。 実際のコードではforeachで回している配列の要素が全部で数十個あるのですが、全部を一度にループさせるのではなく、その中の「まとめたいグループ」ごとにforeachをかければ良いということですね？ 今から早速作業に取りかかってみます。本当にありがとうございました！