I would like to simply .show() a div based on a web forms radio button (user) selections.
For brevity lets take below (but note I'm looking for somewhat scaleable advice as my web form will have 7 questions and 5 answers each. And I have 5 results divs)
Note:// So, basically there will be 7 questions and 5 answers each. so I will need an array with 5 possible answer binations via user radio button selection, ideally using the input 'value' field; so I can simply change the values of what value bos would equal what div results screen. The div results screens will just be 5 unique sets of content inside the div, that's it.
Mark-Up:
<div class="page1">
<form class="sampler">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
<div class="page2">
<form class="sampler">
<input type="radio" name="food" value="tacos" checked>Tacos
<br>
<input type="radio" name="food" value="spicynuts">Rotten Spicy Peanuts
</form>
</div>
<div id="resultsONE"><!-- one results div is display none by default sample but there would be much more content here -->
<p>Congratulations, you are NOT the father</p>
</div>
I know the below is terrible syntax; but this was the logic I was thinking about starting with on JS side. Note I will have 5 unique results #divs.
function resultsdivONE () {
if ($input value == "male" & "tacos") {
$('#resultsONE').show();
} else if () {
// do
} else {
// do
}
}
As I mentioned above; I'm looking for a method where I can simply use the SELECTED input value=""; so they can be changed somewhat easily.
Example.
if ("male" & "tacos" & "nextanswer" & "nextanswerafter") { // etc up to 7
$('#resultsONE').show();
} // first results div
May be open to php options.
Thanks for taking a look!
I would like to simply .show() a div based on a web forms radio button (user) selections.
For brevity lets take below (but note I'm looking for somewhat scaleable advice as my web form will have 7 questions and 5 answers each. And I have 5 results divs)
Note:// So, basically there will be 7 questions and 5 answers each. so I will need an array with 5 possible answer binations via user radio button selection, ideally using the input 'value' field; so I can simply change the values of what value bos would equal what div results screen. The div results screens will just be 5 unique sets of content inside the div, that's it.
Mark-Up:
<div class="page1">
<form class="sampler">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
<div class="page2">
<form class="sampler">
<input type="radio" name="food" value="tacos" checked>Tacos
<br>
<input type="radio" name="food" value="spicynuts">Rotten Spicy Peanuts
</form>
</div>
<div id="resultsONE"><!-- one results div is display none by default sample but there would be much more content here -->
<p>Congratulations, you are NOT the father</p>
</div>
I know the below is terrible syntax; but this was the logic I was thinking about starting with on JS side. Note I will have 5 unique results #divs.
function resultsdivONE () {
if ($input value == "male" & "tacos") {
$('#resultsONE').show();
} else if () {
// do
} else {
// do
}
}
As I mentioned above; I'm looking for a method where I can simply use the SELECTED input value=""; so they can be changed somewhat easily.
Example.
if ("male" & "tacos" & "nextanswer" & "nextanswerafter") { // etc up to 7
$('#resultsONE').show();
} // first results div
May be open to php options.
Thanks for taking a look!
So basically, what is seeked is a simple form containing radio buttons and results which should match a bination of the radio-choices.According to the question, the questions should be easily maintainable and changable, without always touching a script or its initial logic. This votes for outsourcing the questions and the logic - seperate it from the DOM.
Shortly mentioned and furthermore visible in the question tags are php and ajax. Given that there might be the wish to outsource the questions pletely and grab them from php by ajax. Another vote for outsourcing.
For brevity lets take below (but note I'm looking for somewhat scaleable advice as my web form will have 7 questions and 5 answers each. And I have 5 results divs)
To make it easily maintainable, the questions and answers are going to be outsourced into a json file (here JSON.js). Given this, it is also possible to retrieve it by php or any webservice and/or store those in a database. Furthermore the possibility is provided to create multiple forms with yet different questions which all use the same code.
There is a Fiddle available for it
<html>
<head>
<!-- optional styles -->
<style>
#Container{
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<script>
//This is out simple AJAX routine to not overload it by any framework.
//If you are already using jQuery, just use $.get()
;var AJAX = {
getXmlDoc: function(){return ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"))},
//u:=url, f:=callback, c:=any param to pass to callback
Get: function(u, f, c){
var tDoc = this.getXmlDoc();
tDoc.open('GET', u, true);
tDoc.onreadystatechange = function(){
if (tDoc.readyState === XMLHttpRequest.DONE && tDoc.status === 200) f(tDoc, c);
};
tDoc.send();
}
};
//This is going to be the namespace holding our functionality.
//In the end one should outsource this to a script file, yet we leave it here in the example for a better overview.
;var Quiz = {
mContainer: null, //In this container the quiz gets created in
mCurrent: null, //Stores the current displayed question
mJSON: null, //In here we are going to store the JSON result
//Handling logical errors, like missing data or json
_Error: function(m){
console.log(m)
},
//The event called on the radio change event
//e:=element
_onChange: function(e){
if (e && this.mJSON.questions[this.mCurrent]){
//We are going to those the result of this question in the JSON
this.mJSON.questions[this.mCurrent].value = e.value;
//If the question is not the last, we are going to display the next one
if (this.mCurrent < this.mJSON.questions.length - 1){
this.hideQuestions();
this.showQuestion(this.mCurrent + 1)
}
else{
//Else we are going to show the result
this.hideQuestions();
this.showResult()
}
}
else this._Error('_onChange(): Invalid parameters')
},
//The function to initialise our quiz.
//We are going to grab the json data and analyse it.
//c:=container element || document.body, l:=link || 'JSON.js'
Init: function(c, l){
this.mContainer = (c || document.body);
var tL = (l || 'JSON.js');
AJAX.Get(tL, function(r, l){
Quiz.mJSON = JSON.parse(r.response);
if (Quiz.mJSON && Quiz.mJSON.questions)
Quiz.showQuestion(0)
else
Quiz._Error('Init(): No questions found with "' + l + '"')
}, tL)
},
//Hiding the previously asked questions (remove from dom)
hideQuestions: function(){
while(this.mContainer.firstChild) this.mContainer.removeChild(this.mContainer.firstChild)
},
//Going to show the result according to the asked questions
showResult: function(){
var tValues = []; //Storing our answers
for(var i=0, j=this.mJSON.questions.length; i<j; i++)
if (this.mJSON.questions[i].value) tValues.push(this.mJSON.questions[i].value)
//Going to store the result text
var tResult = 'No match for ' + tValues.join(',');
//Looping through all requirements to get a match
for(var i=0, j=this.mJSON.answers.length; i<j; i++){
//The requirements which need to match the values
var tR = this.mJSON.answers[i].requirement;
//For this we filter all the elements which do not match the requirements
var tF = tValues.filter(function(e){return tR.indexOf(e) === -1})
//If that list is empty, all elements matched and we can stop
if (!tF || tF.length === 0){
tResult = this.mJSON.answers[i].message;
break;
}
}
//Now we are going to dislpay the result
var tH = document.createElement('h1');
tH.innerHTML = tResult;
this.mContainer.appendChild(tH)
},
//This creates and shows a question of our question array
//i:=JSON.questions array index
showQuestion: function(i){
if (i >= 0 && i<this.mJSON.questions.length){
this.mCurrent = i;
var tQ = this.mJSON.questions[i];
var tN = Object.getOwnPropertyNames(tQ)[0]; //The property name is going to bee the radio group name
//We are going to create a title (h1) and multiple radios (input & label) for each question
var tF = document.createDocumentFragment();
//Creating the header
var tH = document.createElement('h1');
tH.innerHTML = tQ.label;
tF.appendChild(tH);
//Creating the questions
for(var i=0, j=tQ[tN].length; i<j; i++){
var tR = document.createElement('input');
tR.type = 'radio';
tR.value = tQ[tN][i];
tR.name = tN;
tR.onchange = function(){Quiz._onChange(this)};
tF.appendChild(tR);
var tL = document.createElement('label');
tL.for = tR.name;
tL.innerHTML = tR.value;
tF.appendChild(tL);
}
//Now we are going to assign it to the dom.
this.mContainer.appendChild(tF)
}
else{
this.mCurrent = null;
this._Error('showQuestion(' + i.toString() + '): No such question loaded')
}
}
};
</script>
</head>
<body onload = "Quiz.Init(document.querySelector('#Container'))">
<div id = 'Container'>
<!-- Container for the quiz -->
</div>
</body>
</html>
{
"questions": [
{"sex": ["male", "female"], "label": "What are you?"},
{"food": ["tacos", "spicynuts"], "label": "What do you eat?"},
{"team": ["team a", "team b", "team rocket"], "label": "Where do you belong to?"}
],
"answers": [
{"requirement": ["male", "tacos", "team a"], "message": "one has chosen male, tacos and team a"},
{"requirement": ["female", "tacos", "team a"], "message": "one has chosen female, tacos and team a"}
]
}
A small question occured to me while writing my suggestion. Given your explanation "there are seven questions and five results". Do some outes share results or have none?
To solve the sharing result issue, I though of two ways which I think are the most simple to input and maintain.
This solution might sound silly and too simple. Yet it is easy to maintain and manage. The obvious downfall is the lack of data integrity.
{"requirement": ["male", "spicynuts", "team a"], "message": "one has chosen male, spicynuts and team a"},
{"requirement": ["female", "spicynuts", "team a"], "message": "one has chosen male, spicynuts and team a"}
Another way is to nest requirements (array in array/object), so that one may simply list more requirements with same message. The downfall here is, that even if one never needs it, one had to structure it that way.
{
"requirement": [
["male", "tacos", "team rocket"],
["male", "spicynuts", "team rocket"],
["female", "tacos", "team rocket"],
["female", "spicynuts", "team rocket"]
],
"message": "team rocket rocks my socks!"
}
In the end I decided to let the user decide and support both methods and a bination of initial and solution number two. One can structure it like before, one can repeat answers with equal messages or one can nest requirements.
One function in the main code file
//Going to show the result according to the asked questions
showResult: function(){
var tValues = []; //Storing our answers
for(var i=0, j=this.mJSON.questions.length; i<j; i++)
if (this.mJSON.questions[i].value) tValues.push(this.mJSON.questions[i].value)
//Going to store the result text
var tResult = 'No match for ' + tValues.join(',');
//Looping through all requirements to get a match
var tBreak = false; //We use this to double break both loops
for(var i=0, j=this.mJSON.answers.length; i<j && !tBreak; i++){
//The requirements which need to match the values
var tR = this.mJSON.answers[i].requirement;
//We put simple arrays in a nested array to keep the same logic/process
var tRR = (typeof tR[0] === 'string') ? [tR] : tR;
for(var k=0, l=tRR.length; k<l && !tBreak; k++){
//For this we filter all the elements which do not match the requirements
var tF = tValues.filter(function(e){return tRR[k].indexOf(e) === -1})
//If that list is empty, all elements matched and we can stop
if (!tF || tF.length === 0){
tResult = this.mJSON.answers[i].message;
tBreak = true;
}
}
//If that list is empty, all elements matched and we can stop
if (!tF || tF.length === 0){
tResult = this.mJSON.answers[i].message;
break;
}
}
//Now we are going to dislpay the result
var tH = document.createElement('h1');
tH.innerHTML = tResult;
this.mContainer.appendChild(tH)
},
And here is the sample JSON used for testing
{
"questions": [
{"sex": ["male", "female"], "label": "What are you?"},
{"food": ["tacos", "spicynuts"], "label": "What do you eat?"},
{"team": ["team a", "team b", "team rocket"], "label": "Where do you belong to?"}
],
"answers": [
{"requirement": ["male", "tacos", "team a"], "message": "one has chosen male, tacos and team a"},
{"requirement": ["female", "tacos", "team a"], "message": "one has chosen female, tacos and team a"},
{"requirement": ["male", "spicynuts", "team a"], "message": "one has chosen male, spicynuts and team a"},
{"requirement": ["female", "spicynuts", "team a"], "message": "one has chosen male, spicynuts and team a"},
{
"requirement": [
["male", "tacos", "team rocket"],
["male", "spicynuts", "team rocket"],
["female", "tacos", "team rocket"],
["female", "spicynuts", "team rocket"]
],
"message": "team rocket rocks my socks!"
}
]
}
I think it could have been better but here is the start.
Put all logic in array.
http://jsfiddle/1exsro2b/1/
var logics = {
idOfDiv: [{idOfInput: valueOfInput ,name:'asd',gender:'female'} , {name:'bbb'}],
ifn2: [{num:1}],
ifn3: [{gender:'male'}],
ifn4: [{name:'zxc'}]
};
/*
basically give ids to divs that you want to show conditionally starting with ifn and in array put logic [{formEleId: value, ...},{...or logic..}]
*/
var rules = Object.keys(logics);
var divs = $('div[class^=ifn]').hide();
var form = $("#inputs");
updateForm();
form.on('input change', function () {
updateForm();
console.log($('#gender')[0]);
});
function updateForm() {
divs.hide();
rules.forEach(function (k) {
var ele = divs.filter("." + k);
logics[k].forEach(function(l) {
applyRules(l,ele);
});
});
}
function applyRules(l, ele){
var ids = Object.keys(l);
var valid = true;
ids.forEach(function(id){
var input = form.find('#'+id);
if (input.children('input:radio').length>0){
input = input.children('input[type=radio]:checked');
}
if (input.val() != l[id]) valid = false;
});
if (valid) ele.show();
}
Try this:
$('input[type=radio]').change(function(){
var val1=$('input[name="sex"]:checked', '#page1').val()
var val2=$('input[name="food"]:checked', '#page1').val()
if (val1 == "male" && val2== "tacos") {
$('#resultsONE').show();
} else if () {
// do
} else {
// do
}
});
This is just the sample logic, may need some tweak to make it work for you
How about making use of the data attributes to make the process simpler?
<div class="page1" data-answer-div="results-one">
<form class="sampler">
<input type="radio" name="sex" value="male" checked="checked" data-answer="a1" />Male
<input type="radio" name="sex" value="female" data-answer="a2" />Female
</form>
</div>
<div id="results-one">
<div class="a a1">
<p>Congratulations, you are NOT the father</p>
</div>
<div class="a a2">
<p>Congratulations, you are NOT the mother</p>
</div>
</div>
Then, when the input is changed, you could hide any div's with the class .a within the answer-div. So, in the above example, you'd hide the div.a's in #results-one, and then show the div with the corresponding a[n] class.
$('input').change(function () {
var answerDiv = $(this).closest('div').data('answer-div');
$('#' + answerDiv).find('div.a').hide();
$('#' + answerDiv).find('div.' + $(this).data('answer')).show();
});
Here's a fiddle, and here's a fiddle with multiple forms.
While there are many ways to answer this, I'm going to add AngularJS into the mix, mostly because it sort of looks like the library that OP may be looking for (without really asking for it).
angular.module('angularSolution', []).controller('angularController', function($scope) {
// initialize values
$scope.sex = "male";
$scope.food = "tacos";
$scope.hideResultsONE = false;
// function called when a radio button is clicked
$scope.radioChange = function() {
// this could be one line of code, but I find it easier to read using all five lines
if ($scope.sex == "male" && $scope.food == "tacos") {
$scope.hideResultsONE = false;
} else {
$scope.hideResultsONE = true;
}
}
});<!doctype HTML>
<html data-ng-app="angularSolution">
<body data-ng-controller="angularController">
<div class="page1">
<form class="sampler">
<input type="radio" name="sex" value="male" data-ng-model="sex" data-ng-change="radioChange()">Male
<br>
<input type="radio" name="sex" value="female" data-ng-model="sex" data-ng-change="radioChange()">Female
</form>
</div>
<div class="page2">
<form class="sampler">
<input type="radio" name="food" value="tacos" data-ng-model="food" data-ng-change="radioChange()">Tacos
<br>
<input type="radio" name="food" value="spicynuts" data-ng-model="food" data-ng-change="radioChange()">Rotten Spicy Peanuts
</form>
</div>
<div id="resultsONE" data-ng-hide="hideResultsONE">
<!-- one results div is display none by default sample but there would be much more content here -->
<p>Congratulations, you are NOT the father</p>
</div>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>If you wanted to, you could put the expression to determine whether to show or hide the div inside the data-ng-hide attribute, but I prefer it in code, actually. It's less hidden that way.
Basically, this is the same answer as others have given, but AngularJS has two-way data bound the variables. There is many other things AngularJS will do for you, but that is outside the scope of this question.
If you look back to your original code in the question, this is pretty close. The data binding mean that the variables in $scope are already set up with the values, and showing or hiding merely mean setting another variable, not calling a function directly, but all that is really left in the function is the logic that you described.
Instead of using plicated if statements, I would suggest to add a data attribute on your divs which include the bination of selections you require to have that div show.
I have replaced the values with numeric references to keep the code simple, but it works either way.
Hope I got your requirements right.
http://jsfiddle/kxsb00ps/
HTML:
<div class="page">
<form class="sampler">
<input type="radio" name="sex" value="1" />Male
<br/>
<input type="radio" name="sex" value="2" />Female</form>
</div>
<div class="page">
<form class="sampler">
<input type="radio" name="food" value="1" />Tacos
<br/>
<input type="radio" name="food" value="2" />Rotten Spicy Peanuts</form>
</div>
<input id="submitBtn" type="button" value="submit"/>
<div class="results">
<div data-selection="1,1" >
<p>You are a male who likes Tacos</p>
</div>
<div data-selection="2,1">
<p>You are a female who likes Tacos</p>
</div>
<div data-selection="1,2">
<p>You are a male who likes Rotten Spicy Peanuts</p>
</div>
<div data-selection="2,2">
<p>You are a female who likes Rotten Spicy Peanuts</p>
</div>
</div>
JavaScript (using jQuery for selectors):
$("#submitBtn").click(function(){
// create an empty array
var selectedData = [];
// iterate each page
$(".page").each(function(){
// place the selections in an array
selectedData.push($(this).find("input[type=radio]:checked").val());
});
// clear previous results
$(".results > div").hide();
// find the div using the data attribute
$(".results").find("[data-selection='" + selectedData + "']").show();
});
One simple way is to bine the selected values to a div name you want to display. For example if one has the values male and tacos selected the div with the name 'male-tacos' gets displayed.
<html>
<head>
<style>
.result{display: none}
.page{margin: 10px}
</style>
<script>
//Binding the radio change even on all radio boxes contained in page classes
function Init(){
var tL = document.querySelectorAll('.page input[type="radio"]');
for(var i=0, j= tL.length; i<j; i++) tL[i].onchange = function(){evalAnswers()}
};
function evalAnswers(){
//Getting all checked radio buttons
var tL = document.querySelectorAll('.page input[type="radio"]:checked');
//Combining the values to get the result name
var tS = [];
for(var i=0, j=tL.length; i<j; i++) tS.push(tL[i].value);
//Getting the result div
var tR = document.querySelector('[name="' + tS.join('-') + '"]');
//If we have no result for the bination showing the __unhandled named div
if (!tR) tR = document.querySelector('[name="__unhandled"]');
//Hiding all results again (might not be needed if no replay option)
var tL = document.querySelectorAll('.result');
for(var i=0, j=tL.length; i<j; i++) tL[i].style.display = 'none';
//Showing the result
if (tR) tR.style.display = 'block';
}
</script>
</head>
<body onload = 'Init()'>
<!-- page1 looks more like an id than a class -->
<div class = 'page' id = 'page1'>
<input type = 'radio' name = 'sex' value = 'male' checked>Male
<br>
<input type = 'radio' name = 'sex' value = 'female'>Female
</div>
<div class = 'page' id = 'page2'>
<input type = 'radio' name = 'food' value = 'tacos' checked>Tacos
<br>
<input type = 'radio' name = 'food' value = 'spicynuts'>Spicynuts
</div>
<div class = 'page' id = 'page3'>
<input type = 'radio' name = 'color' value = 'red' checked>Red
<br>
<input type = 'radio' name = 'color' value = 'blue'>Blue
</div>
<!-- the name is the binations of answers, with this we can select the correct div -->
<div class = 'result' name = 'male-tacos-red'>
male-tacos-red
</div>
<div class = 'result' name = 'female-tacos-blue'>
male-tacos-red
</div>
<div class = 'result' name = '__unhandled'>
unhandled result
</div>
</body>
</html>
http://fiddle.jshell/31mebxkk/
Like this one may merely change the HTML without worrying about the script itself.