Hide/Show table TR based on selected radio button - jquery - javascript

This is my html:
<input id="source" type="radio" name="source" value="1" />
<input id="source" type="radio" name="source" value="2" checked="" />
<table id="dataList">
<tr row='12'><td>this is row 12</td></tr>
<tr row='13'>
<td>
<input id="item" type="radio" name="item" value="1" />
<input id="item" type="radio" name="item" value="2" />
</td>
</tr>
<tr row='14'><td>this is row 14</td></tr>
</table>
any my jquery:
jQuery(document).ready(function() {
jQuery('input[name=source]').click( function() {
if(jQuery('input[value=1]').is(':checked')) {
jQuery('#dataList tr[row=13]').show();
} else if(jQuery('input[value=2]').is(':checked')) {
jQuery('#dataList tr[row=13]').hide();
}
})
})
Supposedly when the page loaded, the tr row='13' will be hide if the radio button id=source with value=2 is checked. but it not happen as expected. Please help me.

You can try
$('tr[row="13"]').hide();
right after ng jQuery(document).ready(function() { since you said 'when the page loaded'.

You could change your target. I don't know what its called but this thing $('TARGET').Since you have 2 inputs that has a value of 1.
See the following,
<input id="source" type="radio" name="source" value="1" />
and
<input id="item" type="radio" name="item" value="1" />.
It may cause overwriting of commands.

Related

How to hide content table cells

I have a form with a table and when the user click the radio button No the content of the following cells in that row should be visible. And when clicking Yes, the content should be hidden again. There is no difference now. It works outside the table.
I have tried style="display:table-cell" in a div-tag and in the td-tag - no success.
Picture of the form for the user
The error message in DevTools is: TypeError: Cannot read properties of null (reading 'checked')
at yesnoCheck
Picture of error message in DevTools
function yesnoCheck(var1, var2) {
if (document.getElementById(var1).checked) {
document.getElementById(var2).style.display = 'none';
} else document.getElementById(var2).style.display = 'block';
}
th {
background-color: #dddddd
}
<h1>Hide input fields based on radio button selection</h1>
<h3>Frame</h3>
Propellers OK?<br />
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">Yes
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">No<br>
<div id="ifNo" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /> Frame arms OK?<br />
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />No
<div id="framearmsDiv" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /><br />
<form>
<table style="width:100%">
<tr>
<th>What to do</th>
<th>OK</th>
<th>Replaced</th>
<th>Date</th>
<th>Checked by</th>
</tr>
<tr>
<td>The propellers, motors, and aircraft body are intact, and there is no sign for collision or loose or broken structures.</td>
<td><input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />Yes
<input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="No" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />No
</td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<td><input type="checkbox" id="aftercheckbodyC" value="Yes" /></td>
</div>
<td><input type="date" id="aftercheckbodyD" /></td>
<td><input type="text" id="aftercheckbodyT" /></td>
</tr>
<tr>
<td>The temperature of the motors is normal and there are no signs of uneven heating.</td>
<td> <input type="radio" name="afterchecktempR" value="Yes" />Yes
<input type="radio" name="afterchecktempR" value="No" />No
</td>
<td><input type="checkbox" id="afterchecktempC" value="Yes" /></td>
<td><input type="date" id="afterchecktempD" /></td>
<td><input type="text" id="afterchecktempT" /></td>
</tr>
</table>
</form>
There is not a element with id 'framearms' that's why it's null
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
You need
Valid HTML - you have divs between the cells
Unique IDs.
Consistent use of name, tags, values etc.
No need to prefix everything with javascript:
I strongly recommend you wrap each set in a container, then you do not need inline JS you can just look at the value and use hidden=value==="Yes"
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
const hide = tgt.value === "Yes";
tgt.closest("div").querySelector("div").hidden = hide; // hide the nested div
})
th {
background-color: #dddddd
}
<div id="container">
<h1>Hide input fields based on radio button selection</h1>
<h2>Frame</h2>
<div>
<h3>Propellers OK?</h3>
<input type="radio" name="yesno" value="Yes">Yes
<input type="radio" name="yesno" value="No">No<br>
<div hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
<div>
<h3>Frame arms OK?</h3>
<input type="radio" name="framearms" value="Yes" />Yes
<input type="radio" name="framearms" value="No" />No
<div id="framearmsDiv" hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
...
</div>
Two issues found in your code
1. <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" >
Quotes are missing for input field as it should be string - id of control
- <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck('aftercheckbodyR', 'aftercheckbodyDiv');"
2. In correct HTML - include 'aftercheckbodyDiv' <div> tag inside <td>
<td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<input type="checkbox" id="aftercheckbodyC" value="Yes" />
</div>
</td>

How to transfer radio button selection from 1html to another without php

I would like to transfer radio button data from the first html to the second with Pure JavaScript Its ok if you use some jQuery.
jQuery used
1st HTML
<body>
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession(){
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>
In my second HTML I would like to retrieve this data and set the value of the radio buttons to the same.
2nd HTML
<body onload="type()">
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type(){
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>
It would be better if you can also tell me how to disable the form
Thanks in advance for your time and effort!!
Adding my comments as an answer. To access the radio button value, since you're using jQuery, try this:
$('input[name="num"]:checked').val();
On the first HTML page,
sessionStorage.setItem("num", $('input[name="num"]:checked').val());
And then on the second page,
sessionStorage.getItem("num");
or, to set the value of the radio on the 2nd page with the stored value:
$('input[name="num"]').val([sessionStorage.getItem("num")]);
Here is a fiddle: https://jsfiddle.net/8or3chye/
You can add a change event handler to your radios and save a new value to the local storage on that event. Afterwards on page load you need to read the saved value of the radio from the local storage and if it exists - you find an element by id and set checked to true
<label for="1">
<input type="radio" name="num" id="1" value="1" onclick="handleClick(this);" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" onclick="handleClick(this);" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" onclick="handleClick(this);" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" onclick="handleClick(this);" >4
</label>
<script type="text/javascript">
function handleClick(radio) {
localStorage.setItem('numRadio', radio.value)
}
(function() {
const radioValue = localStorage.getItem('numRadio')
if(radioValue) {
const targetRadio = document.getElementById(radioValue)
targetRadio.checked = true
}
})()
</script>

I want to disable all the checkboxes selection if "none" is selected

I am creating a PHP form and can't figure out how to disable all the checkboxes if NONE option is selected.
<h5>HEALTH OF STUDENT</h5>
<p>Are there any physical, emotional, or other difficulties that we should be aware of?</p>
<table>
<td>Hearing
<input type="checkbox" name="Audition" value="Yes" />
</td>
<td>Vision
<input type="checkbox" name="Vision" value="Yes" />
</td>
<td>Heart
<input type="checkbox" name="Coeur" value="Yes" />
</td>
<td>Langage
<input type="checkbox" name="Speech" value="Yes" />
</td>
<td>Asthme
<input type="checkbox" name="Asthma" value="Yes" />
</td>
<td>Diabetes
<input type="checkbox" name="Diabete" value="Yes" />
</td>
<td>Allergies
<input type="checkbox" name="Allergies" value="Yes" />
<input type="checkbox" name="Allergies" value="Yes" />
<input type="checkbox" name="None" value="Yes" />
</td>
<td>Other
<input type="checkbox" name="Autre" value="Yes" />
</td>
<td>If other, Specify
<input type="text" name="autre2" id="autre2" />
</td>
</table>
The easiest way I see to do this is by adding a class to every of your checkbox that needs to be disabled by the NONE one and then deselect every one when you click on it with a jQuery .find() and .each() function to grab them all :
<input class="isOneOfThem" type="checkbox" name="Audition" value="Yes" />
<input class="isOneOfThem" type="checkbox" name="Vision" value="Yes" />
<!-- etc.. -->
<input onchange="deselectAllOfThem(this)" type="checkbox" name="NONE" value="Yes" />
-
function deselectAllOfThem(noneOne) {
if(noneOne.checked) { // if the NONE checkbox is checked
// looking for every HTML elements with the isOneOfThem class
// within the table element
$('table').find('.isOneOfThem').each(function() {
// just uncheck the element in the .each() loop
$(this).prop('checked', false);
})
}
}

For each div trigger radio button on change via jQuery

I need to check which radio button list is clicked and for the clicked to send a jQuery ajax call, at the moment I have table id plan1, plan2, plan3, generated with php. each has a radio button list, with jQuery each how is it possible to make this happen?
This is what i have done,
$("input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
to make it available for dynamic contents, i can do as below but its not practical since i dont know how many plans will be there.
$("#plan1 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
$("#plan2 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
$("#plan3 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
how can i make it dynamic and get current clicked radio button value please
here is the JS fiddle
<table id='plan1'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>3 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>5 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>10 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan2'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>2 Games</lable
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>4 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>9 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan3'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>4 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>6 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>11 Games</lable>
<br>
</td>
</tr>
</table>
var selectedPlan = $("input[name='Plan[packageId]']:checked").val();
alert(selectedPlan);
<table id='plan1'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>3 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>5 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>10 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan2'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>2 Games</lable
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>4 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>9 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan3'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>4 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>6 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>11 Games</lable>
<br>
</td>
</tr>
</table>
You can bind change event using .on() as elements created are dynamic.Use start with selector to choose table having id start with plan (like plan1, plan2...) and then input with name attribute as shown below
$(document).on('change','table[id^=plan] input[name="Plan[packageId]"]', function(){
//get clicked radio button value
alert($(this).val());
//you can find parent table id or any relevant element
var table = $(this).closest('table').attr('id');
alert(table);
});
JSFiddle Demo
Here is the working demo:
$(document.body).on('click','.radioPanle', function(){
alert($(this).val());
});
http://jsfiddle.net/2nb32s47/7/
I have applied common class name to each radio button for ease.
You will get value of radio button and pass it to ajax call.
First of all, your radio groups should be called the same. I mean, all radio options in group 1 should be called "Plan1", then all radio options in group 2 should be called "Plan2" etc.
Finally with these lines you'll able to get your info, and it doesn't matter if you have 3 forms or a hundred forms:
$("input:radio").change(function(e) {
//this will give you the selected value:
alert ($(this).val());
//this will tell the radio group where it belongs
alert ($(this).attr("name"));
//this will tell the form where it belongs
var $form = $(this).closest('form');
alert($form.attr('name'));
//here you can start your AJAX call or whatever you need
});
If you do it like this, users will be able to select one option from every group, however, if you want the user to be able to select only one option from all groups, then you would have to use the same name for all radio buttons, but the code above will still work.
Elements are created "dynamically" but that's PHP's job. Your browser and JQuery doesn't care about that, which means, all elements are loaded in the DOM when your page loads, so they're not dynamic to them.

Javascript code works, but "not defined" warning in Firebug

I have javascript code below, it's working but within Firebug it says
document.form1.element[i] is not defined
and then it works fine
function set_action(){
for (var i=0;i<=3;i++)
{
if (document.form1.PayType[i].checked == true)
{
var billerid = document.form1.billerid[i].value;
document.form1.action = billerid +"_mypag.htm";
}
}
and my html markup is as below
<form name="form1" action="...">
<input name="PayType" type="radio" value="0" id="ultipay" class="radiobtn" checked/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="1" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>
</select>
<input name="PayType" type="radio" value="2" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="3" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input type="button" onclick="set_action()" value="submit">
</form>
I don't know why I am getting this error.
If you have only one radio button named PayType, then you need to address it with document.form1.PayType. It is addressed as an array document.form1.PayType[i] iff there are multiple radio buttons with the same name. For instance:
<input name="PayType" type="radio" value="0" id="ultipay0" class="radiobtn" checked="checked" />
<input name="PayType" type="radio" value="1" id="ultipay1" class="radiobtn" />

Categories