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>
Related
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);
})
}
}
This question already has an answer here:
Text box appear on radio button check
(1 answer)
Closed 6 years ago.
I have a form that has multiple groups of radio buttons. When I choose a radio button, it gives output on the same page.
I want to add a radio button for Other. When Other is selected a textbox should display so the user can enter text.
The user input in the textbox will be displayed on the same sequence.
$(document).ready(function() {
$("input").click(function() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val()+ " ";
});
return str;
});
});
});
<table width="100%">
<tr>
<td><input type="radio" name="RadioGroup1" id="a1" value="Accomplished" /><label for="accomplished">Accomplished</label></td>
<td><input type="radio" name="RadioGroup1" id="a2" value="Exciting" /><label for="exciting">Exciting</label></td>
<td><input type="radio" name="RadioGroup1" id="a3" value="Dynamic" /><label for="dynamic">Dynamic</label></td>
<td><input type="radio" name="RadioGroup1" id="a4" value="Holistic" /><label for="holistic">Holistic</label></td>
<td><input type="radio" name="RadioGroup1" id="a5" value="Animated" /><label for="animated">Animated</label></td>
</tr>
</table>
<table width="100%">
<tr>
<td><input type="radio" name="RadioGroup2" id="b1" value="CEO" /><label for="ceo">CEO</label></td>
<td><input type="radio" name="RadioGroup2" id="b2" value="Account Manager" /><label for="a-manager">Account Manager</label></td>
<td><input type="radio" name="RadioGroup2" id="b3" value="Customer Service" /><label for="c-services">Customer Service</label></td>
<td><input type="radio" name="RadioGroup2" id="b4" value="Project Manager" /><label for="p-manager">Project Manager</label></td>
</tr></table>
$("input").click(function() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val()+ " ";
});
return str;
});
});
});
You can add one <input type="text"> in your other <td> and turn it visible whenever user selects the other <radio> button. I have it done using CSS. I have made a change in HTML for this: added other class to the <td>.
td.other div.text{
display: none;
}
td.other input[type=radio]:checked+label + div.text{
display:block;
}
Whenever user selects 'other', it shows the <input type="text"> to enter the new value. User can see the result in realtime while the user is pressing the keys.
Here is the snippet:
console.clear();
function inputSelected() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val() + " ";
});
return str;
});
}
$(document).ready(function() {
$("input[type=radio]").click(inputSelected);
$("td.other").click(function() {
$(this).find('input[type=text]').focus();
});
$("td.other input[type=text]").keyup(function(e) {
var value = $(this).val().trim();
if (value.length <= 0) {
value = 'Other';
}
$(this).parent().siblings("input[type=radio]").val(value);
$(this).parent().siblings("label").html(value);
inputSelected();
})
});
//$(".other label").click();
td.other div.text {
display: none;
}
td.other input[type=radio]:checked+label + div.text {
display: block;
}
td.other input[type=radio]:checked+label {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Jquery: Add new radio field for selection">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td>
<input type="radio" name="RadioGroup1" id="a1" value="Accomplished" />
<label for="a1">Accomplished</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a2" value="Exciting" />
<label for="a2">Exciting</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a3" value="Dynamic" />
<label for="a3">Dynamic</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a4" value="Holistic" />
<label for="a4">Holistic</label>
</td>
<td>
<input type="radio" name="RadioGroup1" id="a5" value="Animated" />
<label for="a5">Animated</label>
</td>
<td class="other">
<input type="radio" name="RadioGroup1" id="a6" value="Other" />
<label for="a6">Other</label>
<div class="text">
<input type="text" id="other1" value="Other">
</div>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td>
<input type="radio" name="RadioGroup2" id="b1" value="CEO" />
<label for="b1">CEO</label>
</td>
<td>
<input type="radio" name="RadioGroup2" id="b2" value="Account Manager" />
<label for="b2">Account Manager</label>
</td>
<td>
<input type="radio" name="RadioGroup2" id="b3" value="Customer Service" />
<label for="b3">Customer Service</label>
</td>
<td>
<input type="radio" name="RadioGroup2" id="b4" value="Project Manager" />
<label for="b4">Project Manager</label>
</td>
<td class="other">
<input type="radio" name="RadioGroup2" id="b5" value="Other">
<label for="b5">Other</label>
</input>
<div class="text">
<input type="text" id="other2" value="Other">
</div>
</td>
</tr>
</table>
<div id="result">
</div>
</body>
</html>
In this snippet, I have updated the for in <label> to refer to the <radio>.
I have a dynamic table the user add's rows to by clicking the Add row button. In the row i have a button 'Select Scope' that opens a new window full of checkbox's I'm trying to get all of the selected checkbox's values to post to a text input in the dynamic table from the parent page. Dynamic Table PicSelect Scope Pic I know that this is possible just using javascript and I feel like I am on the right track from everything that I have read. For whatever reason though it's not passing the checkbox values back to the text input.
Parent Page Code
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<button onclick="ScopeFunction()">Select Scope</button>
<input type"text" name="Scope[]" style="background-color:#FFE68C">
</td>
</tr>
</table>
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
var popup;
function SelectScope() {
window.open("http://fisenusa.net/pm/pmSelectScope.php", "_blank", "width=550,height=875");
popup.focus();
}
</script>
EDITED Popup Window Code
<h1>Select Scope</h1>
<h3>Select all that apply</h3>
<form name="childForm" id="updateParent();">
<li><input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font>
<input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font>
<input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font>
<input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font>
<input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font>
<br><br>
<li><input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font>
<input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font>
<input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font>
<input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font>
<input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font>
<br><br>
<li><input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font>
<input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font>
<input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font>
<input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font>
<input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font>
<input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font>
<br><br>
<li><input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font>
<input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font>
<input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font>
<input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font>
<input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font>
<br><br>
<li><input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font>
<input type="checkbox" name="S23" value="XP"/><font size="4">XP</font>
<input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font>
<input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font>
<input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font>
<input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font>
<br><br>
<li><input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font>
<input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font>
<input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font>
<input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font>
<br><br>
<li><input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font>
<input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font>
<input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font>
<input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font>
<input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font>
<br><br>
<li><input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font>
<input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font>
<input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font>
<input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font>
<input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font>
<br><br>
<li><input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font>
<input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font>
<input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font>
<input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font>
<br><br>
<li><input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font>
<input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font>
<input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font>
<input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font>
<input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font>
<br><br>
<li><input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font>
<input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font>
<input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font>
<input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font>
<input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font>
<br><br>
<li><input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font>
<input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font>
<input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font>
<input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font>
<br><br>
<li><input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font>
<input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font>
<input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font>
<input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font>
<br><br>
<li><input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font>
<input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font>
<input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font>
<input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font>
<input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font>
<br><br>
<li><input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font>
<input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font>
<input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font>
<input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font>
<input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font>
<br><br>
<li><input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font>
<input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font>
<input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font>
<input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font>
<input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font>
<br><br>
<li><input type="checkbox" name="S82" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S83" value="PLFrHX"/><font size="4">PlFrHX</li></font>
<br>
<input type="submit" value="Submit" />
</form>
<script>
function updateParent() {
s = "";
for (i = 0; i < 6; i++)
{
chk = eval("self.document.childForm.t" + i);
if (chk.checked)
s += chk.value + ", ";
}
opener.document.parentForm.toppings.value = s;
self.close();
}
</script>
i have created one form in that form i have 2 hidden fields which are displaying after checking a radio button . the code is
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
/html code/
<label for="name"> Any Accompanying Person ?:</label>
<input type="radio" name="yes" value="yes">Yes
<div class="selectContainer">
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" required>
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" required>
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
Here is my form .if user will check the "Any Accompanying Person ?" radio button then only name and age field will displaying that i am controlling throw style .
problem: when user submit the form without checking the "Any Accompanying Person ?" radio button then all so name and age fields are showing required .but i need those field required when the user clicks "Any Accompanying Person ?" radio button .
how to do this?
$('#person').change(function () {
$('#name').attr('required','required');
$('#age').attr('required','required');
});
give the id person to <input id="person" type="radio" name="yes" value="yes">Yes
give the id name and age to <input type="text" size="20" name="name[]" id="name">
give the id age to <input type="text" size="20" name="age[]" required>
According to your CSS
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
The .selectContainer is not displayed and you are making it setting it displayed on selecting the radio button .In this case you cannot select the radio button as it is not visible due to your CSS.Set the visibilty for this selectContainer block so that you are able to select the radiobutton
and after that use ajax to check that whenever the button is checked that is
$('yourbutton').change(function () {
if($(this).is(':on') {
$('#name').attr('required');
$('#age').attr('required');
}
});
I hope this solves your problem.
<html>
<head>
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
</head>
<body>
<form>
<label for="name"> Any Accompanying Person ?:</label>
<input type="radio" name="yes" value="yes">Yes
<div class="selectContainer">
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" required>
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" required>
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
</body>
</html>
Use this code.this doesnot give any error. Then Add the ajax code or any scripting according to your requirement .
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.