I am creating a list of radio button selections for an order form. Each of the questions has an answer that contains a div with additional information. I have them all set up to show the div when the radio button is clicked, but when you go to the next question and click an option, it hides the above answer and unselects the radio button for the previous question.
Edit To Clarify: Only one of the radio button options should bring up the additional info box per question. So if you click yes to question 1, you get an info box. If you click NO on question 1, there is no info box.
I would like the previous radio buttons to stay selected. I started with this code and modified it to have multiple questions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
</div>
<div id="div1" class="tab">
<p>this is div 1</p>
</div>
<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
Here is the jsfiddle: https://jsfiddle.net/lenniejane/d58phaua/
First you need to put different names of radio buttons, I also made some changes in html :
<div id="tabs">
<div class="nav">
<p><strong>QUESTION 1</strong></p>
<div class="answers">
<p><input name="tab" type="radio" value="residential-yes">Yes</p>
<p><input name="tab" type="radio" value="residential-no">No</p>
</div>
<div class="tab" id="div1">
<p class="fee-notice">ADDITIONAL INFO 1</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 2</strong></p>
<div class="answers">
<p><input name="tab2" type="radio" value="lift-yes">Yes</p>
<p><input name="tab2" type="radio" value="lift-no">No</p>
</div>
<div class="tab" id="div2">
<p class="fee-notice">ADDITIONAL INFO 2</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 3</strong></p>
<div class="answers">
<p><input name="tab3" type="radio" value="inside-yes">Yes</p>
<p><input name="tab3" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div3">
<p class="fee-notice">ADDITIONAL INFO 3</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 4</strong></p>
<div class="answers">
<p><input name="tab4" type="radio" value="inside-yes">Yes</p>
<p><input name="tab4" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div4">
<p class="fee-notice">ADDITIONAL INFO 4</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
</div>
css :
.tab {
display: none;
}
.nav.showtab .tab{
display:block;
}
and js will be like this :
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
diplayNewTab(thiisNav)
});
}
function diplayNewTab(thiisNav){
for(i=0; i<navEle.length; i++){
navEle[i].classList.remove("showtab");
}
thiisNav.className += ' showtab';
}
https://jsfiddle.net/d58phaua/2/
UPDATE:
if you need to keep the "additional info" for previous questions visible when answering another question use this js :
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
thiisNav.className += ' showtab';
});
}
Demo : https://jsfiddle.net/d58phaua/3/
https://jsfiddle.net/d58phaua/1/
Here you go.
You just need to put different names of radio buttons
<input name="tab1" type="radio" value="residential-no">No</p>
Related
I have several checkboxes when clicking on a certain checkbox, I want to show some content (in my case, this is a simple block for an example) when clicking on another checkbox, the previous block should hide and display a new block, I think to solve this problem you need to apply forEach checkboxes work for me, but I cannot display blocks
<div class="toggle-two">
<div><small>content 1</small></div>
<label class="switch-label">
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-three">
<div><small>content 2</small></div>
<label class="switch-label">
<input class="switch" id="switch-intermediate" value="switch-intermediate" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-four">
<div><small>content 3</small></div>
<label class="switch-label">
<input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<!-- ------------------------------------------- -->
</div>
<div>
<div class="content c1"></div>
<div class="content c2"></div>
<div class="content c3"></div>
</div>
**script.js**
let uploadPres = document.getElementsByClassName("content");
$(".content").each(function (index, value) {
$(`.switch:not([checked])`).on("change", function (param1, param2) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
console.log(this.checked);
}
});
});
Initially a class named content has display: none by default
You can also see this example in codesandbox
on each input checkbox add the reference of the associated content div like below.
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c1"/>
OR
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c2"/>
Now simply update your code like below.
$(`.switch`).on("change", function (a, b) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
var contentToOpen = $(this).data("content"); // read the associated class of the div
$(`.content`).hide(); // hide all existing opened ones
$(`.${contentToOpen}`).show(); // show the associated one
}
});
function toggle(event){
var container = event.target.closest(".togglers");
var currentContainer = event.target.closest(".toggle");
var index = Array.from(container.children).indexOf(currentContainer);
var checkboxes = document.querySelectorAll(".toggle input");
$(checkboxes).prop("checked",false);
$(event.target).prop("checked", true);
var contentItems = document.querySelectorAll(".content-items .content");
$(contentItems).hide();
var content = contentItems[index];
$(content).slideToggle();
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togglers">
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 1
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 2
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 3
</div>
</div>
<div class="content-items">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
I have some very simple code to get information about active div with class name active. I currently trying to get its index between a collection of divs with class name slide. However, I tried many selectors with no benefit. So, I need your help.
CSS
<style type="text/css">
.slide {
width:50px;border:1px solid #808080;height:50px;float:left; display:inline-block;
text-align:center; vertical-align:middle;/*display:none;*/
}
.active { background-color:brown }
</style>
HTML
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
var nxt = 0;
var prv = 0;
var crnt = 0;
$("#get_info").click(function () {
crnt = $(".slide").index(".slide .active");
$('#msg').html(crnt);
});
});
</script>
As shown all I need to get "active" position index between "slide". The permanent result for this is -1.
You can get it like this:
$(document).ready(function() {
$("#get_info").click(function() {
let crnt = $(".slide").index($(".slide.active"));
$('#msg').html(crnt);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
I am extending my previous question. I am trying now if one of the radio button is selected then other should de-select by default.
I have tried by adding this :
JS
function Show_Div(Div_id) {
if (!$(Div_id).is(':visible')) {
$(Div_id).prev().children().prop('checked', true);
$(Div_id).show(250);
} else {
$(Div_id).prev().children().prop('checked', false);
$(Div_id).hide(250);
}
}
function cbChange1(obj) {
var cb1 = document.getElementsByClassName("cb1");
for (var i = 0; i < cb1.length; i++) {
cb1[i].checked = false;
}
obj.checked = true;
}
HTML
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px">
<p>
<input type="radio" onclick="Show_Div(Div_1)" class="cb1" onchange="cbChange1(this)">Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px">
<p>
<input type="radio" onclick="Show_Div(Div_2)" class="cb1" onchange="cbChange1(this)">Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
But by above code only the radio buttons are select and de-select. The show and hide div which is connected with radio buttons is not show and hide by above.
Can anyone help me in this?
You're going about it wrong, it's actually quite simple. If two radio boxes are effectively answers to the same question then all you need to do is give both elements the same name. Then to handle showing and hiding of div's you can do this -
function Show_Div(Div_id, element) {
$("input[name='radio1']").not(element).parent().next('div').hide(250);
if (!$(Div_id).is(':visible')) {
$(Div_id).prev().children().prop('checked', true);
$(Div_id).show(250);
} else {
$(Div_id).prev().children().prop('checked', false);
$(Div_id).hide(250);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px">
<p>
<input type="radio" name="radio1" onclick="Show_Div('#Div_1')" class="cb1" >Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px">
<p>
<input type="radio" name="radio1" onclick="Show_Div('#Div_2')" class="cb1" >Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
After start the application, i load content of formularzZgloszeniowy to empty div(#zawartoscTabeli). After click in li element, i load dates from div #ogloszenia to div(#zawartoscTabeli). From this moment, i can't catch event from button #kik.
Has someone any idea how to solve this problem??
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<script>
$(document).ready(function() {
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#formularzZgloszeniowy').html()).animate({
opacity: 1
}, 500);
$("section ul").on('click', 'li', function() {
var id = this.id;
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#ogloszenia div:nth-child(' + id + ')').html()).animate({
opacity: 1
}, 500);
});
$('#kik').click(function() {
alert('dddd');
});
});
</script>
</head>
<body>
<div id="wrapper">
<section>
<ul>
<li id="1" style="font-size: 12px;">CLICK</li>
</ul>
<div id="zawartoscTabeli">
</div>
</section>
<!--formularz zgloszeniowy-->
<div id="formularzZgloszeniowy" style="display: none">
<form id="form1" action="rejestracjaUzytkownika.jsp" method="POST">
<div class="formualrz">
<div class="width20">Preferowane miejsce pracy<sup>*</sup>:</div>
<div class="width20">
<input type="text" name="miejsce_pracy" />
</div>
</div>
<div class="formualrz">
<div class="left">Imię i nazwisko<sup>*</sup>:</div>
<div class="right">
<input type="text" name="imie_nazwisko" />
</div>
</div>
<BR/>
<BR/>
</form>
</div>
<!--formularz zgloszeniowy-->
<div id="ogloszenia" style="display: none">
<div>
<p class="bold">Opis stanowiska:</p>
<ul>
<li>123</li>
<li>1234</li>
<li>326236</li>
</ul>
<button id="kik">BACK</button>
</div>
</div>
</div>
</body>
</html>
Link to demo
As you're updating the html of element, the events are unbinded. Use event delegation:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$('#zawartoscTabeli').on('click', '#kik', function () {
alert('Łot de fack');
});
Demo: http://jsfiddle.net/tusharj/95v7fbbe/1/
Docs: http://learn.jquery.com/events/event-delegation/
For some reason, i have this two functions in my javascript, and both seems to work.
The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.
The second one, is when the user is on the second div, and clicks on back.
All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.
It's closing both divs.
First Div with two options:
<div class="firstQuestion">
<div class="male" onclick="secondQuestion(this);"></div>
<div class="female" onclick="secondQuestion(this);"></div>
</div>
Second div, with back button:
<div class="secondQuestion">
<form class="formAconselhamento" id="male">
<input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
<input type="button" id="save_value_male" class="next" name="save_value" />
</form>
</div>
Javascript functions:
function secondQuestion(divID)
{
var clicado = $("#"+$(divID).attr('class'));
$(".firstQuestion").hide();
$("#"+$(divID).attr('class')).show();
}
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(".secondQuestion").hide();
$(".firstQuestion").show();
}
}
How can i resolve my issue?
In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">
Try something like:
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(divID).closest("form").hide();
$(".firstQuestion").show();
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.maincat{background: #eef;}.subcat{background: #abc;}
</style>
</head>
<body>
<div class="maincat">
<div class="type" rel='one'>first</div>
<div class="type" rel='two'>second</div>
<div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
back
<div id="one">
first content
</div>
<div id="two">
second content
</div>
<div id="three">
third content
</div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
$("#" + $(this).attr('rel')).show().siblings().hide();
$('.subcat').show();$('.back').show();
});
$(".back").click(function(){
$('.subcat').children().hide();$(".maincat").show();
});
</script>
</body>
</html>