We Keep Coding

Displaying a list of checkboxes and text field after radio is checked [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a form that has the following fields:
<div>
<input name="department" type="radio" value="1" required >
<label for="Orchestra">Orchestra</label>
</div>
<div>
<input name="department" type="radio" value="2">
<label for="Band">Band</label>
</div>
What I would like to be able to do is to display different checkboxes and comment text fields ONLY if the radio button for "Band" is checked. If this is unchecked then, the checkboxes should go away. I found several examples online, but for some reason I can't get them to work. The problem must be that I do not know Javascript or JQuery :( Any help would be appreciated.
I have tried different things that I have seen on stackOverflow and other websites, but I am so clueless about Javascript that I can't get it to work.

I've created a commented fiddle to help you accomplish what you ask, but also clue you in on what's actually going on. I recommend really diving into JavaScript/JQuery with the many resources available online, but for now, I hope my comments will help get you started.
The main takeaway here, is we use JavaScript to "listen" to whether or not the input in question is selected, not selected—based on that value, we can dictate what our view will look like—in this case, hiding or showing element(s).
JS
$(function () {
// Create selectors for relevant DOM elements
var $Department = $('input[name="department"]');
var $BandSelected = $('#BandSelected');
// Create a function that you pass
// the value of the input element in question.
// Return TRUE/FALSE based on equality to 2,
// the `value` associated with the 'Band' input
function isBandsSelected(val) {
return val == 2;
}
// Attach an event listener on `click' of inputs
$Department.click(function () {
// Assign a variable to the function that determines if the input
// we click on is 'Band' (has a value of 2)
var showBand = isBandsSelected($(this).val());
// If `showBand` returns TRUE, show our `BandSelected` div
if (showBand) {
$BandSelected.show();
// If `showBand` returns FALSE, show our `BandSelected` div
} else {
$BandSelected.hide();
}
});
});
Markup
<div>
<input name="department" type="radio" value="1" required>
<label for="Orchestra">Orchestra</label>
</div>
<div>
<input name="department" type="radio" value="2">
<label for="Band">Band</label>
</div>
<div id="BandSelected" class="hidden">
Band is selected
</div>
Demo Fiddle: http://jsfiddle.net/4x1ybqyv/

Making certain questions appear on an html form through jQuery?

I'd like to say thanks to the community. You've been a tremendous help so far.
Here's my latest question: I'm designing an online submission form, and one of the questions is a yes/no question with radio buttons. If the lead answers yes, I want a certain question to display. If they answer no, a different question will be displayed instead.
I looked at a few other answers and was able to scrape together some jQuerym but it doesn't seem to be working for me. Here is my javascript and a jsfiddle with the rest of my code.
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'yes') {
$('#ifyes').show();
} else {
$('#ifno').show();
}
});
});
http://jsfiddle.net/yrktj4kz/
Any help would be appreciated!

Looking at the fiddle, you should use
$('.ifyes').show();
and
$('.ifno').show();
instead.
You were using the id's of the input fields to show the element instead of the class of the wrapping div to which the display: hidden; style was applied.

I have updated your code
HTML:
<li>
<label for="coverage">K. Do you have current coverage?</label>
<input type="radio" name="choice" class="radio-toggle" data-target=".ifyes" data-target-group=".ifdiv" /> Yes
<input type="radio" name="choice" class="radio-toggle" data-target=".ifno" data-target-group=".ifdiv" /> No
</li>
<li>
<div class="ifyes ifdiv">
<label for="ifyes">When does the policy expire?</label>
<input type="text" id="ifyes" name="ifyes" value="" />
</div>
<div class="ifno ifdiv">
<label for="ifno">When do you need the policy to take effect?</label>
<input type="text" id="ifno" name="ifno" value="" />
</div>
</li>
and JS:
$(document).ready(function(){
$('.radio-toggle').click(function() {
$($(this).data('targetGroup')).hide();
$($(this).data('target')).show();
});
});
Obviously you need to call the jQuery library.
This is the complete and updated fiddle: http://jsfiddle.net/yrktj4kz/1/
Note that i'm using html data attribute to optimize the js code.

OnType Javascript but want the type to match a word [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am working on an input box for a promo code. We have several promo codes. However, on one promo code, if the user types in "springchicken", then I need it to open, or toggle an additional radio input for a selection. Is that possible? I am thinking I could use onType, but I don't really know how to write that. See example below. I need it to so something like that but the words that are typed must match "SpringChicken". How can I write that?
<input type="text" name="promo" id="promo" value="" size="22" placeholder="Enter Promo Code" ontype="document.getElementsByClassName('promoradio')[0].style.display='block';" />
<!--Need the following DIV to appear once "SpringChicken" is entered on the fly-->
<div class="promoradio">
<input type="radio" name="promopkg" value="1" /><label>Promo Package #1</label>
<input type="radio" name="promopkg" value="2" /><label>Promo Package #2</label>
</div>

Try this jquery solution: (Edited so it won't be case sensitive)
<script type="text/javascript">
$(document).ready(function () {
$("#promo").keyup(function() {
var value = $(this).val().toLowerCase();
if (value == "springchicken") {
$(".promoradio").show();
} else {
$(".promoradio").hide();
}
});
});
</script>

There are a couple things wrong here.
First, there is no ontype event for javascript. You'll want onkeypress (for when they key goes down) or onkeyup for when the key goes up.
Second, inline javascript is ugly and bad practice. Use something like this:
var x = document.getElementById("input element");
x.onkeyup = function() {
var word = x.innerHTML;
if (word.toUpperCase() === "SPRINGCHICKEN") { //if you're not worried about case sensitivity or unicode
document.getElementsByClassName('promoradio')[0].style.display='block';
}
}
Assuming the class promoradio has display:hidden here initially.

Try this,
<input type="text" name="promo" id="promo" value="" size="22" placeholder="Enter Promo Code" />
<!--Need the following DIV to appear once "SpringChicken" is entered on the fly-->
<div class="promoradio">
<input type="radio" name="promopkg" value="1" /><label>Promo Package #1</label>
<input type="radio" name="promopkg" value="2" /><label>Promo Package #2</label>
</div>
<script>
var textToMatch = "springchicken";
function matchWord(e){
if(document.getElementById('promo').value.trim().toLowerCase() == textToMatch){
document.getElementsByClassName('promoradio')[0].style.display='block';
}else{
document.getElementsByClassName('promoradio')[0].style.display='none';
}
}
document.getElementById('promo').onkeyup = matchWord;
</script>
css:
.promoradio{
display:none;
}
Check fiddle
Hope it helps.

Change value of checkbox based on value of other form [duplicate]

This question already has answers here:
How to implement "select all" check box in HTML?
(31 answers)
Closed 9 years ago.
I'm trying to have a checkbox called 'All' that when checked, also checks the rest of the checkboxes in my form. I have basically no javascript experience so sorry if this is really basic. I patched this together from looking at posts like this and this.
<script type="text/javascript">
function checkIt(checkbox)
{
document.GetElementById("1").checked = true;
document.GetElementById("2").click();
}
</script>
My HTML looks like this:
<form>
<input type="checkbox" id="A" onclick="checkIt(this)">All<br></input>
<input type="checkbox" id="1">One<br></input>
<input type="checkbox" id="2">Two<br></input>
</form>
How can I get checkboxes 1 and 2 to change when I select checkbox All? Thanks.

Since you are not familiar with javascript, I suggest looking into the jQuery javascript library. Many coders find it simpler to learn/use, and there is no debate that it requires MUCH less typing.
Here are some introductory jQuery tutorials if you are curious.
To solve your problem, I added a class to the checkboxes that you wish to automatically check/uncheck, and used that class to check/uncheck the boxes.
Working jsFiddle here
HTML:
<form>
<input type="checkbox" id="A">All<br></input>
<input type="checkbox" class="cb" id="1">One<br></input>
<input type="checkbox" class="cb" id="2">Two<br></input>
</form>
JQUERY:
$('#A').click(function() {
// alert($(this).prop('checked'));
if ($(this).is(':checked') == true) {
$('.cb').prop('checked', true);
}else{
$('.cb').prop('checked', false);
}
});
Note that this solution uses jQuery, so you need the jQuery library loaded (usually put this line in your head tags):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

How To Ensure A CheckBox Is Checked Using Javascript

This is my html Code:
<input type="checkbox" name="test" id="test" />
Here i want to check if the checkbox test is checked or not when clicking on that checkbox.
That means there have function to call when clicked the checkbox and in that function check the test is checked or not using javacsript.
How can i do this?

<input type="checkbox" name="test" id="test" onClick="check(this)" />
In your script : function check(element) {
alert(element.checked);
} Hope this may help you, if not let me know.

The answers of this question kind of make me feel down. I thought that one thing jQuery learned to everybody was at least to not use inline event handlers for the sake of unobtrusive javascript.
With unobtrusive javascript, cross-browser, here is a way to do it:
document.getElementById('test').onclick = function() {
alert(this.checked)
}