I want to make it so when I press a button, it will print a different number depending on which button I press. I want the buttons to look the same. This is what I have:
<div id="radiobuttons" class="container" name="buttons" align=center onchange="myFunction">
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3">
<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">
<label for="stone-option">Stone</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<p id="paragraph" align="center">0</p>
<script>
function myFunction() {
var x = document.getElementById("radiobuttons").value;
document.getElementById("paragraph").innerHTML = x;
}
</script>
Although, when I press a button, it says undefined. What does this mean, and how can I fix this?
change event is not invoked for a div element. You will have to attach it to the radio buttons explicitly for them to be invoked.
Also it is a good idea to avoid inline event handlers and attach the handlers in JS to avoid dirtying the HTML
HTML
<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">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3">
<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">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<p id="paragraph" align="center">0</p>
JS
var radioButtons = document.querySelectorAll('input[type=radio]');
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', function() {
if (this.checked) {
document.getElementById("paragraph").innerHTML = this.value;
}
});
}
Check Fiddle
You're trying to access a property of value on radiobuttons which is a <div> that has no such value, this is why you're getting 'undefined'.
You'll want to modify your code so that myFunction is assigned to the inline event handler onClick of each radio button input instead.
Related
I have this kind of html blocks:
<div data-target="TargeID" data-action="toggle" data-trigger="Yes">
...
<ul>
<li>
<label class="radio">
<input id="cpMainContent_ctl24_rptAnswers_rbAnswer_0" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl01$rbAnswer">
Yes
</label>
</li>
<li>
<label class="radio">
<input id="cpMainContent_ctl24_rptAnswers_rbAnswer_1" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl02$rbAnswer">
No
</label>
</li>
<li>
<label class="radio">
<input id="cpMainContent_ctl24_rptAnswers_rbAnswer_2" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl03$rbAnswer">
maybe
</label>
</li>
</ul>
</div>
I need to select every input inside elements with data-action="toggle"
and Im using this jQuery selector: $('[data-action="toggleQuestions"] :input');
but I need to select those input which text value is equal to the parent data-trigger value.
Is it possible directly with a selector?
The logic is too complex to put in to a single selector. Instead you can use filter() to find the :input elements, then match the text() of their parent label to the data-trigger value on the container. Try this:
var $container = $('[data-action="toggle"]');
var $input = $container.find(':input').filter(function() {
return $(this).closest('label').text().trim() == $container.data('trigger');
})
$input.prop('checked', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-target="TargeID" data-action="toggle" data-trigger="Yes">
<ul>
<li>
<label class="radio">
<input id="cpMainContent_ctl24_rptAnswers_rbAnswer_0" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl01$rbAnswer">
Yes
</label>
</li>
<li>
<label class="radio">
<input id="cpMainContent_ctl24_rptAnswers_rbAnswer_1" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl02$rbAnswer">
No
</label>
</li>
<li>
<label class="radio">
<input id="cpMainContent_ctl24_rptAnswers_rbAnswer_2" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl03$rbAnswer">
maybe
</label>
</li>
</ul>
</div>
Use the below code
$('[data-action="toggle"]').each(function() {
var triggerValue = $(this).attr("data-trigger");
$(this).find('input[type=radio]').each(function() {
if ($(this).parent().text().trim() === triggerValue) {
$(this).prop("checked", true);
}
});
});
This question already has answers here:
JavaScript onchange function doesn't work
(3 answers)
Closed 7 years ago.
So I don't know how to to go about having my onchange function to populate the div the radio button its connected too since I'm not to familiar with how JavaScript works as i tried pasting the HTML in the JavaScript....The tables radio button is supposed to populate its connected div with check boxes while the view radio button is supposed to have its div be empty. Codepen http://codepen.io/MarkBond/pen/JdOZaw?editors=101 BTW this is done in bootstrap
JAVASCRIPT:
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
document.getElementById("populateCheckBoxes").innerHTML = "";
} else {
document.getElementById("dropdownMenuSelect").innerHTML = "Views";
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
}
}
HTML:
this isn't anywhere in the codepen because I have no idea where to put it :/
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
HERES THE RADIO BUTTON AND DROPDOWN:
<form role="form">
<div class="row">
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Tables
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
</ul>
</div>
</div>
<div class="row" id="populateCheckBoxes"></div>
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
The div doesn't change, so onchange is not going to work. Try this:
<label>
<input type="radio" name="optradio" id="selectionTables" onchange="changeSelection()" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" onchange="changeSelection()"/>Use Views
</label>
I'm trying to use javascript to show/hide a div's content depending on which radio button is selected. I have an onchange function that I use to change the the div content from one div to another, but it doesn't work. If you can do this in jquery instead thats ok but im not that familiar with jquery so if you could update my jsfiddle with it I would be appreciativw :) Here is the JSFiddle: https://jsfiddle.net/markusbond/au77Ladg/
Any help is appreciated :)
JAVASCRIPT:
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").show;
document.getElementById("unpopulateCheckBoxes").hidden;
} else {
document.getElementById("unpopulateCheckBoxes").show;
document.getElementById("populateCheckBoxes").hidden;
}
}
HTML:
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
Example using JQuery FIDDLE
JavaScript
$('input:radio[name=optradio]').change(
function(){
if (this.value == 'selectionTables') {
$("#unpopulateCheckBoxes" ).hide();
$("#populateCheckBoxes").show();
}
else {
$("#unpopulateCheckBoxes" ).show();
$("#populateCheckBoxes").hide();
}
}
);
Give your first radio button a value value="selectionTables"
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>
I hope I understood you correctly.
This is the correct way
<script>
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
document.getElementById("unpopulateCheckBoxes").style.visibility = "visible";
} else {
document.getElementById("unpopulateCheckBoxes").style.visibility ="hidden";
document.getElementById("populateCheckBoxes").style.visibility = "visible";
}
}
</script>
You are using
document.getElementById("unpopulateCheckBoxes").hidden;
but you should
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
Hope this helps
or via jquery, thats what i would prefer:
function changeSelection() {
if ($("#selectionTables").attr("checked") {
$("#populateCheckBoxes").show();
$("#unpopulateCheckBoxes").hide();
} else {
$("#unpopulateCheckBoxes").show();
$("#populateCheckBoxes").hide();
}
}
document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element
It is worth noting that you will not always want your element to be display:block;. There are many display options and you probably want to toggle back and forth based on how your element was originally shown.
Problem is html does not supports show/hide attribute. Try using style attribute with display property. Also use checked attribute to make default radio selection.
<input type="radio" name="optradio" id="selectionTables" checked='' />
function changeSelection() {
var pop = "none",
upop = "block";
if (document.getElementById("selectionTables").checked) {
pop = "block";
upop = "none";
}
document.getElementById("unpopulateCheckBoxes").style.display = upop;
document.getElementById("populateCheckBoxes").style.display = pop;
}
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" checked='' />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
I know this question had a lots of related resources. But, Still i need a perfect solution.
I have generated five number of radio buttons group dynamically. Each group holds upto five radio buttons. I have validated "none checked in" and "at least one checked in feature" as an individual group.
My question is, How do I validate whether "All the groups are checked"
for ref:
My code Below:
var names = [];
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
alert('none checked in ' + name);
}
else{
// At least one checked
var val = radio_buttons.val();
}
}
I need to redirect to other page when all the radio button groups are checked. Its a bit simple. But, look complex for me.
Please Help.
UPDATE
My generated HTML for first two groups.
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
</ul></div></div></div>
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
</ul></div></div></div>
note: Here group name alone gets changed.
Changed
<div id="ratingContainer">
to
<div class="ratingContainer"> .
Removed
onclick="checkThis(this);"
from html , added one event handler for all input elements
elems.find("input").on("change", checkThis);
Try
var allChecked = false;
var names = [];
var elems = $(".0");
function checkThis(e) {
var name = e.target.name;
if (names.length < elems.length) {
names.push(name);
};
allChecked = elems.get().every(function(el, i) {
return $(el).find(":checked").is("*")
});
alert(name + " checked");
if (allChecked) {
// do stuff
alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked);
};
};
elems.find("input").on("change", checkThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="0" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="0" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="0" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="0" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="0" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="1" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="1" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="1" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="1" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="1" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
Looks like you already know how to count up the checked elements. If you put that in the first loop, you can mark a variable false if any come up empty.
var names = [];
var allChecked = true;
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
if $(this).filter(':checked').length === 0 {
allChecked = false;
}
});
https://jsfiddle.net/eu6L1f80/2/
Javascript:
$('form').on('submit', function(e) {
e.preventDefault();
var checkboxes = {};
$(':checkbox').each(function() {
checkboxes[$(this).attr('name')] = true;
});
$.each(checkboxes, function(i, val) {
if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
});
if (!Object.keys(checkboxes).length) {
alert('success!');
} else {
alert('error!');
}
});
HTML:
<form>
<div>
Group:
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
</div>
<button type="submit">Submit</button>
<form>
On clicking on the Populate Values button the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively
I want to do it unobtrusively without inline JavaScript
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result"></span>and my preferred
location is: <span class="home-location-result"></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
Modified your HTML. Provided an id attribute for your result spans
$(function(){
$("#ss").click(function(){
// Find all input elements with type radio which are descendants of element with id `form`
var filt = $("#form_block input:radio");
// Apply a filter to the above object with `name='home-location'` and checked and get the value
var homeVal = filt.filter("[name='home-location']:checked").val();
// same as above
var preferredVal = filt.filter("[name='home-preferred']:checked").val();
// Set the text of the element width id `home-location-result' with the computed value
$("#home-location-result").text(homeVal);
// same as above
$("#preferred-location-result").text(preferredVal);
return false;
});
});
See a working demo
use this it's works for me
<script>
function test()
{
var home= $('input:radio[name=home-location]:checked').val();
document.getElementById("h1").innerHTML=home;
var preferred= $('input:radio[name=home-preferred]:checked').val();
document.getElementById("h2").innerHTML=preferred;
return false;
}
</script>
<form onsubmit="return test();">
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred
location is: <span class="home-location-result" id='h2'></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
</form>