如何根据用户的答案验证表单并重定向到特定URL?

时间:2011-03-07 17:24:01

标签: javascript jquery forms user-input

<form>
  <p class="question"> Hold Old are you</p>
  <p ><input name="1"  type="radio" value="15"> 12</p>
  <p ><input name="1"  type="radio" value="8"> 45</p>
  <p ><input name="1"  type="radio" value="2"> 23</p>  
  <p class="question"> What is you name<p/>  
  <p ><input name="2"  type="radio" > Jerry</p>
  <p ><input name="2"  type="radio" > Tom</p>
  <p ><input name="2"  type="radio" > Becky</p>  
  <p class="question"> Are you single</p>
  <p ><input name="3"  type="radio" > yes</p>
  <p ><input name="3"  type="radio" > no</p>
  <p ><input name="4"  type="radio" > married</p>  
</form>

你好,你好吗?

我这里有一个表格,提出3个问题,每个问题都有3个答案,并且会有一个分数:

如果分数>> = 91,那么在提交后应该将它们带到90.html页面

如果得分是&lt; 90和&gt; = 21)然后在提交后应将它们带到20.html页面

如果分数<= 20)那么它应该将它们带到below20.html

表单应验证以确保所有问题都选择了答案

我需要一些关于如何设置的方向

帮助,谢谢

1 个答案:

答案 0 :(得分:1)

我想我知道你在找什么。以下是一个工作示例:http://jsfiddle.net/NLJvZ/

var $rs = $(':radio');

$(':button').click(function(){
    var $ch = $(':radio:checked');
    if($ch.length < 3)
        alert('Please answer all questions');
    else{
        var score = 0;

        $ch.each(function(){
            score += parseInt($(this).val(), 10);
        });

        var url = 'below20.html';

        if(score >= 91)
            url = '90.html';
        else if(score < 90 && score >= 21)
            url = '20.html';

        alert('Going to URL: ' + url);
        location.href = url;
    }
});

HTML:

<div id="question1">
    <h3>What is your name?</h3>
    <label>
        <input type="radio" name="first1" value="1" />
        Tom
    </label>
    <label>
        <input type="radio" name="first2" value="3" />
        Jerry
    </label>
    <label>
        <input type="radio" name="first3" value="2" />
        Becky
    </label>
</div>
<br />
<div id="question2">
    <h3>Are you single?</h3>
    <label>
        <input type="radio" name="second1" value="1" />
        Yes
    </label>
    <label>
        <input type="radio" name="second2" value="3" />
        No
    </label>
    <label>
        <input type="radio" name="second3" value="2" />
        Married
    </label>
</div>
<br />
<div id="question3">
    <h3>How old are you?</h3>
    <label>
        <input type="radio" name="third" value="1" />
        12
    </label>
    <label>
        <input type="radio" name="third" value="3" />
        23
    </label>
    <label>
        <input type="radio" name="third" value="2" />
        45
    </label>
</div>
<br />
<input type="button" value="Submit" />