We Keep Coding

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 do I have a checkbox/radio button posted to a textarea when I hit submit button?

I'm looking to make this code so that when you click on the radio button or check box it prints to the comment box a the bottom of the code? Anyone have some idea of how to connect the javascript to html?
<TITLE>Paper Comments</TITLE>
<SCRIPT LANGUAGE = "Javascript">
function validate(){
var radios = document.getElementsByName('thesis');
var tarea=document.getElementById('ta');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
tarea.innerHTML=radios[i].value+"\n";
break;
}
}
radios = document.getElementsByName('intro');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
tarea.innerHTML+=radios[i].value;
break;
}
}
checkbox= document.getElementsByName('Verification');
for (var i = 0, length = checkbox.length; i < length; i++) {
if (checkbox[i].checked) {
tarea.innerHTML+=checkbox[i].value;
}
var phoneData=document.getElementById('phone1');
tarea.innerHTML+=phoneData.value;
}
</SCRIPT>
</HEAD>
<b>Contact Tel Number</b>
<TEXTAREA id="phone1"rows="1"cols="40"></textarea>
<BODY>
<FORM NAME="frmOne">
<P>
<input type="checkbox" name="Monitored"value="Monitored">
<b>Monitored/Recorded Line Disclosure Given?</b>
<br>
<i>All calls are recorded and monitored</i><br><br>
<tr>
<td><INPUT TYPE="Radio" Name="thesis" Value="Inbound Call">
<b>Inbound Call</b><br></td>
<td><INPUT TYPE="Radio" Name="thesis" Value="Outbound Call"><b>
Outbound Call</td></td><br>
<br>
</P>
<b>Who Called:</b>
<P>
<tr><td>
<INPUT TYPE="Radio" Name="intro" Value="Consumer"Consumer<br>
<INPUT TYPE="Radio" Name="intro" Value="Co-Borrower">Co-Borrower<br>
<INPUT TYPE="Radio" Name="intro" Value="Attorney">Attorney<br>
<INPUT TYPE="Radio" Name="intro" Value="Wrong Party">Wrong Party<br>
<INPUT TYPE="Radio" Name="intro" Value="Authorized 3rd Party">
Authorized 3rd Party<br>
<INPUT TYPE="Radio" Name="intro" Value="Power of Attorney">
Power of Attorney<br>
<INPUT TYPE="Radio" Name="intro" Value="Spouse">Spouse<br>
<INPUT TYPE="Radio" Name="intro" Value="Non-Auth 3P">Non-Auth 3P<br>
<INPUT TYPE="Radio" Name="intro" Value="Wrong Party">
Wrong Party<br></td></tr>
</P>
<P>What did the Consumer verify?<i> Just use one!</i><br>
<td>
<input type="checkbox" name="Verification" value="Full Address"><b>
Full Address</b>
</td>
<td>
<input type="checkbox" name="Verification" value="Last 4 of SSN"><b>
Last 4 of SSN</b>
</td>
<td>
<input type="checkbox" name="Verification" value="Wrong Party"><b>
Wrong Party</b>
</td>
<td>
<input type="checkbox" name="Verification" value="Date of Birth"><b>
Date of Birth</b>
</td>
<td>
<input type="checkbox" name="Verification" value="Client Acct#"><b>
Client Acct#</b>
</td>
</P>
<br>
Mini-Miranda Given? <br>
<i>
I must inform you that this communication is an attempt to collect a debt by a debt collector.
Any information obtained will be used for that purpose. </i>
Yes
<table border="2" style="width:100%">
Enter Telephone Number(s) if Permission Given:
<br>
<input type="text" name="" size="75" style="background-color:Yellow">
<p align="Center"><b>Reason for Delinquency:</b>
<br>
<input type="text" name="" size="75" style="background-color:Yellow">
<p align="Center"><b>Payment Options Offered:</b>
<br>
<input type="text" name="" size="75" style="background-color:Yellow"><br>
</table><br>
<table border="2" style="width:100%" align="center">
<p align="Center"><b>Next Step:</b>
</p>
<td>
<input type="checkbox" name="
Payment Terms Accepted"value="FullAddress"><b>
Payment Terms Accepted</b>
<br>
<input type="checkbox" name="Set Up Call Back " value=
"Set Up Call Back"><b>Set Up Call Back</b>
<br>
<input type="checkbox" name="Caller Request CAD" value="
Caller Request CAD"><b>Caller Request CAD</b>
<br>
<input type="checkbox" name="Requested Mail Only" value="
Requested Mail Only"><b>Requested Mail Only</b>
<br>
<input type="checkbox" name="Requested Letter" value="
Requested Letter"><b>Requested Letter</b>
<br>
<input type="checkbox" name="Conf/Warm Transfer to AES" value="
Conf/Warm Transfer to AES"><b>Conf/Warm Transfer to AES</b>
<br>
<input type="checkbox" name="
Refer to AES/Unable to Transfer" value="
Refer to AES/Unable to Transfer"><b>Refer to AES/Unable to Transfer</b>
<br>
<input type="checkbox" name="Borrower Deceased" value="
Borrower Deceased"><b>Borrower Deceased</b>
<br>
<input type="checkbox" name="DIS/VOD Request" value="
DIS/VOD Request"><b>DIS/VOD Request</b>
</th>
<br>
<th align="left">
<input type="checkbox" name="Refused all Options" value="
Refused all Options"><b>Refused all Options</b>
<br>
<input type="checkbox" name="Going Out To Raise Funds" value="
Going Out To Raise Funds"><b>Going Out To Raise Funds</b>
<br>
<input type="checkbox" name="Caller Hung Up" value="
Caller Hung Up"><b>Caller Hung Up</b>
<br>
<input type="checkbox" name="Customer Filing BKY" value="
Customer Filing BKY"><b>Customer Filing BKY</b>
<br>
<input type="checkbox" name="Co-Maker Filing BKY" value="
Co-Maker Filing BKY"><b>Co-Maker Filing BKY</b>
<br>
<input type="checkbox" name="Active Duty Military" value="
Active Duty Military"><b>Active Duty Military</b>
<br>
<input type="checkbox" name="
Account No Longer With NGI" value="Account No Longer With NGI"><b>
Account No Longer With NGI</b>
<br>
<input type="checkbox" name="Claims Fraud" value="
Claims Fraud"><b>Claims Fraud</b>
<br>
<input type="checkbox" name="RET/DECL Follow Up" value="
RET/DECL Follow Up"><b>RET/DECL Follow Up</b>
</td>
</th>
</tr>
<br><br>
</table>
<br>
<center><INPUT TYPE="button" VALUE=" SUBMIT " onClick="validate()">
</FORM>
<br>
<br>
Call Details:
<TEXTAREA id="ta"rows="10" cols="90"></textarea>
</BODY>

Set the onclick event of the checkbox to toggle the textarea
<input type="checkbox" name="Going Out To Raise Funds" value="Going Out To Raise Funds"
onclick="document.getElementById('ta').value = this.checked ? document.getElementById('checkboxid').name : ''"
id="checkboxid"><b>Going Out To Raise Funds</b></input>
<textarea id="ta"rows="10" cols="90"></textarea>

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.

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

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.

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" />