Alter DIV on Checkboxes - javascript

i want to have a series of yes/no questions, & depending on the RADIO BUTTON, the answer / text appears on the appropriate DIV.
I have found one answer - here and this does what i am after.
My question is, how easy is it to alter this so I can have MULTIPLE sets of radio buttons.
Ie
<input type="radio" name="type" value="tuser1" id="tuser1" /> (question 1)
<input type="radio" name="type" value="tuser2" id="tuser2" /> (question 2)
<input type="radio" name="type" value="tuser3" id="tuser3" /> (question 3) etc.
is it easy to alter the function, to accept numeric references & to alter the approriate DIV set ?
PS - i assume i can have text of multiple lines/paragraphs in each DIV.
PPS: my ultimate aim is to combine the "visable" divs, into a master div underneath (with a blank line in each div reply).
IE,
Q1 (yes/no), (show answer to q1 "yes")/(show answer to q1 "no")
master div:-
show Q1 result.
show Q2 result.
show Q3 result.
etc...
i'll put the master div inside a TEXTAREA form - to send to another website for processing - on my server.
i want the master div to preserve any new-lines / formattng of the answers (if the answer is on several lines).

Wrap your each question set in div. By this you can easily group your question. You can use class and data attributes.
Try this code,
HTML :
<div id="Qset1">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" checked />
<input type="radio" name="type" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields1</div>
<div id='optdeliverer' class="no">//some other input fields1</div>
</div>
<div id="Qset2">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" checked />
<input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields2</div>
<div id='optdeliverer' class="no">//some other input fields2</div>
</div>
<div id="Qset3">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" checked />
<input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields3</div>
<div id='optdeliverer' class="no">//some other input fields3</div>
</div>
JS :
$(document).ready(function () {
$('input[type=radio]').change(function () {
if ($(this).attr('data-id', 'yes').is(':checked')) $(this).closest('div').find('.yes').toggle();
if ($(this).attr('data-id', 'no').is(':checked')) $(this).closest('div').find('.no').toggle();
});
});
SEE THIS FIDDLE DEMO

Demo find here
Remove checked property from radio buttons
I have add parent div for wrap questions called questions
Named textarea id as answers
HTML
<div id="questions">
<div id="Qset1">Question number 1
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" />Yes
<input type="radio" name="type" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset2">Question number 2
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" />Yes
<input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset3">Question number 3
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" />Yes
<input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />No
</div>
</div>
<textarea id="answers"></textarea>
Added some css
#questions,#answers{
width:200px;
display: inline-block;
vertical-align: top;
}
#answers{
border:1px soied #000;
height:200px;
width:300px;
}
Here is the Jquery
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
$(document).ready(function () {
$('input[type=radio]').click(function () {
var ans="";
$('input[type=radio]').each(function(){
if($(this).attr("checked"))
{
var question=$(this).parent().contents().get(0).nodeValue;
ans=ans + question + $(this).val() + "\r" ;
}
$("#answers").html(ans);
});
});
});

Related

Show and hide html components based on condition without using div

I'm working on Angular JS project. It has three radio buttons as follows.
<div class="sys-form__field"
layout="row">
<label class="sys-label sys-label--radio" flex flex-gt-xs="33">Choices</label>
<input type="radio"
ng-model="booking.model.foodType"
value="vegetarian"
class="sys-input sys-input__radio"
title="" />
<md-button ng-click="booking.setRadio('foodType', 'vegetarian')">Vegetarian</md-button>
<input type="radio"
ng-model="booking.model.foodType"
value="vegan"
class="sys-input sys-input__radio"
title="" />
<md-button ng-click="booking.setRadio('foodType', 'vegan')">Vegan</md-button>
<input type="radio"
ng-model="booking.model.foodType"
value="nonvegetarian"
class="sys-input sys-input__radio"
title="" />
<md-button ng-click="booking.setRadio('foodType', 'nonvegetarian')">Non Vege</md-button>
</div>
These are the food choices and based on what user selects I want to show another radio button sets. This radio buttons html as follows
<div class="sys-form__field" ng-show="booking.foodSizeChoice()"
layout="row">
<input type="radio"
ng-model="booking.model.foodSize"
value="small"
title="" > Small
<input type="radio"
ng-model="booking.model.foodSize"
value="medium"
title="" > Medium
<input type="radio"
ng-model="booking.model.foodSize"
value="large"
title="" > Large
If user selects vegetarian , I only want to show small radio button. If user selects Non vegetarian I need to show only small and medium buttons. like wise how do I that?
At the moment I try like this
this.foodTypeChoice=()=> {
const check2 = ()=>this.model.binType == 'small';
return check2(); }
But it shows all the radio buttons. Please help
Can you try something like this?
<input type="radio"
ng-model="booking.model.foodSize"
value="small"
title=""
ng-show="booking.model.foodType == 'vegetarian'"> Small
<input type="radio"
ng-model="booking.model.foodSize"
value="medium"
title=""
ng-show="booking.model.foodType == 'nonvegetarian'"> Medium
<input type="radio"
ng-model="booking.model.foodSize"
value="large"
title=""
ng-show="booking.model.foodType == 'nonvegetarian'"> Large
First of all, you should avoid putting functions in show/hide/if directives, it slows the application; you should use logical statements or boolean variables. You can use show/hide statements directly on inputs
<input
ng-show="booking.model.foodType === 'vegetarian' || booking.model.foodType === 'nonvegetarian'"
type="radio"
ng-model="booking.model.foodSize"
value="small"
title=""> Small
<input
ng-show="booking.model.foodType === 'nonvegetarian'"
type="radio"
ng-model="booking.model.foodSize"
value="medium"
title=""> Medium
<input
type="radio"
ng-model="booking.model.foodSize"
value="large"
title=""> Large
Apart from that you can use additional variables to store statements in them and update them whenever user clicks on buttons to change food type

Progress bar not working on HTML page

I'm using javascript and HTML to create a questionnaire form. My idea was to inform the user of how many questions they've got to go. I've tried a couple of ways of getting a progress bar to work which has led me to the code below. I want the bar to progress after the user has selected an answer to a question.
This is the javascript code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
var progress = 0;
//need this to check if the question has not been answered before
var questions = {
"q1": 0,
"q2":0,
"q3":0,
"q4":0
}
$( function() {
$("#progressbar-1").text(progress)
$("input, select").change( function() {
el_name = $(this).attr("name");
switch (this.nodeName.toLowerCase()) {
case "select":
field =$("[name='"+el_name+"']");
val = (field.val() === "" || !field.val()) ? null: field.val();
break;
case "input":
field =$("[name='"+el_name+"']:checked");
val = field.length;
break;
}
if (val) {
if (!questions[el_name]) {
progress = progress +1;
questions[el_name]=1
}
} else {
questions[el_name]=0
progress = (progress > 0)?progress-1:0;
}
$("#progressbar-1").text(progress)
})
})
</script>
This is the HTML code.
<div class="container-main bg-5">
<button style="float:left" onclick="goBack()">Go Back</button>
<h1>What IT sector could suit you</h1>
<p>Take the questionnaire below!</p>
<form id="quiz">
<!-- Question 1 -->
<h2>Do you enjoy fixing things</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" id="q1" value="c1">
Yes
</label><br />
<label>
<input type="radio" name="q1" id="q1" value="c2">
No
</label><br />
<label>
<input type="radio" name="q1" id="q1" value="c3">
Maybe
</label><br />
<!-- Question 2 -->
<h2>Do you enjoy problem solving?</h2>
<!-- Here are the choices for the second question. Notice how each input tag has the same name (q2), but a different name than the previous question. -->
<label>
<input type="radio" name="q2" value="c2">
Yes
</label><br />
<label>
<input type="radio" name="q2" value="c1">
No
</label><br />
<label>
<input type="radio" name="q2" value="c3">
Unsure
</label><br />
<!-- Question 3 -->
<h2>Do you enjoy maths?</h2>
<!-- Choices for the third question -->
<label>
<input type="radio" name="q3" value="c2">
Yes
</label><br />
<label>
<input type="radio" name="q3" value="c1">
No
</label><br />
<label>
<input type="radio" name="q3" value="c3">
Unsure
</label><br />
<!-- Question 4 -->
<h2>Do you often take thing apart to rebuild them?</h2>
<!-- Choices for the fourth question -->
<label>
<input type="radio" name="q4" value="c1">
Yes
</label><br />
<label>
<input type="radio" name="q4" value="c2">
No
</label><br />
<label>
<input type="radio" name="q4" value="c3">
I have never done it before so i don't know
</label><br />
<!--Question 5 -->
<h2>Hardware or Software?</h2>
<label>
<input type="radio" name="q5" value="c1">
Hardware
</label><br />
<label>
<input type="radio" name="q5" value="c2">
Software
</label><br />
<button type='button' id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
</form>
<div id ="progressbar-1"></div>
</div>
The number is increasing but no CSS is happening. I feel like i'm not doing something glaringly obvious.
I have updated your progress bar HTML, JavaScript code and add some CSS.
Progress Bar HTML:
<div class="progress_dashv2">
<div id="progressbar-1"> </div>
</div>
JQuery Code:
var total_questions = 4;
// progress bar Calculation
var result = progress / total_questions;
result = result * 100;
$("#progressbar-1").css({'width':result+'%','background-color':'red'});
$("#progressbar-1").text(progress);
CSS Classes :
.progress_dashv2 {
margin-top: 0px;
background: #464646;
width: 100%;
float: left;
border-radius: 3px;
height: 30px;
}
#progressbar-1{
line-height: 11px;
padding: 10px;
border-radius: 3px;
}
Please refer to the following link (Your Example):
https://jsfiddle.net/fd8sntu8/1/

Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

JavaScript -- is this radio button checked?

I'm trying to get the data on the user's selection from a radio form. Here is what I have tried.
<form id="office">
<label id="ques1"> question 1</label>
<div class="q1 wrong q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
<div class="q1 wrong q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
<div class="q1 wrong q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
<div class="q1 right q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>
<br/>
<input type="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script>
var answersQ01 = document.getElementsById(q1a1).value;
function checkFunction()
{
if (answersQ01.checked) {/*here i would like to know if it's checked or not*/}
};
Which doesn't seem to be working. Any ideas on how to approach this?
I would rather, if possible, have my answers in HTML and JavaScript since I don't know PHP or jQuery.
Thanks a lot!
P.S
I've put each input in a div, so that I can give them separate designs in CSS.
Try this code, I will improve it if it doesn't work for you. (code snippets don't let you use the form tag).
window.onload = function() {
document.getElementById('submit').onclick = function() {
if (document.getElementById('q1a1').checked == true) {
console.log('checked');
} else {
console.log('not checked');
}
};
};
<!--<form id="office">-->
<label id="ques1">question 1</label>
<div class="q1 wrong q1a1">
<input type="radio" name="question1" id="q1a1" value="q1a1" />Answer1
<br/>
</div>
<div class="q1 wrong q1a2">
<input type="radio" name="question1" value="q1a2" />Answer2
<br/>
</div>
<div class="q1 wrong q1a3">
<input type="radio" name="question1" value="q1a3" />Answer3
<br/>
</div>
<div class="q1 right q1a4">
<input type="radio" name="question1" value="q1a4" />Answer4
<br/>
</div>
<br/>
<input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" />
<!--</form>-->
You can use document.querySelector to get the checked radio button.Here is the snippet for you
function checkFunction(){
var checkedValue='';
var getCheckedButton= document.querySelector('input[name="question1"]:checked');
if(getCheckedButton !==null){
checkedValue = getCheckedButton.value;
}
console.log(checkedValue);
}
Here is DEMO

Javascript - formular - nested dynamic appendchild functions

I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)

Categories