Enabling a textarea based on one of the radiobutton response

Enabling a textarea based on one of the radiobutton response - javascript

I am trying to enable textarea based on selection of one of the four radio buttons.
<div id="Response">
<label><input type="radio" name="Radi4.19" value="Y" id="Radio_4.19_0">Yes</label>
<label><input type="radio" name="Radi4.19" value="N" id="Radio_4.19_1">No</label>
<label><input type="radio" name="Radi4.19" value="NS" id="Radio_4.19_2">Not Seen</label>
<label><input type="radio" name="Radi4.19" value="NA" id="Radio_4.19_3">Not Applicable</label>
</div>
<span id="responseSupplement">
<div id="Comment">
<label for="Comment">Comment:</label>
<textarea name="comment" rows="6" style="width: 530px;" id="Comm4.19" placeholder="Enter comments here ..."></textarea>
</div>
<div id="Observation">`
<label for="Observation">Observation:</label>`
<textarea name="observation" rows="6" disabled="disabled" id="Obs4.19" style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
</div>
</span>
I was able to create desired functionality based on binary choice:
<script type="text/javascript">
function enable(val)
{if(val)document.f1.feedback.setAttribute("disabled",val)
else
document.f1.feedback.removeAttribute("disabled",val)}
</script>
<form name="f1" action="" >
<input type="radio" name="rating" value="1" id="green" onclick="enable(0)"/><label for="green">Positive</label><br />
<input type="radio" name="rating" value="0" id="red" onclick="enable(1)" /><label for="red">Negative</label><br />
<textarea name="feedback" rows="6" disabled style="width: 50%;" ></textarea>
</form>

You need to read the checked or unchecked status of the clicked radio button, for that you can pass this as the parameter of your event listener.
http://jsfiddle.net/m5n6s/

Related

Show hide content based on check boxes, if one check box checked disable another check boxes

I have three check boxes, first one will be checked by default and content will display, corresponding to first check box.
if I checked second checked box, first check box will unchecked and content will change, corresponding to second check box.
If I checked third checkbox, rest of the check boxes will unchecked and content will change, corresponding to third check box.
Below is the my code, but some how its not working
<fieldset class="question">
<label for="coupon_question">Show India content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show Japan content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show China content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">India Content:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Japan Content:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">China Content:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
Below is my jquery
<script>
$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show();
} else {
$(".answer").hide();
}
});
</script>

1 way you can solve it is by getting the index of the checkbox, and use that to determent what answer shall be shown.
$(".answer").hide();
$(".coupon_question").click(function() {
var i = $(this).index(".coupon_question");
if ($(this).is(":checked")) {
$(".answer").eq(i).show();
} else {
$(".answer").eq(i).hide();
}
});
Demo with checkbox
$(".answer").hide();
$(".coupon_question").click(function() {
var i = $(this).index(".coupon_question");
if ($(this).is(":checked")) {
$(".answer").eq(i).show();
} else {
$(".answer").eq(i).hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Show India content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show Japan content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show China content</label><input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">India Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Japan Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">China Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
Demo with radio
$(".answer").hide();
$(".coupon_question").click(function() {
var i = $(this).index(".coupon_question");
$(".answer").hide();
$(".answer").eq(i).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Show India content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show Japan content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" />
</fieldset>
<fieldset class="question">
<label for="coupon_question">Show China content</label><input class="coupon_question" type="radio" name="coupon_question" value="1" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">India Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Japan Content:</label>
<input type="text" name="coupon_field" />
</fieldset>
<fieldset class="answer">
<label for="coupon_field">China Content:</label>
<input type="text" name="coupon_field" />
</fieldset>

I want to dynamically get values of all checked radio buttons in certain div on a click of button

I want to dynamically get values of all checked radio buttons in certain div on a click of button .add
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
And here is .js function that should get the values of radio buttons and append it to list, but im not getting any response.
$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
var selectedOptions = $(this).parent().text();
$(".orderOptions").last().append("<li> +selectedOption+ </li>");
});
});
So whole process is: .click (get values of all checked radio buttons from html div) and save it to the list.

In your click event you wrote:
$(this).siblings("fieldset").children("input[type=radio]:checked")
this is wrong because this here is reference to the button not the div which you want to get the input inside it.
so you have to use the div itself :
$('#call1 fieldset input[type=radio]:checked')
then you can simply get the checked value by this.value and append it to any other div.
$('.add').click (function(){
$('#call1 fieldset input[type=radio]:checked')
.each(function () {
$('.orderOptions').append("<li>" +this.value+ "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

This is working
$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
var selectedOptions = $(element).prev("label").text();
$(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});
Html
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<ul class="orderOptions">
</ul>
</div>

If you want to address a fieldset relative to your "add" button, then you can use something like this:
$('.add').click (function(){
...
$(this).siblings('div').find(':checked')
...
});
This works, because not your <fieldset> but the <div class="option1"> is the sibling of the pressed button. Once you have found the right div with the fieldset within, the selector for the checked options can be simplified to :checked, since it searches within the <div> ("write less do more ...").
$('.add').click (function(){
$('.orderOptions').append('<hr><ul>'+
$(this).siblings('div').find(':checked')
.map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

Show/Hide IDs with multiple radio buttons and IDs

So I have run into a little problem. I am making a Contact Form that changes according to the Users needs.
This is my html code. My goal is to First, Hide most of the Content with the first set of raio buttons. I actually managed to get that with this Javascript:
$(function() {
$('#report').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
} else {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
}
})
$('#booking').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
} else {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
}
})
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$('#privateprices').hide();
$('#companyprices').hide();
} else {
$('#privateprices').show();
$('#companyprices').show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content" align="center">
<div class="ui-content-spacer">
<h3 class="ui-bar ui-bar-a ui-corner-all ui-content-spacer">
Booking Form
</h3>
<div class="ui-body ui-body-a ui-corner-all ui-content-spacer">
<form method="post" action="">
<div class="form-field-contain">
<fieldset data-role="controlgroup">
<legend>While the page is still under developement please define your inquiry: </legend>
<input type="radio" name="settings" id="report" value="report">
<label for="report">Bug Report</label>
<input type="radio" name="settings" id="booking" value="booking" checked="checked">
<label for="booking">Booking</label>
</fieldset>
</div>
<div class="form-field-contain ui-field-contain">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="" placeholder="First Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" value="" placeholder="Last Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="email">E-Mail</label>
<input type="email" name="email" id="email" value="" placeholder="E-Mail...">
</div>
<div class="form-field-contain ui-field-contain" id="phonenumber">
<label for="tel">Phone:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="Phone #...">
</div>
<div class="form-field-contain ui-field-contain" id="dateofplay">
<label for="date">Date of event:</label>
<input type="date" name="date" id="date" value="" placeholder="Please choose a Date">
</div>
<div class="form-field-contain ui-field-contain">
<label for="message">Write a quick Message:</label>
<textarea cols="40" rows="8" name="message" id="message" placeholder="Your Message here..."></textarea>
</div>
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="studentprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="studentprice" id="studentminimal" value="studentminimal" checked="checked">Minimal</label>
<label><input type="radio" name="studentprice" id="studentsoundonly" value="studentsoundonly">Sound Only</label>
<label><input type="radio" name="studentprice" id="studentsoundandlight" value="studentsoundandlight">Sound and Light</label>
<label><input type="radio" name="studentprice" id="studentpartypackage" value="studentpartypackage">Total Party Package</label>
<label><input type="radio" name="studentprice" id="studentcustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="privateprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="privateprice" id="minimal" value="150" checked="checked">Minimal</label>
<label><input type="radio" name="privateprice" id="soundonly" value="200">Sound Only</label>
<label><input type="radio" name="privateprice" id="soundandlight" value="300">Sound and Light</label>
<label><input type="radio" name="privateprice" id="partypackage" value="400">Total Party Package</label>
<label><input type="radio" name="privateprice" id="custom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="companyprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="companyprice" id="companyminimal" value="200" checked="checked">Minimal</label>
<label><input type="radio" name="companyprice" id="companysoundonly" value="300">Sound Only</label>
<label><input type="radio" name="companyprice" id="companysoundandlight" value="400">Sound and Light</label>
<label><input type="radio" name="companyprice" id="companypartypackage" value="500">Total Party Package</label>
<label><input type="radio" name="companyprice" id="companycustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="customsetup">
<fieldset data-role="controlgroup" id="customsetup">
<legend>Custom choices:</legend>
<label><input type="checkbox" name="speakers" id="speakers" value="">Speakers</label>
<label><input type="checkbox" name="subwoofer" id="subwoofer" value="">Subwoofer</label>
<label><input type="checkbox" name="lighting" id="lighting" value="">Lighting</label>
<label><input type="checkbox" name="strobe" id="strobe" value="">Strobelight</label>
<label><input type="checkbox" name="fog" id="fog" value="">Fogmachine</label>
<label><input type="checkbox" name="table" id="table" value="">Table</label>
</fieldset>
</div>
<div class="form-field-contain">
<input type="submit" name="submit" value="Submit" data-inline="true">
<input type="reset" name="reset" value="Reset" data-inline="true">
</div>
</form>
</div>
</div>
</div>
I think the problem is that, because the first show/hide function is hiding/showing the ID's it overrides any following function. I can't wrap my head around how I can continue the code so the radio buttons that are not required are hidden.
So if,
#student is selected, #privateprices and #companyprices choices are hidden
#private is selected, #studentprices and #companyprices choices are hidden
#company is selected, #studentprices and #privateprices choices are hidden
Is it even possible or is there a easier more effective method of achieving this? Especially when I start creating the php for the form? Thanks in advance
EDIT: The last piece of code in the Javascript is my attempt hide the first set of radiobuttons.

You can check which radio button is selected in page loading and show / hide the panels. Please see working fiddle here:
https://jsfiddle.net/ranjitsachin/Leav016c/2/
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$("#studentprices").show();
$('#privateprices, #companyprices').hide();
}
});
$('#private').on('click', function() {
if ($(this).is(':checked')) {
$("#privateprices").show();
$('#studentprices, #companyprices').hide();
}
});
$('#company').on('click', function() {
if ($(this).is(':checked')) {
$("#companyprices").show();
$('#studentprices, #privateprices').hide();
}
});

Here is a working pen on how I would do it. http://codepen.io/anon/pen/jBryOa
In this pen, i added the classes of report-group and booking-group to the respective divs, added a class of hide-group to the css with a setting of display: none; and then add and remove the class hide-group based on which radio button is checked. I also added the class hide-group in the html to the div's that need to be initially hidden.
I did not add the groups to every div. just enough to show you what you need to do.

nest radio button selection - javascript

I am working on my personal site and I am trying to nest my radio buttons.
I know I am supposed to have javascript running to do what I need it to do but I cant get a clear answer. What I am trying to do is as follows.
Options number 2 and 6 both have sub options to go with them. But I want that if i select 1 or 3-5 or 7 then the user cannot select any of the subs. and if the user selects a sub by mistake and tries to select one of the aforementioned numbers then it will clear the sub selection. please help. Or at lease can some one point me in the right direction? thanks so much.
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<label class="five six">Section</label>
<div class="seven">
<label class="ten">
<input value="option_1" name="radios" type="radio" />
option 1</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_2" name="radios" type="radio" />
option 2</label>
<br>
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_3">
Sub 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_3" name="radios" type="radio" />
option 3</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_4" name="radios" type="radio" />
option 4</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_5" name="radios" type="radio" />
option 5</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_6" name="radios" type="radio" />
option 6</label>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_7" name="radios" type="radio" />
option 7</label>
</div>
</div>
</div>
</div>
</div>

Here's a little something using Jquery that might work if I understood your requirements correctly. The HTML is a dumbed down version of yours just to demonstrate the script.
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("input[type=radio]").on("change",function(){
if($(this).hasClass("two") || $(this).hasClass("six") || $(this).hasClass("sub"))
$(".sub").removeAttr("disabled");
else
$(".sub").attr("checked",false).attr("disabled","disabled");
});
});
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" class="one" value=""> Option 1<br>
<input type=radio name="lvl1" class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" class="three" value=""> Option 3<br>
<input type=radio name="lvl1" class="four" value=""> Option 4<br>
<input type=radio name="lvl1" class="five" value=""> Option 5<br>
<input type=radio name="lvl1" class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle to check online: https://jsfiddle.net/bds87fjt/
The same solution as above using pure Javascript:-
<!doctype html>
<html>
<head>
<script>
function disableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].checked=false;
sub[i].disabled=true;
}
}
function enableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].disabled=false;
}
}
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" onclick=disableSub(); class="one" value=""> Option 1<br>
<input type=radio name="lvl1" onclick=enableSub(); class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="three" value=""> Option 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="four" value=""> Option 4<br>
<input type=radio name="lvl1" onclick=disableSub(); class="five" value=""> Option 5<br>
<input type=radio name="lvl1" onclick=enableSub(); class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" onclick=disableSub(); class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle for above: https://jsfiddle.net/0omtop0t/
And here's another neat little solution using just HTML and CSS: http://jsfiddle.net/NhXUV/
Not sure, it'll work in your case though. Worth checking out.

I'd definitely go with JavaScript for this one.
Basically, you could write a function that would be called whenever a radio button from a div of the class, lets call it gotNestedStuff, has his selection changed. The toggle will show/hide the div with the class nestedStuff that contains the sub-options that can only be selected if the main option is.
Here's the basic function (with jQuery):
<script type="text/javascript">
//let's hide the nested stuff on page load
$(document).ready(function() {
$('.nestedStuff').hide();
});
//on click on an element that has class "gotNestedStuff", show it's hidden content
$('.gotNestedStuff .option').on('change', function(e) {
console.log($(e.relatedTarget));
$(e.target).parent('.gotNestedStuff').children('.nestedStuff').toggle();
});
</script>
Working with this HTML for example :
<div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="1">Option 1
</div>
<div class="optionContainer gotNestedStuff">
<input class="option" type="radio" name="option" value="2">Option 2<br>
<div class="optionContainer nestedStuff">
<input class="option" type="radio" name="option" value="2.1">Option 2.1<br>
<input class="option" type="radio" name="option" value="2.2">Option 2.2<br>
</div>
</div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="3">Option 3<br>
<div>
</div>
You could also call a function "onclick" from your element that would validate if an item with nested stuff hidden is selected, that it should show it to the user.
Ex. <input type="radio" onclick="myfunction()" />

Check if any radio button is checked, than execute code (multiple sets of buttons)

I made a multiple choice test with parsing XML of questions and answers using PHP. The generated HTML looks something like this:
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
Categories are named "Category" + a number starting from 0 (category0, category1...)
The answer is stored in a hidden field and is exactly the same as the correct options value.
I created a JS function that checks if the selected answer is correct or not, and colors the background of set div according. The function is triggered onclick in each radio input.
I need help with creating a statistic/score of answers for all questions and for each category separately.
At the beginning the score would be 0 of all possible answers.
If I would click on the correct choice of first question the score would be 1 of all possible questions, and 1 of all questions of first category.
I would like to achive this live (when any button is clicked), without posting the form(no POST/GET).
Hope I described my problem so you can understand it, if any clarification is needed, please let me know.
So far I only worked with JS, but any solutions in jQuery as also welcome.

When a radio button is clicked, execute the same logic you already have to determine if answers are correct, but call it for EACH of your "categories", NOT just the one that was clicked.
Start a variable at 0 and increment it by 1 each time you find a correct answer. Then, after your loop, you can update your "Correct Answers" message with the variable's value. This won't require any postbacks.

You could do something like this
$('input[type="radio"]').change( function(){
var answer = $(this).siblings('.answer').val();
if ($(this).val() == answer) {
var score = $(this).parents().siblings('.score').val();
score++;
$(this).parents().siblings('.score').val(score)
console.log(score);
} else {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<input type="hidden" class="score" value="0">
<p></p>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<input type="hidden" class="score" value="0">
<p><p>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>

We Keep Coding

JavaScript is the programming language of the Web.

Enabling a textarea based on one of the radiobutton response - javascript

You need to read the checked or unchecked status of the clicked radio button, for that you can pass this as the parameter of your event listener. http://jsfiddle.net/m5n6s/

Related

Show hide content based on check boxes, if one check box checked disable another check boxes

I want to dynamically get values of all checked radio buttons in certain div on a click of button

Show/Hide IDs with multiple radio buttons and IDs

nest radio button selection - javascript

Check if any radio button is checked, than execute code (multiple sets of buttons)

Categories

Resources