Hope someone can help.
I have a dynamically generated form that ends up looking like this
<form>
<header><h2 id="title">This is a Survey Title</h2></header>
<ul class="Question_list">
<li class="question">
<div id="sm_survey_question_0">
<fieldset>
<div class="question_text">is this a test?</div>
<input type="radio" name="0" value="1">yes<br>
<input type="radio" name="0" value="2">no<br>
<input type="radio" name="0" value="3">maybe<br>
</fieldset>
</div>
</li>
<li class="question">
<div id="sm_survey_question_1">
<fieldset>
<div class="question_text">Is Batman the best?</div>
<input type="radio" name="1" value="1">yes<br>
<input type="radio" name="1" value="2">no<br>
</fieldset>
</div></li>
<li>
<div id="sm_survey_question_2">
<fieldset>
<div class="question_text">best colors</div>
<input type="radio" name="2" value="1">red<br>
<input type="radio" name="2" value="2">blue<br>
<input type="radio" name="2" value="3">green<br>
</fieldset>
</div>
</li>
</ul>
</form>
and I would like that when the submit button is clicked i can generate a "report", a string would work with the question and the answers selected.
I cant wrap my mind around how to do that.
so far im able to cycle through the questions, check what answers are checked but its the end when i have to create a sting with the questions + its checked
module.createReport = function() {
console.log('reporting');
var questions = document.getElementsByClassName('question');
console.log(questions.length+1,"questions");
var StringAnswers="";
for (var i = questions.length ; i >= 0; i--) {
var textq= document.getElementById('sm_survey_question_'+i).getElementsByClassName("question_text")[0].innerHTML;
var answers = document.getElementById('sm_survey_question_'+i).getElementsByTagName('input');
for (var j = answers.length-1; j >= 0; j--) {
if (answers[j].checked) {
var isanswerC= answers[j].value;
};
var conc= textq+" "+isanswerC;
StringAnswers.concat(conc);
};
};
console.log(conc);
};
Related
I'm a newbie learning new stuff. I'm trying to handle two forms, but can't figure out how to handle the second form differently. It uses 1st forms handle no matter what. Here's the code:
<div class="body questionnaire-container">
<div class="content">
<h2 id="questionNumero"></h2>
<p id="question"></p>
<form class="form" id="question-form">
<div>
<input type="radio" name="question" id="answerA" value="A">
<label class="answerA"></label>
</div>
<div>
<input type="radio" name="question" id="answerB" value="B">
<label class="answerB"></label>
</div>
<div>
<input type="radio" name="question" id="answerC" value="C">
<label class="answerC"></label>
</div>
<div>
<input type="radio" name="question" id="answerD" value="D">
<label class="answerD"></label>
</div>
<button type="submit" id="submit" class="submit">Next</button>
</form>
</div>
<div class="barre-progression">
<h2>Progrès</h2>
<progress class="progression" value="0" max="10">
</div>
</div>
<div class="body weaponquestionnaire-container">
<div class="content">
<h2 id="questionNumero"></h2>
<p id="question"></p>
<form class="form" id="questionweap-form">
<div>
<input type="radio" name="question" id="answerA" value="A">
<label class="answerA"></label>
</div>
<div>
<input type="radio" name="question" id="answerB" value="B">
<label class="answerB"></label>
</div>
<div>
<input type="radio" name="question" id="answerC" value="C">
<label class="answerC"></label>
</div>
<div>
<input type="radio" name="question" id="answerD" value="D">
<label class="answerD"></label>
</div>
<button type="submit" id="chuj" class="questionweap-form">Next</button>
</form>
</div>
<div class="barre-progression">
<h2>Progrès</h2>
<progress class="progression" value="0" max="10">
</div>
</div>
// Handle Form Submits
$("#question-form").submit(function (e) {
e.preventDefault();
alert( "It's broken again!" );
if (questionNumber != nbQuestionToAnswer) {
//question 1 to 9: pushing answer in array
closeAll();
userAnswer.push($('input[name="question"]:checked').val());
questionNumber++;
openQuestionnaire();
} else {
// question 10: comparing arrays and sending number of good answers
userAnswer.push($('input[name="question"]:checked').val());
var nbGoodAnswer = 0;
for (i = 0; i < nbQuestionToAnswer; i++) {
if (userAnswer[i] == goodAnswer[i]) {
nbGoodAnswer++;
}
}
closeAll();
if (nbGoodAnswer >= nbAnswerNeeded) {
openResultGood();
} else {
openResultBad();
}
}
return false;
});
$("#questionweap-form").submit(function (e) {
e.preventDefault();
alert( "It worked, finally." );
if (questionNumber != nbQuestionToAnswer) {
//question 1 to 9: pushing answer in array
closeAll();
userAnswer.push($('input[name="question"]:checked').val());
questionNumber++;
openQuestionnaireWeapon();
} else {
// question 10: comparing arrays and sending number of good answers
userAnswer.push($('input[name="question"]:checked').val());
var nbGoodAnswer = 0;
for (i = 0; i < nbQuestionToAnswer; i++) {
if (userAnswer[i] == goodAnswer[i]) {
nbGoodAnswer++;
}
}
closeAll();
if (nbGoodAnswer >= nbAnswerNeeded) {
openResultGood();
} else {
openResultBad();
}
}
return false;
});
It keeps submitting the "question-form", even when trying to submit "questionweap-form"
I've looked for any tips for hours any couldn't find anything, so any help would be appreciated!
I'm not very good at Javascript, so I would like to ask help with the following:
I have a form, which has multiple radio groups (generated by php code, so I don't know their names OR how many will appear), and I need to check whether they are selected or not.
If not I want to show the user which question was not answered (no alert message, but it can be in text form or the question letters turning red).
I've tried googling the problem, but none of the previous answers were good to use in my case.
Here is my code so far:
function formCheck(formID) {
var eLabel=document.getElementById(formID).getElementsByTagName("label");
var radionames=[];
var eInput=document.getElementById(formID).getElementsByTagName("input");
var checker=true;
for (var i=0; i<eInput.length; i++) {
if (eInput[i].checked) {
radionames.push(eInput[i].name);
}
}
for (var i=0; i<eInput.length; i++) {
for (var j=0; j<radionames.length; j++) {
if (eInput[i]==radionames[j]) {
checker=true;
}
else {
alert();
checker=false;
}
}
}
return checker;
}
<form method="post" action="something.php" id="form1" name="form1">
<div class="que">que 1</div>
<div class="answ"><label><input name="2" value="7" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="2" value="5" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="2" value="8" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="2" value="6" type="radio">Answer 4</label></div>
<div class="que">que 2</div>
<div class="answ"><label><input name="1" value="4" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="1" value="1" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="1" value="2" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="1" value="3" type="radio">Answer 4</label></div>
<input class="submit_button" value="Submit the form" onclick="return formCheck('form1');" type="submit">
</form>
I wanted to create an array with the checked input "group" names, and compare it to all the input group names... the remaining ones will show the error (red text, a message, doesn't matter).
The problem is this code doesn't really do anything that I can see, and shows the something.php even if I don't have anything checked...
If this is not a good method, I'm open to any suggestions.
(I don't want to use jQuery, and the code has to run on older browsers too.)
Sorry for my english, it's not my native language &
Thanks for your help in advance!
A.
in second For loop in javascript :
use this line :
if (eInput[i].value == radionames[j]) {
instead of : if (eInput[i] == radionames[j]) {
you must realy get the value of eInput[i]
You can use document.querySelectorAll to get all input. You can also fine tune it by passing the type of input. Then filter out the name from the group of radio buttons
function getCheckedButton() {
var tempNames = [];
// get all radio button and loop through it to get it's name.
// use a tempArray to keep unique names
var radios = document.querySelectorAll('input').forEach(function(item) {
// if the name is not present then and only then adding name to the array
if (tempNames.indexOf(item.name) === -1) {
tempNames.push(item.name)
}
})
// now looping through temp array
for (var i = 0; i < tempNames.length; i++) {
// using the name to select the radio button group to check if any of radio
// button in this group is checked or not
// if not checked then it will give null
if (document.querySelector('input[name="' + tempNames[i] + '"]:checked') !== null) {
console.log(document.querySelector('input[name="' + tempNames[i] + '"]:checked').value)
} else {
console.log("Radio button of group value " + tempNames[i] + " is unchecked")
}
}
}
<div class="que">
que 1</div>
<div class="answ">
<label>
<input name="2" value="7" type="radio">Answer 1</label>
</div>
<div class="answ">
<label>
<input name="2" value="5" type="radio">Answer 2</label>
</div>
<div class="answ">
<label>
<input name="2" value="8" type="radio">Answer 3</label>
</div>
<div class="answ">
<label>
<input name="2" value="6" type="radio">Answer 4</label>
</div>
<div class="que">que 2</div>
<div class="answ">
<label>
<input name="1" value="4" type="radio">Answer 1</label>
</div>
<div class="answ">
<label>
<input name="1" value="1" type="radio">Answer 2</label>
</div>
<div class="answ">
<label>
<input name="1" value="2" type="radio">Answer 3</label>
</div>
<div class="answ">
<label>
<input name="1" value="3" type="radio">Answer 4</label>
</div>
<button onclick="getCheckedButton()">Get checked buttons</button>
I want a variable (chanceoflive) to be stored with localStorage. Then, I have radio buttons. I want it so that depending on which radio button is selected, the variable chanceoflive will be changed. This is what I have:
var chanceoflive = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive(){
if (user == brick) {
chanceoflive += 1;
}
else if (user == wood) {
chanceoflive +=3
}
else if (user == stone) {
chanceoflive +=2
}
localStorage.setItem("chanceoflive", chanceoflive);
}
function test(click){
alert(chanceoflive);
}
<div id="radiobuttons" class="container" name="buttons" align=center>
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('Bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('Wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('Stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<form action="chooseheight.html">
<div class="wrapper">
<button class="button" onClick="test();changechanceoflive()" align=center>Submit</button>
</div>
</form>
Although, it always just alerts 0. Is it a problem with localStorage or something else?
I fixed your code:
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
JS
var chanceoflive = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive(){
if (user == 'bricks') {
chanceoflive += 1;
}
else if (user == 'wood') {
chanceoflive +=3
}
else if (user == 'stone') {
chanceoflive += 2
}
localStorage.setItem("chanceoflive", chanceoflive);
}
function test(click){
alert(chanceoflive);
alert(localStorage.chanceoflive);
}
But with your code, if the user reload the page and then didn't select any radio, the localStorage variable will be reset to 0 because your have
var chanceoflive = 0;
If you want to keep the last saved value, you must replace that line by:
var chanceoflive = localStorage.chanceoflive;
To answer your part about LocalStorage, just set/get your variables like a regular Javascript object. More info: mrkdown.io/t32iomd
I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.
So I feel silly asking this question, but am currently a high school student in Coding that needs help. We're working on a project with the same requirements for all people, so I took some code that worked for my friend to use for a form; however, I keep running in the problem that my 'length is undefined' and therefore, will not do what I want it to. My code is below:
HTML:
What toppings do you like on your ice-cream?
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Whip Cream">Whip Cream
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Sprinkles">Sprinkles
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Fruit">Fruit
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Hot Fudge/Caramel">Hot Fudge/Caramel
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Other">Other
</label>
</div>
<input name="Submit" type="Submit" value="Submit">
<div id="r">
</div>
Script:
var form = document.forms.example;
//This points to the form called "example" in HTML
form.addEventListener("submit",nameDisplay,false);
function nameDisplay(event) {
event.preventDefault();
var person = {
name: form.username.value,
}
var text = "<p> Mmmm..." + person.name +" sounds yummy!</p>";
document.getElementById("result").innerHTML = text;
}
var l = [];
for(i = 0; i < form.food.length; i++) {
if(form.food[i].checked) {
l.push(form.food[i].value);
}
console.log("loop");
}
console.log(l);
person.food = l;
console.log(person.food);
var text = "<p>You like" + person.food.join(",") + "on your ice-cream.</p>";
document.getElementById("r").innerHTML = text;
NOTE: I have two forms, hence the first part of javascript, but I thought maybe the problem lies within one thing is overriding another and what not or I'm missing something. I am only having problems with the ice-cream one though. Please help! Thanks in advance!
Below is the working version of your code
Issues found:
form tag was missing
There was no username input yet person needed it
The code you added
after your friend's was outside the nameDisplay function
There was no "result" div
Other concerns you may want to review
Is there a need to wrap your input's in divs?
No need for the food variable
I'd love to see the loop replaced with a filter and some
Bro, are you sure im not doing your homework?
var form = document.forms.example; //This points to the form called "example" in HTML
form.addEventListener("submit", nameDisplay, false);
function nameDisplay(event) {
var food = [];
for (i = 0; i < form.food.length; i++) {
if (form.food[i].checked) {
food.push(form.food[i].value);
}
}
var text = "<p>You like " + food.join(",") + " on your ice-cream.</p>";
document.getElementById("r").innerHTML = text;
}
<h3>What would you like on your Ice Cream?</h3>
<form id="example">
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Whip Cream">Whip Cream
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Sprinkles">Sprinkles
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Fruit">Fruit
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Hot Fudge/Caramel">Hot Fudge/Caramel
</label>
</div>
<div class="checkbox">
<label>
<input name="food" type="checkbox" value="Other">Other
</label>
</div>
<input name="Submit" type="Submit" value="Submit">
<div id="r">
</div>
</form>