如何在此测验中添加结果?

时间:2013-10-12 22:05:06

标签: html

如何根据人们的单选按钮选项为此测验添加不同的结果?这是测验:

 <html>
 <head></head>
 <body>
 <h1></h1>
 <form>
 <ol>
 <li> How much are you willing to spend on a phone per month?</li>
 <ul>
 <li> <input type = "radio" name = "q1"> £5-£10.</input></li>
 <li> <input type = "radio" name = "q1"> £10-£15.</input></li>
 <li> <input type = "radio" name = "q1"> £15-£20.</input></li>
 <li> <input type = "radio" name = "q1"> £20-£25.</input></li>
 <li> <input type = "radio" name = "q1"> £25-£30.</input></li>
 <li> <input type = "radio" name = "q1"> £30-£35.</input></li>
 <li> <input type = "radio" name = "q1"> £35-£40.</input></li>
 </ul>
 <li> Are you good with technology?</li>
 <ul>
 <li> <input type = "radio" name = "q2"> Yes.</input></li>
 <li> <input type = "radio" name = "q2"> No.</input></li>
 </ul>
 <li> Are you looking for an easy to use phone?</li>
 <ul> 
 <li> <input type = "radio" name = "q3"> Yes.</input></li>
 <li> <input type = "radio" name = "q3"> No.</input></li>
 </ul>
 <li> Are you looking for a modern type of phone?</li>
 <ul>
 <li> <input type = "radio" name = "q4"> Yes.</input></li>
 <li> <input type = "radio" name = "q4"> No.</input></li>
 </ul>
 <li> How big do you want the phone to be?</li>
 <ul>
 <li> <input type = "radio" name = "q5"> Big.</input></li>
 <li> <input type = "radio" name = "q5"> Medium.</input></li>
 <li> <input type = "radio" name = "q5"> Small.</input></li>
 <li> <input type = "radio" name = "q5"> I don't really mind.</input></li>
 </ul>
 <li> Do you care about the colour of the phone?</li>
 <ul>
 <li> <input type = "radio" name = "q6"> Yes.</input></li>
 <li> <input type = "radio" name = "q6"> No.</input></li>
 </ul>
 <li> Have you ever owned a phone before?</li>
 <ul>
 <li> <input type = "radio" name = "q7"> Yes.</input></li>
 <li> <input type = "radio" name = "q7"> No.</input></li>
 </ul>
 <li> Do you want to be able to use the phone to get out of awkward social situations?</li>
 <ul>
 <li> <input type = "radio" name = "q8"> Yes.</input></li>
 <li> <input type = "radio" name = "q8"> No.</input></li>
 </ul>
 <li> Do you want to be able to access an app store and download apps using your phone?</li>
 <ul>
 <li> <input type = "radio" name = "q9"> Yes.</input></li>
 <li> <input type = "radio" name = "q9"> No.</input></li>
 </ul>
 <li> What happened to the last phone you owned?</li>
 <ul>
 <li> <input type = "radio" name = "q10"> I got bored of it.</input></li>
 <li> <input type = "radio" name = "q10"> It broke(I'm clumsy).</input></li>
 <li> <input type = "radio" name = "q10"> It broke.</input></li>
 <li> <input type = "radio" name = "q10"> The contract ran out.</input></li>
 <li> <input type = "radio" name = "q10"> Other.</input></li>
 </ul>
 </ol>
 <input type = "button" value = "Submit"></input> <input type = "reset" value = "Clear"></input>
 <textarea>The right phone for you will be displayed here.</textarea> 



 </html>

我正在尝试做什么?我一直试图找到这个问题的答案。如果你知道我怎么做我所描述的,请说。谢谢你的阅读。

1 个答案:

答案 0 :(得分:3)

使用javascript从html中提取信息,然后获取总和。您可以使用jquery / ajax来执行此操作而无需提交页面。

顺便说一句,你的意思是从测验中添加结果?

于2013年10月13日更新

使用javascript本身并在前端执行。

首先,将每个单选按钮更改为:

<li><input type = "radio" id = "q1" value="5-10" name = "q1"> £5-£10.</input></li>

并使用JDOM获取值

var name = document.getElementById('q1').value;//name will equal to "5-10"

获得所有选项后,您可以在逻辑中执行任何操作 希望它有所帮助。