jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: 想做一個簡單的網頁問卷 [打印本頁]

作者: playman 時間: 2009-6-26 16:34 標題: 想做一個簡單的網頁問卷

我參考了一些Javascript的教學與範例
自己打算做一個簡單的網頁問卷
用radiogroup, 當點錯時, alert出答錯
當全部都答對時, 顯示出的submit按鈕才能按下
程式如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>無標題文件</title>
</head>

<body>
<script type="text/JavaScript">
function exam(a)
{
        if(a != '1_1')
        {
                window.alert('第1題答錯了!');
        }
}

function exam2(b)
{
        if(b != '2_3')
        {
                window.alert('第2題答錯了!');
        }
}

function show_div()
{
        var a = document.getElementById('RadioGroup1');
        var b = document.getElementById('RadioGroup2');
        var c = document.getElementById("submit2");
        if((a.value == '1_1') && (b.value == '2_3'))
        {
                c.disabled="";
        }
}

</script>
<form id="form1" name="form1" method="post" action="">
<input type="radio" name="RadioGroup1" id="RadioGroup1" value="11" onclick="exam('1_1');show_div();"/>1
<input type="radio" name="RadioGroup1" id="RadioGroup1" value="22" onclick="exam('1_2');show_div();"/>2
<input type="radio" name="RadioGroup1" id="RadioGroup1" value="33" onclick="exam('1_3');show_div();"/>3
<input type="radio" name="RadioGroup1" id="RadioGroup1" value="44" onclick="exam('1_4');show_div();"/>4




<input type="radio" name="RadioGroup2" id="RadioGroup2" value="AA" onClick="exam2('2_1');show_div();"/>AA
<input type="radio" name="RadioGroup2" id="RadioGroup2" value="BB" onClick="exam2('2_2');show_div();"/>BB
<input type="radio" name="RadioGroup2" id="RadioGroup2" value="CC" onClick="exam2('2_3');show_div();"/>CC
<input type="radio" name="RadioGroup2" id="RadioGroup2" value="DD" onClick="exam2('2_4');show_div();"/>DD
<div name="div1" id="div1"><input type="submit" name="submit2" id="submit2" value="送出" disabled="disabled"></div>
</form>
</body>
</html>

出現alert是ok了
不過當全部答對後, submit仍然是disabled, 不知道為什麼?
煩請版大們賜教

作者: wmh 時間: 2009-6-26 18:49

你的 html 這樣寫有點問題喔，id 不允許有重複的值，所以 show_div() 的那一段寫法也無效。

作者: playman 時間: 2009-6-26 20:12

您是說 id="RadioGroup1" 和 id="RadioGroup2" 嗎?

如果不用這樣的寫法, 請問是用 document.getElementByName('RadioGroup1');
來接值嗎?

不好意思, 我新手

作者: wmh 時間: 2009-6-26 23:02

嗯，是的，如果你不需針對單獨的一個個選項去控制的話，只要給 name 這個屬性即可：

<input type="radio" name="RadioGroup1" value="11" onclick="exam('1_1');show_div();"/>1
<input type="radio" name="RadioGroup1" value="22" onclick="exam('1_2');show_div();"/>2
<input type="radio" name="RadioGroup1" value="33" onclick="exam('1_3');show_div();"/>3
<input type="radio" name="RadioGroup1" value="44" onclick="exam('1_4');show_div();"/>4

取值的話則需用 loop 檢視每個選項的 checked 狀態：

  var radioGroup1 = document.forms['form1'].elements['RadioGroup1'];
  var radioGroup1Value = null;
  for (var ii = 0; ii < radioGroup1.length; ii++) {
    if (radioGroup1[ii].checked) {
      radioGroup1Value = radioGroup1[ii].value;
    }
  }
  alert(radioGroup1Value);

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)