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 .
Related
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>
Here is my code for the checkbox. At the moment I retrieve all labels in each of the rows.
<table id="mytable">
<tr>
<p><label for="id_q">Enter Gene:</label> <input textarea name="Text1" cols="40" rows="5" name="q" type="search" value="CYP17A1" /></p>
<p><label for="id_models_0">Disease:</label> <ul id="id_models[]"><td><li><label for="id_models_0"><input checked="checked" id="id_models_0" name="models" input type="checkbox" value="predictgene.amyotrophic_lateral_sclerosis_motor_neuron_disease" /> ALT</label></li></td>
<td><li><label for="id_models_1"><input id="id_models_1" name="models[]" input type="checkbox" value="predictgene.arthrogryposis" /> AR</label></li></td>
<td><li><label for="id_models_2"><input id="id_models_2" name="models[]" input type="checkbox" value="predictgene.congenital_myaesthenia" /> CM</label></li></td>
<td><li><label for="id_models_3"><input id="id_models_3" name="models[]" input type="checkbox" value="predictgene.early_onset_dystonia" /> ED</label></li></ul></p></td>
<br/><br>
</tr>
<button id="save">Click</button>
</table>
So I've been sent some HTML to upload to our website, essentially it's a login form, however the Login button does nothing when pressed in the browser. I see that it's using a "javascript:tapestry.form.submit" to submit the form using a stylized button image (img src="images/submit.png" alt="submit") which I think may be the issue.
When I change it from this button to a standard button using (input type="submit" value="Login" /) it works fine. Is there a reason anyone can think of why this button could be causing an issue not the load in the browser? The form works if you type in your details and press return.
<div id="loginPanel">
<div class="text">
<p class="loginText">Welcome</p>
<p class="loginText">Log-in to place your order</p>
</div>
<form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
<div style="display:none;" id="loginFormhidden">
<input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
<input type="hidden" name="seedids" value="" />
<input type="hidden" name="submitmode" value="" />
<input type="hidden" name="submitname" value="" />
<input type="hidden" name="If_0" value="F" />
<input type="hidden" name="If_2" value="F" />
<input type="hidden" name="If_4" value="F" />
<input type="hidden" name="Hidden" id="Hidden" value="X" />
</div>
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" value="" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" id="password" size="30" /></td>
</tr>
</table>
<a href="javascript:tapestry.form.submit('loginForm', 'loginButton');" id="loginButton" class="bLink">
<img src="images/submit.png" alt="submit">
</a>
<input type="submit" style="width:0;height:0;border:0"/>
</form>
</div>
Following on from the comments above, our real aim here is to change the way the submit button looks, rather than to add submit behaviour to an image. We can do this with CSS.
#loginForm > input[type="submit"] {
width:60px;
height:60px;
// transparent background colour
background-color: rgba(0,0,0,0);
// allows the background to resize when you change width/height
background-size:100% 100%;
// use your submit image
background-image: url("images/submit.png");
// remove default button border
border:none;
// make a nicy pointy cursor
cursor:pointer;
}
I have removed the anchor and image from the HTML, and added a blank value to the submit button so no text shows over our background image.
<div id="loginPanel">
<div class="text">
<p class="loginText">Welcome</p>
<p class="loginText">Log-in to place your order</p>
</div>
<form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
<div style="display:none;" id="loginFormhidden">
<input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
<input type="hidden" name="seedids" value="" />
<input type="hidden" name="submitmode" value="" />
<input type="hidden" name="submitname" value="" />
<input type="hidden" name="If_0" value="F" />
<input type="hidden" name="If_2" value="F" />
<input type="hidden" name="If_4" value="F" />
<input type="hidden" name="Hidden" id="Hidden" value="X" />
</div>
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" value="" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" id="password" size="30" /></td>
</tr>
</table>
<input type="submit" value="" />
</form>
</div>
Working example here
If I click on submit button then kot value will be increased by 1...initially it will be 0, and after submitting data into databaseit the page will be redirected to that page only.
<table>
<tr>
<td>
<label for="kot_no">KOT No</label>
<input type="text" id="kot_no" name="kotno" value="" class="option">
<label for="table_no">Table No</label>
<input type="text" id="table_no" name="tableno" class="option" placeholder="0">
<br>
<br>
<label for="Menu">Enter Menu Name</label>
<input type="text" placeholder="Enter menu name" name="menuname">
<br>
<br>
<label for="quantity">Enter Quantity</label>
<input type="text" placeholder="Enter Quantity" name="quantity" style="margin-left: 25px">
<br>
<br>
<input type="submit" style="margin-left: 124px" class="button">
<br>
</td>
</tr>
</table>
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>