JavaScriptで入力制御＆チェックをしたい

締切済

質問者：daigoda1
質問日時：2013/07/30 15:09
回答数：2件

JavaScriptを使ってフォームの質問1の3を答えたら質問2が入力可能なるようにしたです。

name="q2"の形にすると制御できますが、ｐｈｐでの受け取りが、最後にチェックされた値しか表示されないためname="q2[]"にしたいです。

しかし、name="q2[]"にした時のJS側の記述がわかりません。
name="q2[]"にするとphpの配列でチェックされた値全部を取得できるので、name="q2[]"の形でJSの
修正をしたいのですが、どのように記述すれがいいのでしょうか？

なお、JSで難しい場合は、JSではなくPHPの修正でもかまいません。
結果、入力制御、入力チェックもでき、チェックボックスの値すべてがpostでｐｈｐに送れればいいです。

現状では下記のようにしています。
どうぞよろしくお願いいたします。

<form id="form1" name="form1" method="post" action="kakunin2.php" >

<label for="q1">質問1</label>
<p>今回のイベントはどうでしたか？</p>
<p>
<input type="radio" name="q1" value="よかった" onClick="changeDisabled()" />よかった　　
<input type="radio" name="q1" value="普通" onClick="changeDisabled()" />普通　　
<input type="radio" name="q1" value="おもしろくなかった" onClick="changeDisabled()" />おもしろくなかった
<br /><span id="q1_error" name="q1_error"></span>
</p>
<label for="q2">質問2</label>

<p>質問1で「おもしろくなかった」とお答えの方に質問です。<br />おもしろくなかった理由は何ですか？</p>
<p>
<input type="checkbox" name="q2[]" value="退屈だった" disabled="disabled" />退屈だった　　
<input type="checkbox" name="q2[]" value="時間が長かった" disabled="disabled" />時間が長かった　　
<input type="checkbox" name="q2[]" value="時間が短すぎた" disabled="disabled" />時間が短すぎた　　
<br /><span id="q2_error" name="q2_error"></span>
</p>

<input type="button" name="submit_01" id="submit_01" value="確認" onclick="check()"/>
</form>

----------以下JavaScript----------
var frm = document.form1;

var q1 = "";
var q2 = "";

var error_flag = "";

//質問1のチェック
for(i = 0; i < frm.q1.length; i++){
if(frm.q1[i].checked){
q1 = frm.q1[i].value;
}
}

if(q1 == "") {
document.getElementById("q1_error").innerHTML = "質問1におこたえください";
error_flag = "1";
}else{
document.getElementById("q1_error").innerHTML = "";
}

//質問2のチェック
if(q1 == "おもしろくなかった" ) {
for(j = 0; j < frm.q2.length; j++){
if(frm.q2[j].checked){
q2 = frm.q2[j].value;
}
}

if(q2 == "") {
document.getElementById("q2_error").innerHTML = "質問2におこたえください";
error_flag = "1";
}else{
document.getElementById("q2_error").innerHTML = "";
}
}else{
document.getElementById("q2_error").innerHTML = "";
}
if(error_flag !=""){

alert("入力が正しくありません！");
}else{
document.form1.submit();
}
}
//質問2のチェックボックスを使えるようにするかどうかを設定する
function changeDisabled(){

//フォームのオブジェクトを入れておく
var frm = document.form1;

//質問1で「おもしろくなかった」を選ばれている場合に質問を入力できるようにする
if(frm.q1[2].checked) {
//チェックが入っていた場合の処理
for(i = 0; i < frm.q2.length; i++){
frm.q2[i].disabled = false;
}
}else{
//チェックが入っていなかった場合の処理
for(i = 0; i < frm.q2.length; i++){
frm.q2[i].disabled = true;
}
document.getElementById("q2_error").innerHTML = "";
}

}

----------以下PHP（kakunin2.php）での受け取り----------

$q2 = $_POST["q2[]"];
for($i=0; $i<count($_POST["q2"]); $i++){

$q2[$i] = $_POST["q2"][$i] .",";
echo $q2[$i];
}