HTML获取URL，单选按钮组，javascript解析，设置按钮值
[英]HTML get URL, Radio Button Group, javascript parse, set buttons value
问题描述
I have a survey on a page with 5 questions. 
我在一个包含5个问题的页面上进行了调查。 Each question is made up of a 0 - 10 scale. 每个问题由0-10的比例组成。 each one is a radio button in a group. 每一个都是一个组中的单选按钮。 I pass this form data to another page and i get your typical get URL. 我将此表单数据传递到另一个页面，然后获取您的典型获取URL。 Im parsing this with javascript and can get each groups value. 我用javascript解析这个，可以得到每个组的值。 example get URL i have is this /graphs.html?happiness=8&enthusiastic=7&resilient=9 示例获取URL我有这个/graphs.html?happiness=8&enthusiastic=7&resilient=9
I now have the value into a var 我现在把值变成了var
function processScore() {
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
h = unescape(temp[1]);
temp = parameters[1].split("=");
e = unescape(temp[1]);
temp = parameters[2].split("=");
r = unescape(temp[1]);
temp = parameters[3].split("=");
o = unescape(temp[1]);
temp = parameters[4].split("=");
w = unescape(temp[1]);
document.getElementById("happiness").innerHTML = h;
document.getElementById("enthusiastic").innerHTML = e;
document.getElementById("resilient").innerHTML = r;
document.getElementById("optimistic").innerHTML = o;
document.getElementById("wellness").innerHTML = w;
}
processScore();
I want to recreate the same survey, with their answer checkmarked on the radio button but cant figure out how to do it. 我想重新创建相同的调查，他们的答案在单选按钮上勾选，但无法弄清楚如何做到这一点。
so i am trying to set a radio button as checked within a group based on a value i have in a javascript var i got from an html get URL. 所以我试图根据我在html获取URL中获得的javascript var中的值，在组内选中一个单选按钮。
3 个解决方案
解决方案1
0
im not sure how else to say it. 我不知道怎么说。 I have a radio button group of 11 buttons. 我有一个11个按钮的单选按钮组。 i want to set one of them as checked based on the data being passed in a get URL. 我想根据获取URL中传递的数据将其中一个设置为已选中。
I have a form with radio button groups. 我有一个带单选按钮组的表单。 the form is just 5 questions numbered 0 - 10. each one is a radio button. 表格只有5个问题，编号为0-10。每个问题都是一个单选按钮。 when they hit submit i get a standard get URL like /graphs.html?happiness=8&enthusiastic=7&resilient=9 . 当他们点击提交时，我得到一个标准的获取网址，如/graphs.html?happiness=8&enthusiastic=7&resilient=9 。 I am able to parse this URL with the javascript above. 我可以用上面的javascript解析这个URL。 I want to recreate the form, but each question i want their answer checkmarked. 我想重新创建表单，但每个问题我都希望他们的答案被勾选。 so for question 1, happiness, their answer was 8. so i want the radio button related to 8 checked. 所以对于问题1，幸福，他们的答案是8.所以我想要检查8相关的单选按钮。 and so on. 等等。
解决方案2
0 2017-02-10 13:58:04
Don't know what you're markup is like, so it's hard to say. 不知道你的标记是什么样的，所以很难说。 But assuming happiness refers to the container of each question with radio buttons inside, something along these lines might work? 但是假设幸福指的是每个问题的容器里面都有单选按钮，那么沿着这些线条的东西可能有效吗？
function processScore() {
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
h = unescape(temp[1]);
temp = parameters[1].split("=");
e = unescape(temp[1]);
temp = parameters[2].split("=");
r = unescape(temp[1]);
temp = parameters[3].split("=");
o = unescape(temp[1]);
temp = parameters[4].split("=");
w = unescape(temp[1]);
document.querySelectorAll("happiness input[type='radio']")[parseInt(h)].checked = true;
document.getElementById("enthusiastic")[parseInt(e)].checked = true;
document.getElementById("resilient input[type='radio']")[parseInt(r)].checked = true;
document.getElementById("optimistic input[type='radio']")[parseInt(0)].checked = true;
document.getElementById("wellness input[type='radio']")[parseInt(w)].checked = true;
}
processScore();
解决方案3
0
Here is where i am right now. 这就是我现在所处的位置。 I just saw your answer and will attempt to try that. 我刚看到你的答案，并试图尝试。 however i dont fully understand it yet. 但是我还没完全理解它。 There is a section in my code that simply parses the URL to make sure its still doing it right. 我的代码中有一个部分只是解析URL以确保它仍然正确。 man, i think i should go back to networking and leave this programming stuff up to someone else. 男人，我想我应该回到网络，并把这些编程的东西留给别人。 LOL 大声笑
{<html lang = "en">
<head>
<style>
#happiness, #enthusiastic, #resilient, #optimistic, #wellness { color: white; background-color:black; padding-left:8px; padding-right:8px; }
.titlebox {
width:40%;
height:3%;
padding:3px;
border:1px solid #000000;
background-color:#EFEFEF;
left: auto;
right: auto;
position: relative;
}
.title {
text-align:center;
margin:auto;
font-family:"calibri";
font-size:28px;
}
.questions {
text-align: left;
margin: auto;
font-family: "calibri";
font-size: 23px;
display: inline-block;
}
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
}
.underline {
border-bottom: 1px solid black;
width: 95%;
margin: auto;
}
.scaleleft {
color: rgb(89,89,89);
font-size: 21px;
font-family: "calibri";
text-align: left;
padding-left: 10px;
}
.scalecenter {
color: rgb(89,89,89);
font-size: 21px;
font-family: "calibri";
text-align: center;
}
.scaleright {
color: rgb(89,89,89);
font-size: 21px;
font-family: "calibri";
text-align: right;
padding-right: 10px;
}
.footer {
text-align: center;
margin: auto;
font-family: "calibri";
font-size: 19px;
}
.page {
width: 100%;
text-align: left;
margin: 0 auto;
overflow: scroll;
<!-- overflow: hidden; -->
max-height: 500px;
<!-- line-height: 1.2em; -->
}
.body {
text-align: center
}
.table {
width: 100%;
}
.numbersPlacementRight {
font-size: 19px;
font-family: "calibri";
text-align: right;
}
.numbersPlacementCenter {
font-size: 19px;
font-family: "calibri";
text-align: center;
}
.numbersPlacementLeft {
font-size: 19px;
font-family: "calibri";
text-align: left;
}
.button {
size: 25;
value: "Submit"
}
.box {
box-sizing: border-box;
width: 960px;
height: 500px;
padding: 20px;
border: 1px solid #DDD;
overflow: hidden;
}
.button {
height: 40px;
width: 80px;
}
</style>
</head>
<body class="page">
<div class="titlebox title"><b>Wellness Survey</b></div>
<div>
<p>
<div class="questions">1. On average, during the last 7 DAYS, how happy have you felt?</div>
</br>
</br>
<table class="table ">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "0" id = "H0"/> <label for = "H0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "1" id = "H1"/> <label for = "H1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "2" id = "H2"/> <label for = "H3">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "3" id = "H3"/> <label for = "H3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "4" id = "H4"/> <label for = "H4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "5" id = "H5"/> <label for = "H5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "6" id = "H6"/> <label for = "H6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "7" id = "H7"/> <label for = "H7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "8" id = "H8"/> <label for = "H8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "9" id = "H9"/> <label for = "H9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "10" id = "H10"/> <label for = "H10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />happy</td>
<td class="scalecenter">Midly<br />happy</td>
<td class="scalecenter">Moderately<br />happy</td>
<td class="scalecenter">Markedly<br />happy</td>
<td class="scaleright">Extremely<br />happy</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">2. On average, during the last 7 DAYS, how enthusiastic have you felt?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "0" id = "E0" /><label for = "E0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "1" id = "E1"/><label for = "E1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "2" id = "E2"/><label for = "E2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "3" id = "E3"/><label for = "E3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "4" id = "E4"/><label for = "E4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "5" id = "E5"/><label for = "E5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "6" id = "E6"/><label for = "E6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "7" id = "E7"/><label for = "E7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "8" id = "E8"/><label for = "E8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "9" id = "E9"/><label for = E9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "10" id = "E10"/><label for = "E10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />enthusiastic</td>
<td class="scalecenter">Midly<br />enthusiastic</td>
<td class="scalecenter">Moderately<br />enthusiastic</td>
<td class="scalecenter">Markedly<br />enthusiastic</td>
<td class="scaleright">Extremely<br />enthusiastic</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">3. On average, during the last 7 DAYS, how resilient have you felt?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "0" id = "R0"/><label for = "R0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "1" id = "R1"/><label for = "R1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "2" id = "R2"/><label for = "R2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "3" id = "R3"/><label for = "R3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "4" id = "R4"/><label for = "R4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "5" id = "R5"/><label for = "R5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "6" id = "R6"/><label for = "R6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "7" id = "R7"/><label for = "R7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "8" id = "R8"/><label for = "R8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "9" id = "R9"/><label for = "R9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "10" id = "R10"/><label for = "R10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />resilient</td>
<td class="scalecenter">Midly<br />resilient</td>
<td class="scalecenter">Moderately<br />resilient</td>
<td class="scalecenter">Markedly<br />resilient</td>
<td class="scaleright">Extremely<br />resilient</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">4. On average, during the last 7 DAYS, how optimistic have you felt?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "0" id = "O0" /> <label for = "O0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "1" id = "O1"/> <label for = "O1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "2" id = "O2"/> <label for = "O2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "3" id = "O3"/> <label for = "O3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "4" id = "O4"/> <label for = "O4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "5" id = "O5"/> <label for = "O5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "6" id = "O6"/> <label for = "O6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "7" id = "O7"/> <label for = "O7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "8" id = "O8"/> <label for = "O8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "9" id = "O9"/> <label for = "O9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "10" id = "O10"/> <label for = "O10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />optimistic</td>
<td class="scalecenter">Midly<br />optimistic</td>
<td class="scalecenter">Moderately<br />optimistic</td>
<td class="scalecenter">Markedly<br />optimistic</td>
<td class="scaleright">Extremely<br />optimistic</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">5. On average, during the last 7 DAYS, how would you rate your mental wellness?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "0" id = "W0" /> <label for = "W0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "1" id = "W1"/> <label for = "W1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "2" id = "W2"/> <label for = "W2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "3" id = "W3"/> <label for = "W3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "4" id = "W4"/> <label for = "W4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "5" id = "W5"/> <label for = "W5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "6" id = "W6"/> <label for = "W6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "7" id = "W7"/> <label for = "W7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "8" id = "W8"/> <label for = "W8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "9" id = "W9"/> <label for = "W9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "10" id = "W10"/> <label for = "W10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />good</td>
<td class="scalecenter">Midly<br />good</td>
<td class="scalecenter">Moderately<br />good</td>
<td class="scalecenter">Markedly<br />good</td>
<td class="scaleright">Extremely<br />good</td>
</tr>
</table>
</br>
</br>
<!-- <form action="https://wild5wellness.weebly.com/hero-survey-results.html">
<input type="submit" value="submit" />
</form> -->
<input type="submit" value="Submit" />
</form>
</br>
</br>
</br>
<div class="footer">Copyright 2017, Dr. Saundra Jain and Dr. Rakesh Jain</div>
</div>
</div>
<h2>Testing: </h2>
<p><b>happiness: </b><span id="happiness" ></span></p>
<p><b>enthusiastic: </b><span id="enthusiastic"></span></p>
<p><b>resilient: </b><span id="resilient" ></span></p>
<p><b>optimistic: </b><span id="optimistic"></span></p>
<p><b>wellness: </b><span id="wellness"></span></p>
<script language="JavaScript">
function processScore()
{
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
h = unescape(temp[1]);
temp = parameters[1].split("=");
e = unescape(temp[1]);
temp = parameters[2].split("=");
r = unescape(temp[1]);
temp = parameters[3].split("=");
o = unescape(temp[1]);
temp = parameters[4].split("=");
w = unescape(temp[1]);
document.getElementById("happiness").innerHTML = h;
document.getElementById("enthusiastic").innerHTML = e;
document.getElementById("resilient").innerHTML = r;
document.getElementById("optimistic").innerHTML = o;
document.getElementById("wellness").innerHTML = w;
}
processScore();
</script>
<script language="JavaScript">
function checkradio() {
if (document.getElementById("happiness").value == 1) {
document.getElementById("H1").checked == true;
}
else {
document.getElementById("H2").checked == true;
}
}
</script>
<div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript：取消选中时设置单选按钮的背景（单选按钮组） - JavaScript: Set background of radio button when deselected (group of radio buttons)
无法从单选按钮组中的单个单选按钮获得价值 - Unable to get value from single radio button in group of radio buttons
使用javascript按组名称获取单选按钮值 - Get radio button value by name in group with javascript
URL中的Javascript单选按钮值 - Javascript Radio Button Value in URL
使用JavaScript动态显示/隐藏单选按钮组的单选按钮 - Dynamically Show/Hide Radio buttons of a Radio button group using JavaScript
在JavaScript中设置单选按钮值 - Set radio button value in javascript
如何使用 javascript 获取多个单选按钮具有相同名称的选定单选按钮的值 - How to get the value of selected radio button where multiple radio buttons have same name using javascript
Javascript：从另一个 html 页面获取单选按钮值 - Javascript: Get radio-button value from another html page
提交HTML表单并获取无JavaScript或jquery的单选按钮值 - Submit HTML form and get radio button value without javascript or jquery
CRM 2011 JavaScript获取单选按钮值并设置用户名 - Crm 2011 javascript get radio button value & set username
相关标签