Reveal div based on checked radio/checkbox, multiple instances - javascript

I have to add the class 'revealed' to a div, once the radio button with the label 'yes' has been selected. So far I have my code set up so that I apply a 'required' class to the input that will be revealed, but I need to have a way to add the class 'revealed' to the 'reveal-if-active' div. This entire HTML structure will repeat as there will be multiple yes/no questions after this first one. So each 'reveal-if-active' div must be unique.
Here's the HTML structure that I am required to use:
<div class="form-group two-column">
<input id="a1" type="radio" name="ayesno" value="1">
<label for="a1">yes</label>
</div>
<div class="form-group two-column">
<input id="a2" type="radio" name="ayesno" value="2">
<label for="a2">no</label>
</div>
<div class="reveal-if-active">
<label for="how-many-people">If <strong>yes</strong> how many people?</label>
<input type="text" name="a-how-many-people" class="require-if-active" data-require-pair="#a1" required="">
</div>
Here's the JS I have so far:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
$('[data-id=' + $('input:checked').prop('id') + ']').addClass('reveal');
} else {
el.prop("required", false);
el.removeClass("revealed");
}
});
}
};
FormStuff.init();

You may use el.closest('div.reveal-if-active'):
var FormStuff = {
init: function () {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function () {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function () {
$(".require-if-active").each(function () {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
el.closest('div.reveal-if-active').addClass("revealed");
} else {
el.prop("required", false);
el.closest('div.reveal-if-active').removeClass("revealed");
}
});
}
};
$(function () {
FormStuff.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group two-column">
<input id="a1" type="radio" name="ayesno" value="1">
<label for="a1">yes</label>
</div>
<div class="form-group two-column">
<input id="a2" type="radio" name="ayesno" value="2">
<label for="a2">no</label>
</div>
<div class="reveal-if-active">
<label for="i1">If <strong>yes</strong> how many people?</label>
<input id="i1" type="text" name="a-how-many-people" class="require-if-active" data-require-pair="#a1" required="">
</div>

Related

Unclick radio button via label instead of the actual button

I know this has been asked a few times but I haven't seen any posts regarding the use of the labels. The code below works for deselecting a radio button when no labels are written.
How can I add labels which allow the radio buttons to be selected/deselected with the clicking of the words rather than just the radio button itself. When I add labels my code seems to go haywire.
This is the working snippet with spans instead of labels
document.getElementsByName('foo').forEach((radioBttn) => {
radioBttn.addEventListener('click', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
document.getElementsByName('bar').forEach((radioBttn) => {
radioBttn.addEventListener('click', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
<br>
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
<br>
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
This is the non-working snippet with labels instead of spans
document.getElementsByName('foo').forEach((radioBttn) => {
radioBttn.addEventListener('mousedown', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
document.getElementsByName('bar').forEach((radioBttn) => {
radioBttn.addEventListener('mousedown', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
<label class="foo" for="foo1">
<input type="radio" name="foo" id="foo1">Foo</label>
<label class="bar" for="bar1">
<input type="radio" name="bar" id="bar1">Bar</label>
<br>
<label class="foo" for="foo2">
<input type="radio" name="foo" id="foo2">Foo</label>
<label class="bar" for="bar2">
<input type="radio" name="bar" id="bar2">Bar</label>
<br>
<label class="foo" for="foo3">
<input type="radio" name="foo" id="foo3">Foo</label>
<label class="bar" for="bar3">
<input type="radio" name="bar" id="bar3">Bar</label>

Jquery onchange does not update the object values

How can we apply onChage function on input in jquery
How can i apply onchange function on checkbox , date , and name and and update dat in object initialState
for checkbox if checked then its value true and if unchecked its false
this is my javascript
const sectionWork = (event) => {
event.preventDefault();
let initialState = {
check: false,
Date: "",
name: ""
}
$("#exampleCheck1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
initialState.check = $(this).val();
});
$('#exampleInputDate').on('change', function() {
initialState.Date = $(this).val()
});
$('#naming').on('change', function() {
initialState.name = $(this).val()
});
console.log(initialState)
}
<form onsubmit="sectionWork(event)">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form-group">
<label for="exampleInputDate">Date</label>
<input type="date" id="exampleInputDate" name="date">
</div>
<div class="form-group">
<label for="exampleName">Name</label>
<input type="text" aria-placeholder="Enter Name" name = "naming" class="form-control" id="naming" >
</div>
<button type="submit" class="btn btn-primary">Releasing</button>
</form>
You must make these event handlers global scope, outside of specific event handler (here is onsubmit handler's sectionWork)
let initialState = {
check: false,
Date: "",
name: ""
}
$("#exampleCheck1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
initialState.check = $(this).val();
});
$('#exampleInputDate').on('change', function() {
initialState.Date = $(this).val()
});
$('#naming').on('change', function() {
initialState.name = $(this).val()
});
const sectionWork = (event) => {
event.preventDefault();
console.log(initialState)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="sectionWork(event)">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form-group">
<label for="exampleInputDate">Date</label>
<input type="date" id="exampleInputDate" name="date">
</div>
<div class="form-group">
<label for="exampleName">Name</label>
<input type="text" aria-placeholder="Enter Name" name="naming" class="form-control" id="naming">
</div>
<button type="submit" class="btn btn-primary">Releasing</button>
</form>

Bootstrap checkbox buttons not changing state

I used to have radio buttons, but I changed the script to use bootstrap checkboxes. But it is not changing the state when using bootstrap switches.
This is snippet of my code:
<div class="form-group">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_yes" value="1" checked> Yes </label>
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_no" value="0"> No </label>
</div>
</div>
<script>
function action(){}
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_no").attr('checked', false);
$("#upd_yes").attr('checked', true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr('checked', false);
$("#upd_no").attr('checked', true);
$('#upd_no').parent().addClass('checked');
}
}
</script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>
<script>
function action(){
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_yes").attr("checked",true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr("checked",false);
$('#upd_yes').parent().removeClass('checked');
}
}
</script>
How can I fix this?
Am able to find 2 issues(actually not issues) as below
is_active is not declared so you cannot check it with if statement
Most importantly your action() function not at all initiated.
So i added below code and updated the snippet.
var is_active = 0;
action();
var is_active = 0;
action();
function action() {
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if (is_active == "1") {
$("#upd_yes").attr("checked", true);
$('#upd_yes').parent().addClass('checked');
} else {
$("#upd_yes").attr("checked", false);
$('#upd_yes').parent().removeClass('checked');
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>

Checkbox show img

I'm trying to make it so, when you checked/uncheck a checkbox, the img appears/disappears. As of now, when I checked a box, all 4 of the images appear instead of just the one. Also I was wondering is it wrong to use document.ready multiple times? This is what I have:
Js:
$(document).ready
(
function()
{
$("#pump").hide();
$("input:checkbox").change(function() {
this.checked?$("#pump").show():$("#pump").hide();
});
});
$(document).ready
(
function()
{
$("#ski").hide();
$("input:checkbox").change(function() {
this.checked?$("#ski").show():$("#ski").hide();
});
});
$(document).ready
(
function()
{
$("#ship").hide();
$("input:checkbox").change(function() {
this.checked?$("#ship").show():$("#ship").hide();
});
});
$(document).ready
(
function()
{
$("#sun").hide();
$("input:checkbox").change(function(){
this.checked?$("#sun").show():$("#sun").hide();
});
});
Html:
<div>
<input type="checkbox"></input>
<label> Pumpkins </label>
<img src="images/pumpkins.jpg" id="pump">
<input type="checkbox"></input>
<label> Ski Resort </label>
<img src="images/ski resort.jpg" id="ski">
<input type="checkbox"></input>
<label> Bahamas </label>
<img src="images/bahamas.jpg" id="sun">
<input type="checkbox"></input>
<label> Cruise </label>
<img src="images/cruise.jpg" id="ship">
</div>
$(window).on("load", function() {
$("#pump").hide();
$("#ski").hide();
$("#sun").hide();
$("#ship").hide();
});
$("#id1").change(function() {
if(this.checked) {
$("#pump").show();
}
else{
$("#pump").hide();
}
});
$("#id2").change(function() {
if(this.checked) {
$("#ski").show();
}
else{
$("#ski").hide();
}
});
$("#id3").change(function() {
if(this.checked) {
$("#sun").show();
}
else{
$("#sun").hide();
}
});
$("#id4").change(function() {
if(this.checked) {
$("#ship").show();
}
else{
$("#ship").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id = "id1" type="checkbox"></input>
<label> Pumpkins </label>
<img src="images/pumpkins.jpg" id="pump">
<input id = "id2" type="checkbox"></input>
<label> Ski Resort </label>
<img src="images/ski resort.jpg" id="ski">
<input id = "id3" type="checkbox"></input>
<label> Bahamas </label>
<img src="images/bahamas.jpg" id="sun">
<input id = "id4" type="checkbox"></input>
<label> Cruise </label>
<img src="images/cruise.jpg" id="ship">
You need to create ids for your checkboxes.
And within your event listener for the checkbox, you have to check whether the box has been selected or not. I like tu use IF ELSE.

Enable/Disable Dynamically added row in jquery

Basically I created a jsp page . Here is the demo. When there was only 1 identifier type and identifier number, I can easily enable or disable the input field. But i happen to mess up with multiple field. How can i change classname of input type checkbox so that when i check individual identifier number, input field will be enabled/disabled?
My Code Here
JS
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).appendTo('#container');
$('#addRow').click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$('<div/>', {
'class' : 'extraPerson'+counter, 'id': 'extraPerson'+counter,html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
counter++;
});
$('#removeRow').click(function () {
if(counter==0){
alert("No more textbox to remove");
return false;
}
counter--;
$("#extraPerson"+counter).remove();
//$("#Identification-Type"+counter).remove();
//$("#Identification-Number"+counter).remove();
});
function GetHtml()
{
// var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=Identification-Number]')[0].name="Identification-Number" + counter;
$html.find('[id=Identification-Number]')[0].name="Identification-Number" + counter;
$html.find('[name=Identification-Type]')[0].name="Identification-Type" + counter;
// $html.find('[id=Identification-Type]')[0].id="Identification-Type" + counter;
return $html.html();
}
HTML
<form name="pancettaForm" method="post"
action="demor" id="pancettaForm">
<ul>
<li><label for="PartyChoose">Choose Appropriate Party:</label></li>
<br>
<input id="person" name="PartyChoose" type="radio"
value="update-person" class="required" /> Person
<br />
<input id="organization" name="PartyChoose" type="radio"
value="update-organization" class="required" /> Organization
<br />
<li id="Family-Name" style="display: none;">
<input type="checkbox" class="Family-Name" value="Family-name" name="Family-name">
<label for="Family-Name"><em>*</em>Family Name:</label> <input type="text" name="Family-Name" class="required"></li>
<li id="Organization-Name" style="display: none;">
<input type="checkbox" class="Organization-Name" value="Organization-name" name="Organization-name">
<label for="Organization-Name"><em>*</em>Organization Name:</label> <input type="text" name="Organization-Name" class="required"></li>
<div class="extraPersonTemplate">
<div class="controls controls-row">
<li id="Identification-Type" style="display: none;">Identification Type:
<select name="Identification-Type" class="Identification-Type"><label for="Identification-Type">Identification Type:</label>
<option value="0">--Select--</option>
</select>
<li id="Identification-Number" style="display: none;"><input type="checkbox" class="Identification-Number" value="Identification-Number"
name="Identification-number" id="Identification-Number"><label for="Identification-Number"><em>*</em>Identification Number:</label>
<input type="text" name="Identification-Number" >
</li></li>
</div>
<a href="#" id="addRow" style="display: none;"><i class="icon-plus-sign icon-white">
Add Identifier
Remove IdentifierAdmin System Type:
Admin Type:--Select--
*Admin System Value:
To change an attribute of a jQuery object :
$('.selector').attr('name', value);
So, in your case :
$html.find('[name=Identification-Number]').attr('name', 'Identification-Number' + counter);
You will have another issue in the identification number's checkbox event, change this :
$('.Identification-Number').click(function() {
if ($('.Identification-Number').is(':checked')) {
// ...
}
// ...
});
to this :
$('#pancettaForm').on('change', '.Identification-Number', function () {
var $this = $(this);
var $input = $this.siblings('input[type=text]');
if ($this.is(':checked')) {
$input.val('').attr('disabled', false);
}
else {
$input.attr('disabled', true);
}
});
You won't need to change the name attribute or something else with this code, because it looks for input[type=text] on the same level.
See http://api.jquery.com/siblings/ for more infos.
jsfiddle : http://jsfiddle.net/FyRy8/2/

Categories

Resources