I have a form where you have to choose between two input type="radio", one says yes and the other one says no.
I want to make a div that is visible in the form disappear when you select the no option. I tried by copying some JS from other posts I read on the internet, but nothing worked for me.
Can someone tell me the code I should use? It can be JS, PHP or CSS.
Here is my code:
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="yes" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="no" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>
<div id="hello">
You clicked on NO, so this div disappears.
</div>
You need to add event listeners to your inputs, as well you should change the name of both radio buttons to be the same thing. I used inputs below. I then toggle the display style on the #hello element depending on which selection was clicked.
const hello = document.getElementById('hello');
document.getElementById('yes')
.addEventListener('click', function() {
hello.style.display = null;
});
document.getElementById('no')
.addEventListener('click', function() {
hello.style.display = 'none';
});
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="inputs" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="inputs" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>
<div id="hello">
You clicked on NO, so this div disappears.
</div>
You can achieve this with pure CSS. Don't know if my solution is suitable because I have no idea how the rest of your page is structured.
.form-radio {
position: relative;
padding-bottom: 2rem;
}
input#no ~ #floatingDescription {
position: absolute;
bottom: 0px;
left: 0px;
display: block;
}
input#no:checked ~ #floatingDescription {
display: none;
}
<!DOCTYPE html>
<hml>
<body>
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="answer" id="yes" checked>
<label for="hsi">YES</label>
</div>
<div class="form-radio-item">
<input type="radio" name="answer" id="no">
<label for="hno">NO</label>
<div id="floatingDescription">You clicked on NO, so this div disappears.</div>
</div>
</div>
</body>
</html>
Related
I want that when I click on my checkbox they should be checked and automatically scroll down to next checkbox question. But In following code, it is scrolling down when input clicked but input is not giving the checked result.
On clicking in checkbox it is scrolling down but the checkbox is not checked??
$(':checkbox').on('click', function() {
$(this).attr('checked', true, function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form id="form-contents">
<div id="box1" class="box">
<div class="contents-box">
<label class="control-label " for="" style="font-family: 'Roboto', sans-serif; font-size: 20px;">Question1</label>
<br>
<label for="">
<input type="checkbox" href="#box2" name="checkbox1" >
option1
</label>
<br>
<label for="">
<input type="checkbox" href="#box2" name="checkbox2">
option2
</label>
<br>
<button class="scroll-link" href="#box2">Next</button>
</div>
</div>
<div id="box2" class="box">
<div class="contents-box">
<label class="control-label " for="" style="font-family: 'Roboto', sans-serif; font-size: 20px;">Question2</label>
<br>
<label for="">
<input type="checkbox" name="checkbox1" >
Good
</label>
<br>
<label for="">
<input type="checkbox" name="checkbox2">
Fine
</label>
<br>
<Br>
</div>
</div>
</form>
You're trying to do too much in your click handler. The natural effect of clicking on a checkbox is to toggle its checkedness; there's no need to do that yourself. Just worry about the animation:
$(':checkbox').on('click', function() {
if (!$(this).attr('href')) return;
$('html').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
});
label { display: block; } /* so you don't need all those <br>s */
.box { margin-bottom: 500px; } /* to force a scroll bar */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box">
<h1>Question1</h1>
<label>
<input type="checkbox" href="#box2">
option1
</label>
<label>
<input type="checkbox" href="#box2">
option2
</label>
</div>
<div id="box2" class="box">
<h1>Question2</h1>
<label>
<input type="checkbox">
Good
</label>
<label>
<input type="checkbox">
Fine
</label>
</div>
I also added a line to bail out of the click handler early if there's nowhere to scroll to. It keeps your console free of errors.
In my MVC site, I have a these lines of code:
<h2>#Model.Question</h2>
#using (Html.BeginForm("Index", "Result", FormMethod.Post))
{
<table cellspacing="10">
<tr>
#foreach (string answer in Model.Answers)
{
<td><input type="radio" name="answer" value="#answer" /><span>#answer</span></td>
}
</tr>
</table>
<div id="footer">
<input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
<input class="btn btn-success" type="submit" />
</div>
}
(Ignore the currently poorly implement first button in the footer)
The <input type="radio... returns the same amount of radio buttons as answers from a database. My problem is that for one question, there are a lot of answers and it starts making the page scroll sideways, as shown in the image below
What I want to happen is for the radio buttons to start on a new line, possibly in another <td>, when it starts to go too far sideways. Possibly done when it hits the border of a surrounding div I could create? Or when it exceeds a certain pixel width? I am not quite sure how to approach this at all. Thanks in advance!
Instead of using tables for your job, it is better to use DIV with fixed width (or percentage width) and floating them left so they stick together in one line. When there will be too much elements for one line, they will automatically jump to a new line. This will also work if you will change width of your browser.
CSS part:
.elements {
border: 1px solid red;
}
.elements:before,
.elements:after{
display: table;
content: " ";
}
.elements:after {
clear: both;
}
.element {
float: left;
min-height: 1px;
border: 1px solid blue;
margin: 2px;
}
HTML Part:
<div class="elements">
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
</div>
https://jsfiddle.net/4xvdcw9b/2/
If using table is not necessary you can try this approach:
<ul>
#foreach (string answer in Model.Answers)
{
<li><input type="radio" name="answer" value="#answer" /><span>#answer</span></li>
}
</ul>
with this styles:
ul
{
max-width:300px;
list-style-type: none;
}
li
{
display: inline;
}
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>
Here is an example : http://jsfiddle.net/c8uywnpa/21/ which works on other browsers but IE (10).
The issue comes when a the buttonset is wrapped within a 'form' element. Please see example included.
<b> Form - Click on image does not work, must click on number </b>
<form>
<div id="myRadio">
<input id="rf1" type="radio" name="myRadio" value="1" />
<label for="rf1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="rf2" type="radio" name="myRadio" value="2" />
<label for="rf2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
</form>
<hr>
<h3> No Form - Click on image works </h3>
<div id="myRadioNoForm">
<input id="r1" type="radio" name="myRadioNoForm" value="1" />
<label for="r1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="r2" type="radio" name="myRadioNoForm" value="2" />
<label for="r2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
$("#myRadio").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
$("#myRadioNoForm").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
Clicking on the numbers in the label fires the change event but does not if you click on the Image in the label. Any help is much appreciated.
I had the same problem. I'm not using jQuery. I had the image wrapped with the span, so I tried to add an :after pseudoelement to it. It covers the image, so when clicking, you click on the pseudoelement rather than on the image. And it helped for me. ie9-11
.image { position: relative; display: block;}
.image:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
<label for="answ">
<span class="image"><img src="image.jpg"></span>
</label>
I have 4 radio buttons and I need to show a specific div based on which is clicked and make sure the other 3 remain hidden, etc for all 4. I can only find code to make 2 work but not 4.
Does anyone have an example how to do this?
Just as a test I have
<div id=onestyle=display:none> 1 </div>
<div id=two style=display:none> 2 </div>
<div id=three style=display:none> 3 </div>
<div id=four style=display:none> 4 </div>
but cannot find something to sort out doing it with all of them.
Buttons are just basic in place to test right now:
<div data-biller="standard" class="membership-plan ">
<label for="option_2624" id="tt-2624">
<input value="12" id="option_2624" name="signup[optionid]" type="radio" checked="checked">
<span class="duration" style="float:left; "><var class="" ref=""> 12<br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_2429" id="tt-2429">
<input value="6" id="option_2429" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 6 <br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_1554" id="tt-1554">
<input value="3" id="option_1554" name="signup[optionid]" type="radio" >
<span class="duration" style="float:left; "><var class="" ref=""> 3 <br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_1697" id="tt-1697">
<input value="1" id="option_1697" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 1<br></span></label>
</div>
You can do this by jQuery like the following
I added a custom attribute to the radio that is connected to the div and this will only show one div per click
HTML Code
<div class="my-div me_1" data-target="1">1</div>
<div class="my-div me_2" data-target="2">2</div>
<div class="my-div me_3" data-target="3">3</div>
<div class="my-div me_4" data-target="4">4</div>
<div class="my-div me_5" data-target="5">5</div>
<input type="radio" data-target-id="1" name="radio" class="radioBtn">
<input type="radio" data-target-id="2" name="radio" class="radioBtn">
<input type="radio" data-target-id="3" name="radio" class="radioBtn">
<input type="radio" data-target-id="4" name="radio" class="radioBtn">
<input type="radio" data-target-id="5" name="radio" class="radioBtn">
JS Code
$(document).ready(function(){
$('.radioBtn').click(function(){
var target = $(this).data('target-id');
$('.my-div').hide();
$('.my-div[data-target="'+target+'"]').show();
});
});
And here is a working example
http://jsfiddle.net/JU7Nw/70
Here's a sample code that does what you want. I am not using any javascript library but plain old javascript.
<html>
<head>
<script type="text/javascript">
function showDiv (divId)
{
var div = document.getElementById (divId);
var divs = document.getElementsByTagName('div');
for (var i in divs)
{
divs [i].className = "hidden";
}
div.className = "shown";
}
</script>
<style>
.hidden
{
display:none;
}
.shown
{
display:block;
}
</style>
</head>
<body>
<input type="radio" onclick="showDiv ('1')" name="selectme">1</input>
<input type="radio" onclick="showDiv ('2')" name="selectme">2</input>
<input type="radio" onclick="showDiv ('3')" name="selectme">3</input>
<input type="radio" onclick="showDiv ('4')" name="selectme">4</input>
<div id="1" class="hidden">Hey, its me, 1</div>
<div id="2" class="hidden">Hey, its me, 2</div>
<div id="3" class="hidden">Hey, its me, 3</div>
<div id="4" class="hidden">Hey, its me, 4</div>
</body>
</html>