Question

我实际上不是程序员，但我正在尝试学习如何使用html和javascript进行调查问卷：

我在表单中有四个选择框。每个选择框的值都是0到10.本调查问卷的主要规则是更改所有四个选择框的值，使其加起来为10.

我想出了以下解决方案：

即时更新的文本框，用于计算所选的总值（使用onChange）;

总值

在提交按钮处验证。

或者，当用户选择超过总值 10的值时，我甚至会立即分配（错误）消息。

我有一些半烤的javascripts，但我对这个主题没有足够的理解来连接点。希望你能帮帮我。

添

我的框架：

<html>
<head>
<script type="text/javascript">
function editTotalValue(){

}

function  validateTotalValue(){

}
</script>

</head>
<body>
<form name="form1">
<select name="question1" onChange="editTotalValue();">
  <option selected value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select name="question2" onChange="editTotalValue();">
  <option selected value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select name="question3" onChange="editTotalValue();">
  <option selected value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select name="question4" onChange="editTotalValue();">
  <option selected value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<!-- Show total value selected in text box -->
<input name="totalValue" type="text" maxlength="2" readonly="true">
<!-- Validate that totalValue(); is indeed 10 and not more or less and pass on the data -->
<input name="submit" type="button" onClick="validateTotalValue();">
</form>
</body>
</html>

Answer 1

function editTotalValue() {
   var val = 0;
   for (var i = 1; i < 5; i++) {
       val = val + document.getElementById("question" + i).value;
   }

   var display = document.getElementbyId("totalValue");

   if (val > 10) {
       alert("error");
   } else {
       display.value = val;
   }
}

Answer 2

以下是您可以玩的更深入的内容：

document.getElementById("form1").onsubmit = checkTarget;

function checkTarget(evt)
{
    var el;  
    if(window.event)
    {
        //checking for IE equivalent
        el = window.event.srcElement;  
    }else if(evt.target)
    {
        el = evt.target;       
    }
    if(window.event)
    {
        //checking for IE equivalent
        window.event.returnValue = false;   
    }else if(evt.preventDefault)
    {
        evt.preventDefault();   
    }
    calculateValues(el);
}

function calculateValues(form)
{
    var values = [];
    var value = 0;
    for(var i=0;i<form.elements.length;i++)
    {
        var el = form.elements[i];
        if(el.tagName === "SELECT")
        {
            values.push(el.value);   
        }
    }
    for(var j=0;j<values.length;j++)
    {
        value = value + parseInt(values[j], 10);
    }
    updateValue(value);
    checkValue(values, value);
}

function updateValue(value)
{
     document.getElementById("result_box").value = value;             
}

function checkValue(values, value)
{
    var temp = [];
    for(var i=0;i<values.length;i++)
    {
        if(values[i] > 0 && values[i] < 10)
        {
            temp.push(values[i]);
        }  
    }
    if(value === 10 && temp.length === 4)
    {
        document.getElementById("message_box").value = "You win!";
    }else if(value > 10 && temp.length === 4)
    {
        document.getElementById("message_box").value = "Value is more than 10";  
    }
}

http://jsfiddle.net/YS6mm/9/

经过测试：Firefox 4，IE8，IE8兼容性视图（Quirks），IE7 Quirks模式，Chrome 4，Safari 4和Opera 11。

在javascript中添加不超过总值的表单值

2 个答案: