We have a questionnaire with several questions, most of which consist of several checkbox/radio buttons for the user to select from. As the user navigates the questions, we have it so that instead of loading a new webpage for each set of questions it instead hides the current form and reveals the next form. It then saves the answers given and at the end of the questionnaire it outputs a concatenated version of all the answers given in a particular format (it's deliberately as it is)
Directly below is our current attempt:
function checkboxQ1()
{
i = 1;
while(i < 8)
{
var Q1increment = "Q1-"+i;
var Q1evaluate = document.getElementsByName(Q1increment);
if(Q1evaluate.checked)
{
Q1_ticked = Q1_ticked + Q1evaluate;
}
i++
alert(i + ", " + Q1evaluate + ", " + Q1_ticked)
}
alert(Q1_ticked)
everything = everything + ", " + Q1_ticked
alert(everything);
};
However, this doesn't seem to work, as during the while loop, it shows that the variable Q1evaluate is equal to: [object NodeList] and I can not figure out how to go about fixing this.
Below is the relevant HTML, for reference, if it helps.
<form>
<input type="checkbox" id="Q1checkbox" name="Q1" value="Q1-1">
<label for="Answer1"> Answer Choice 1 </label>
<br>
<input type="checkbox" id="Q1checkbox" name="Q1" value="Q1-2">
<label for="Answer2"> Answer Choice 2 </label>
<br>
<input type="checkbox" id="Q1checkbox" name="Q1" value="Q1-3">
<label for="Answer3"> Answer Choice 3 </label>
</form>
We've got it working for our dropdown questions, but we're having issues with these checkboxes, and I assume the radio buttons will be of a similar pain when we get to them?
I managed to find a solution, but its quite a bit different in appearance to what I was originally attempting.
HTML
<form>
<input type="checkbox" id="Q1checkbox1" name="Q1" value="Q1-1">
<label for="Answer1"> Answer Choice 1 </label>
<br>
<input type="checkbox" id="Q1checkbox2" name="Q1" value="Q1-2">
<label for="Answer2"> Answer Choice 2 </label>
<br>
<input type="checkbox" id="Q1checkbox3" name="Q1" value="Q1-3">
<label for="Answer3"> Answer Choice 3 </label>
</form>
JAVASCRIPT
function ToQuestion2(){
i = 1;
while (i < 4)
{
if (document.getElementById('Q1checkbox'+i).checked)
{
var Q1checked = "Q1-"+i;
everything = everything + ", " + Q1checked;
}
i++
}
alert(everything);
document.getElementById("Q1").style.display = "none";
document.getElementById("Q2").style.display = "";
};