Require answers to multiple radio buttons to go to next page HTML - javascript

I am setting up a multipage survey/study that has 2 multiple choice radio button questions per page (with the exception of the first page, which requires no answer). I have a next function that checks to make sure an answer has been given. It works, but when passed two values so that it will check two questions, it only checks one of them. I used console.log to display the name passing through the function, and only one name gets passed. I can go to the next page by answering only one of the questions, even if it's not the one passing through the function according to the name in the console log. How can I get it to check all of the questions that I specify in onclick?
Here is the code for the Continue button with the next() function for onclick. When I pass both names, it will only check 1 of the 2.
<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/>
These are the radio buttons:
Question 1
<input name="Q1Answer" type="radio" value="Right" /> Right 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
Question 2
Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" />
More confident
This is the current version of my next function. I added a for loop to try to get it to iterate through all of the items passed to it, but that isn't solving the issue (it worked the same way without the loop). This code is in a javascript file that I call in the HTML code.
function next(name) {
for (i in name) {
if (name.startsWith('Q')) {
if (!document.querySelectorAll('input[name]:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
(swap and effectivePage are other functions for progressing to the next page, I can add those if needed to test)
I've used name as the identifier, but could easily replace with ID if that would somehow make this easier. I used the startsWith if condition so that only actual questions would get checked.
I have basic HTML knowledge and don't know Javascript at all beyond what I've taught myself to try to figure this out, so I'm hoping the solution is a simple one.

So I managed to find 2 problems which were keeping your code from performing the way you wanted. When you created your next call in the HTML, you tried to pass in multiple name strings, but your next function only takes in one parameter. This means that your calls were only ever getting the first string to check against which in this case was Q1Answer. If you change the value being passed in to an array of strings, then you can perform the checking against all the names you need. Also, be sure to pass the exact name of the inputs you want to check against in that next call. If those names are incorrect your code will make it so the user can never reach the next page as it will think that that input was never selected (because it won't find that input at all on the page).
Second, when you were performing the checking by using the query selector, you weren't checking against any specific names so it was always finding the selected first value even if it should have been checking for the second input tag. I have modified that check to now specifically look for the name passed in so it will only match against the input in question (ie, the first pass will check for Q1Answer and the second pass will check for Qrating).
function next(name) {
for (i in name) {
if (name[i].startsWith('Q')) {
if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) {
alert("Please answer the question.");
return;
}
}
}
current++;
swap(effectivePage(current - 1), effectivePage(current));
}
<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" />
<input name="Q1Answer" type="radio" value="Right" /> Right 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong
<br/> Less confident
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> More confident

Related

radio boxes are not setting attribute checked

I guess kind of a silly question here. I have created a .html file on my desktop outside of fiddle (so please don't test it in fiddle but just create a .html file on your computer to test this). in the file I JUST have 3 radio buttons and jquery attached. However, boxes never work right as checked or clicked attribute never gets set on them and literally they don't alternate when checked on. What am I missing here?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="well" value="well" />1 - Very well<br />
<input type="radio" name="little" value="little" />2 - A little<br />
<input type="radio" name="not" value="not" />3 - Not at all<br />
</body>
However, boxes never work right as checked or clicked attribute never gets set on them
None of the code you've supplied will set the checked attribute.
You need to actually set it, to set it:
<input type="radio" name="well" value="well" checked>
Note: Browsers remember the state of forms when refreshing the page. If you are testing by modifying the HTML and then clicking the refresh button, you may not see any effect. Click the address bar and press enter to avoid this problem.
There is no clicked attribute for the input element.
they don't alternate when checked on
They have different name attribute values. To be part of the same radio group, each radio button must share the same name.
You have three groups, each with one member.
Your radio buttons don't know they're related. The name attribute should be the same, while the value can be changed for each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rating" value="well" />1 - Very well<br />
<input type="radio" name="rating" value="little" />2 - A little<br />
<input type="radio" name="rating" value="not" />3 - Not at all<br />
In order for them to be mutually exclusive (so that when you select one, it deselects any others) all of the radio elements have to have the same name. Change your code like so and it will work:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="radio" value="well" />1 - Very well<br />
<input type="radio" name="radio" value="little" />2 - A little<br />
<input type="radio" name="radio" value="not" />3 - Not at all<br />
</body>
</html>

How to use both radio buttons and checkboxes in same fieldset?

I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!
You need to use different names because each field needs to be identified individually by the server.

php onclick once inside input

<progress value="0" max="100" id="p1"></progress>
<div class="allQuestion"><?php for($i=1; $i<=10; $i++){?><input type="radio" name="Dq[1]" value="<?=$i?>" onClick='incr();'> <?=$i?> <?php } ?></div>
js
<script type="text/javascript">
function incr() {
var v1=document.getElementById('p1').value;
document.getElementById("p1").value= v1 + 1;
}
</script>
my intention is make the question between 1-10 point can only be clicked once , but the input was generate by php so if i put the onclick inside input , each radio i clicked will be increasing the progress bar , i only need the radio only be clicked once and the progress bar remain the same % it have , lets each question is 1% once clicked it only increasing 1% , when reclick it still 1%.
or and i also dont wanted use jquery.
I'm not 100% sure what it is you're asking here (judging by the down votes it would appear others are too).
Some general tips for asking questions on StackOverflow:
Your question should be clear (it's difficult to actually judge what you're asking here)
Your code should ideally be presented in a readable manner (the PHP/HTML code you've provided is all on one line, and considering the question is regarding JavaScript functionality, and we don't have access to the rest of your PHP code, the PHP code is useless in terms of the question, and makes answering your question more effort)
JSFiddles are usually helpful when asking a frontend question like this (it means less wasted time replicating the issue)
Try and follow the above suggestions when asking a question, the list is by no means all inclusive though, you should also really read through the guidelines on asking questions here.
Now onto your actual question.
I'm guessing you want your code to function as follows:
A user can only select an option once
Once an option has been selected it should be added to the numerical contents of a paragraph
Assuming I've got the above correct (let me know if not) the following code should work for you:
HTML:
<p id="answerResult">1</p>
<div class="allQuestion" id="allQuestion">
<input type="radio" name="questionAnswer" value="1" /> 1<br />
<input type="radio" name="questionAnswer" value="2" /> 2<br />
<input type="radio" name="questionAnswer" value="3" /> 3<br />
<input type="radio" name="questionAnswer" value="4" /> 4<br />
<input type="radio" name="questionAnswer" value="5" /> 5<br />
<input type="radio" name="questionAnswer" value="6" /> 6<br />
<input type="radio" name="questionAnswer" value="7" /> 7<br />
<input type="radio" name="questionAnswer" value="8" /> 8<br />
<input type="radio" name="questionAnswer" value="9" /> 9<br />
<input type="radio" name="questionAnswer" value="10" /> 10<br />
</div>
JavaScript:
// the paragraph that contains information about your currently selected answer
var answerSummary = document.getElementById('answerResult');
// the container of the radio buttons
var answersContainer = document.getElementById("allQuestion");
// the radio buttons
var answerOptions = answersContainer.getElementsByTagName("input");
for(var i = 0; i < answerOptions.length; i++) {
answerOptions[i].addEventListener("click", function(event) {
// change the paragraph to show the currently selected value
answerSummary.innerHTML = answerSummary.innerHTML + " " + this.value;
// disable all radio buttons once an options has been selected
for(var i = 0; i < answerOptions.length; i++) {
answerOptions[i].disabled = true;
}
});
}
And a link to this code in action:
http://jsfiddle.net/44mvrftu/4/
I've quite significantly refactored your code to try and make it more readable, maintainable and easy to understand, somethings I've changed:
Better variable names (v1 should never be a variable name)
No 'onclick' in the HTML, you should never really do this as it means you're mingling HTML and JavaScript (presentation and functionality) which makes maintainability more difficult, and is arguably less performant in some ways. Let me know if you find the way I've added the onclick event handler confusing and I'll try and help you understand, alternatively you could modify the above code to use 'onclick' in the HTML.
I removed the PHP (this was necessary for me to create a working demo)
I've used pure JavaScript, this would be easier and cleaner to implement in jQuery, and would also ensure it worked in older browsers (the above code will only reliably work in modern browsers) but you've not said anything about jQuery so I've assumed you've not used it.
I hope I've got that right? Let me know if you have any questions.
Question is not clear, if you are saying you want onclick only once use jQuery .one(),see details here
Well I don't know what you want? You can use both PHP and Javascript but it depends on what you want to do.
The jQuery solution:
$("input").one("click", function () {
alert($("input[type=checkbox]").val());
});

Radio button selection dynamically change other radio button value

So I've tried looking, and I haven't found anything so hopefully this isn't a repeat question. I have several sets of radio buttons, and I need to have the values associated with the latter radio buttons change dynamically based on the users selection within the first set of radio buttons.
<input type="radio" name="length" id="6feet" value=" " > 6'0"
<input type="radio" name="length" id="6.5feet" value=" " > 6'6"
<input type="radio" name="length" id="7feet" value=" " > 7'0"
<input type="radio" name="weight" ID="weight3" value="5" /> 3
<input type="radio" name="weight" ID="weight4" value="10" /> 4
<input type="radio" name="weight" ID="weight5" value="15" /> 5
<input type="radio" name="pieces" ID="PieceA" value="10"> 2
<input type="radio" name="pieces" ID="PieceB" value="20"> 3
So what I'm trying to figure out is if there is a way to use onClick or something similar to set it so that when the user selects one of the three "length" radio buttons, they will each assign different values to both the weight and pieces radio buttons as well. Sorry if the question is unclear at all.
I didnt understand totally your question.. is this what you need?
$(document).ready(function(){
$('input[name=length]').click(function () {
$('input[name=weight]').val(newValue);
$('input[name=pieces]').val(newValue);
});
});
Do you need something like this and reassign a real "value" for radiobuttons?
A pure javascript solution would look similar to this:
document.getElementById("6feet").onclick = (function() {
document.getElementById("weight3").click();
});
You attach the onclick event to an element (in this case the element with id of 6feet) and once that is clicked it calls the defined function.
Read more about .click()
EXAMPLE
There are also simpler solutions using jQuery, but I wasn't sure if you were able to incorporate it into your code.

Check/uncheck all checkboxes on without looping and without a framework

Is it possible to check or uncheck a set of checkboxes on a page a) without looping, and b) without using a Javascript framework such a jQuery?
This question is related but is about (un)checking all the checkboxes on a page with jQuery.
I expect the answer to my question will probably be "no", but if there's some weird, hacky way of doing it (not weird and not hacky is good too!) then I would like to know. Call it curiosity if you will.
Edit: I suppose what I'm really asking is for a way to do it in O(1) (constant time) rather than O(n) (linear time with respect to the number of checkboxes)
If the buttons are in a form, you can use a reset button if the default state is unchecked and you don't mind resetting all the other controls in the form. Otherwise, you have to use a loop regardless of whether you use POJS or a "framework".
Look ma, no script!
<form action="#">
<div>
<input type="checkbox" name="cb0">
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2">
<input type="checkbox" name="cb3">
<br>
<input type="reset" value="Uncheck all">
</div>
</form>
One way you can go about checking or unchecking a set of checkboxes on a page is to reference each one individually.
This meets both criteria "a" (no looping) and criteria b (no framework)
You could do it with map(), which may or may not be a loop, depending on how strict of a definition you use for "loop" :) But in all practical terms, it's just another way of casting a loop. I'd say the answer to your question is "no."
EDIT:
var checkboxes = getElement...
checkboxes.map(function(c) {
c.checked = true;
});
You may modify/override the full HTML code:
<div id="checkBoxes">
<input name="foo" type="checkbox" value="1" />
<input name="bar" type="checkbox" value="1" />
<input name="baz" type="checkbox" value="1" />
</div>
<script type="text/javascript">
function checkAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" checked="checked" />'
+'<input name="bar" type="checkbox" value="1" checked="checked" />'
+'<input name="baz" type="checkbox" value="1" checked="checked" />';
}
function uncheckAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" />'
+'<input name="bar" type="checkbox" value="1" />'
+'<input name="baz" type="checkbox" value="1" />';
}
</script>
no Loop, no Framework, just a little bit unesthetic..

Categories

Resources