Hide/Show table rows based on checkbox value in a JSP - javascript

I am trying to implement a registration page where fields can be different based on user type.
Here is my JSP page
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$(".Alumni").hide();
$('#selectType').change(function () {
var val = $(this).val();
if (val == "ALUMNI") {
$('.Alumni').show();
}
});
});
</script>
<style>
.error {
color: #ff0000;
}
.errorblock {
color: #000;
background-color: #ffEEEE;
border: 3px solid #ff0000;
padding: 8px;
margin: 16px;
}
</style>
</head>
<body>
<h2>Registration </h2>
<form:form method="POST" action="register" modelAttribute ="user">
<form:errors path="*" cssClass="errorblock" element="div" />
<table>
<tr>
<td>First Name :</td>
<td><form:input path="fName" />
</td>
<td><form:errors path="fName" cssClass="error" />
</td>
</tr>
<tr>
<td>Last Name :</td>
<td><form:input path="lName" />
</td>
<td><form:errors path="lName" cssClass="error" />
</td>
</tr>
<tr>
<td>Middle Name :</td>
<td><form:input path="mName" />
</td>
<td><form:errors path="mName" cssClass="error" />
</td>
</tr>
<tr>
<td>User Name :</td>
<td><form:input path="username" />
</td>
<td><form:errors path="username" cssClass="error" />
</td>
</tr>
<tr>
<td>Password :</td>
<td><form:input path="password" type="password"/>
</td>
<td><form:errors path="password" cssClass="error" />
</td>
</tr>
<tr>
<td>Password Confirmation:</td>
<td><form:input path="confPassword" type="password" />
</td>
<td><form:errors path="confPassword" cssClass="error" />
</td>
</tr>
<tr>
<td>Email Address:</td>
<td><form:input path="email" />
</td>
<td><form:errors path="email" cssClass="error" />
</td>
</tr>
<tr>
<td>Type :</td>
<td><form:checkboxes id="selectType" items="${typeList}"
path="type" /></td>
<td><form:errors path="type" cssClass="error" />
</td>
</tr>
<tr>
</tr>
<tr>
<td>Address :</td>
</tr>
<tr>
<td>Country :</td>
<td><form:input path="country" />
</td>
<td><form:errors path="country" cssClass="error" />
</td>
</tr>
<tr>
<td>State :</td>
<td><form:input path="state" />
</td>
<td><form:errors path="state" cssClass="error" />
</td>
</tr>
<tr>
<td>City :</td>
<td><form:input path="city" />
</td>
<td><form:errors path="city" cssClass="error" />
</td>
</tr>
<tr>
<td>Street :</td>
<td><form:input path="street" />
</td>
<td><form:errors path="street" cssClass="error" />
</td>
</tr>
<tr class="Alumni">
<td >Year of Graduation :</td>
<td><form:input path="yOfGrad" />
</td>
<td><form:errors path="yOfGrad" cssClass="error" />
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Registration Request" /></td>
</tr>
</table>
</form:form>
I have looked around for some example but unfortunately I couldn't accomplish what I am trying to do.
Can anyone please tell me what am I doing wrong?
Your help is appreciated.


load your jQuery plugin in the page
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
demo

Related

How to I print By default in landscape mode

How i can I take print by default landscape mode. If I give in landscape mode also its printning as a portrait mode only.
I tried the following code. That one also not working.
#media print{#page {size: landscape}}
Please find the image. How can I resolve this issue. I want to show only the text what I have entered in the textbox. Please help me how can I resolve this issue.
jsfiddle
$scope.print = function(divName,secondDiv){
$timeout(function () {
var printContents = document.getElementById(divName).innerHTML;
var printContents1 = document.getElementById(secondDiv).innerHTML;
console.log(printContents);
var w = window.open();
w.document.open();
$timeout(function(){
w.document.onreadystatechange=function(){
if(this.readyState==='complete'){
this.onreadystatechange=function(){};
w.focus();
w.print();
w.close();
}
}
},1000);
w.document.write('<!doctype html><html><head><title>');
w.document.write('</title><link rel="stylesheet" type="text/css" href="css/main.css" /><link rel="stylesheet" type="text/css" href="css/docs.css" /><link rel="stylesheet" type="text/css" href="css/angular-material.css" /></head><body onload="window.print();window.close()" style="font-size:14px;" ng-app="app" class="" ng-controller="mainController" >');
w.document.write(printContents+printContents1); //only part of the page to print, using jquery
w.document.write('</body></html>');
w.document.write('<style>#media print { input { border: none !important;text-align:right!important;font-size:12px!important;margin-top:2px!important; } th,td{height:3px!important;position:relative;} }</style>');
w.document.close(); //this seems to be the thing doing the trick
}, 1000);
}
<div ng-hide="true" class="rec_wrapper" id="printableArea"
style="margin-top: 0px; width: 100%;">
<table class="makeWidth" border="1" style="border-collapse:collapse;">
<tr>
<td>
<table class="first" width="782" border="1" style="border-collapse:collapse;height:10px;">
<tr>
<td width="702">
<div align="center"><strong><b>Challan For Cash Deposit in Any Branch Of SBI (Power Jyothi)</b></strong></div>
<p style="text-align:center">CUSTOMER COPY</p>
</td>
</tr>
</table></br>
<p style="margin-top:1px;"><strong><b> Bank Of </b> <b><u>Branch Coimbatore</u></b></strong> Branch</p>
<p style="margin-top:0px;"><strong>Date <b><u> </u> </b> </strong></p>
<p style="margin-top:0px;">For the Credit of <strong><b></strong></b></p>
<p style="margin-top:0px;">Depositor's Name : <strong><u> <input type="text" class="input printText1" ng-model="depositorName" style="font-weight:900;font-size:10px" value={{depositorName}} placeholder="Depositor Name"></u></strong> </p>
<p style="margin-top:0px;">Depositor's Mobile No :<strong><u> <input id="depositNum" type="number" class="input printText" ng-model="depositorNo" style="font-weight:900;font-size:10px" value={{depositorNo}} placeholder="Depositor mobile number"></u></strong> </p>
<p style="margin-top:0px;">Amount in Rs :<strong><b><u></u></b></strong> </p>
<p style="margin-top:0px;">Amount ( in Words) : <strong><b><u></u></b></strong> </p>
</hr>
<hr>
<table id="cashDetails" border="1" style="border-collapse:collapse;">
<tr>
<th colspan="3" style="text-align:center">Details of Cash</th>
</tr>
<tr>
<td style="text-align:center;">Cash Notes</td>
<td style="text-align:center;">Amount in Rs.</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount" id="textBox2" value={{amount}}>X 2000</td>
<td style="text-align:center">{{ (+amount) * 2000}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount1" id="textBox2" value={{amount1}}>X 500</td>
<td style="text-align:center">{{ (+amount1) * 500}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount2" id="textBox2" value={{amount2}}>X 200</td>
<td style="text-align:center">{{ (+amount2) * 200}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount3" id="textBox2" value={{amount3}}>X 100</td>
<td style="text-align:center">{{ (+amount3) * 100}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount4" id="textBox2" value={{amount4}}>X 50</td>
<td style="text-align:center">{{ (+amount4) * 50}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount5" id="textBox2" value={{amount5}}>X 20</td>
<td style="text-align:center">{{ (+amount5) * 20}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount6" id="textBox2" value={{amount6}}>X 10</td>
<td style="text-align:center">{{ (+amount6) * 10}}</td>
</tr>
<tr>
<td style="text-align:left;">Coins</td>
<td></td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount7" id="textBox2" value={{amount7}}>X 10</td>
<td style="text-align:center">{{ (+amount7) * 10}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount8" id="textBox2" value={{amount8}}>X 5</td>
<td style="text-align:center">{{ (+amount8) * 5}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount9" id="textBox2" value={{amount9}}>X 2</td>
<td style="text-align:center;width:48%">{{ (+amount9) * 2}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()"ng-model="amount10" id="textBox2" value={{amount10}}>X 1</td>
<td style="text-align:center">{{ (+amount10) * 1}}</td>
</tr>
<tr>
<td style="text-align:left;height:10px;">Total</td>
<td style="text-align:center;height:20px">{{total}}</td>
</tr>
</table></br></br></br></br></br>
<label style="margin-left:7px;">Cashier</label>
<label style="margin-left:90px;">Cash/Passing Officer</label>
<label style="margin-left:20px;">Depositor's Signature</label>
</td>
</tr></table>
</div></br></br></br>

Try this it might work..
#page {
size: A4 landscape;
}

I am trying to create a form using a table for the inputs

As I say, I am using a table to create a form. input-small and its label fits great in various places. I have opened up three rows in one column to place a 3 row textarea. Simple I thought, but I get a messed up table that appears OK in the live view but has half the input-small placeholders are missing, in the design view (Dreamweaver)it is full of broken tags.
Here is the code without the textarea and with.
Without
<table width="581" border="0" summary="Contact">
<caption>
Personal Details
</caption>
<tr>
<td width="120">Full Name</td>
<td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
<td width="71">Phone</td>
<td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td>Postal Address</td>
<td rowspan="4"> </td>
<td>Email</td>
<td><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">Emergency Contact</td>
<td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
With
<table width="581" border="0" summary="Contact">
<caption>
Personal Details
</caption>
<tr>
<td width="120">Full Name</td>
<td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
<td width="71">Phone</td>
<td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td>Postal Address</td>
<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></td>
<td>Email</td>
<td><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">Emergency Contact</td>
<td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Cheers

Your problem is that the textarea is not closed:
<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea></td>
See </textarea>. It is needed.

Close off the field with </textarea>:
<textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea>

jquery ui - slider not working

I want to use a jQuery UI slider on this page, but for some reason it won't work. You will see I am busy with "Height in cm without shoes" and I will complete this form as soon as I can get this problem solved. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module Health Measurements</title>
<link rel="stylesheet" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3/demos/demos.css">
<script>
$(function() {
$( "#slider-40" ).slider({
min: 65,
max: 240,
value: 170,
slide: function( event, ui ) {
$( "#40" ).val( ui.value );
}
});
$( "#40" ).val( $( "#slider-40" ).slider( "40" ) );
});
</script>
<style type="text/css">
/*
.style2 {font-size: medium}
*/
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="550" border="1">
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h3>Health Measurements</h3></td>
</tr>
<tr>
<td width="332">Height in cm without shoes</td>
<td width="202">
<label for="40"><span class="style2">Height</span>:</label>
<input type="text" id="40" style="border:0; color:#f6931f; font-weight:bold;" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="slider-40" style="height:5px;"></div>
</td>
</tr>
<tr>
<td>Weight in kg without shoes</td>
<td><label>
<input name="41" type="text" id="41" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Hip circumference in cm</td>
<td><label>
<input name="42" type="text" id="42" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Waist circumference in cm</td>
<td><label>
<input name="43" type="text" id="43" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Have you eaten in the last 7 hours?</td>
<td><label>
<select name="44" id="44">
<option>Yes</option>
<option>No</option>
</select>
</label></td>
</tr>
<tr>
<td>Systolic blood pressure mmHg</td>
<td><label>
<input name="45" type="text" id="45" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure mmHg</td>
<td><label>
<input name="46" type="text" id="46" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Glucose mmol/l</td>
<td><label>
<input name="47" type="text" id="47" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Total Cholesterol mmol/l</td>
<td><label>
<input name="48" type="text" id="48" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h5>BP 5 Minute Follow-up</h5></td>
</tr>
<tr>
<td>Systolic blood pressure 5 min</td>
<td><label>
<input name="51" type="text" id="51" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure 5 min</td>
<td><label>
<input name="52" type="text" id="52" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="button1" id="button1" value="Submit" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
I would appreciate if someone could just point out if you see some errors?

This works for me:
plunker
If the slider does not show up at all please check:
jquery and jquery-ui are loaded.
jquery-ui is loaded AFTER jquery

How to Change the <div> text depending on multiple cehckboxes with jquery?

i'm trying to create an Excel-Form to a Web-form and now i'm stuck at this part: http://jsfiddle.net/J9NAS/40/
<table id="model">
<tr>
<th class="auto-style2">Basic</th>
<th class="auto-style2">Maxi</th>
<th>Short</th>
<th>Name</th>
<th class="auto-style2">Selection</th>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>A</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox1" type="checkbox" value="HA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>B</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox2" type="checkbox" value="PA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>C</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox3" type="checkbox" value="IA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>D</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox4" type="checkbox" value="SPIN" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>E</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox5" type="checkbox" value="VB" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>F</td>
<td>asdasd)</td>
<td class="auto-style2">
<input id="Checkbox6" type="checkbox" value="BWCPN" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>G</td>
<td>asddas</td>
<td class="auto-style2">
<input id="Checkbox7" type="checkbox" value="GBH" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>H</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox8" type="checkbox" value="GR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>I</td>
<td>dsad</td>
<td class="auto-style2">
<input id="Checkbox9" type="checkbox" value="IR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>J</td>
<td>asdasds.</td>
<td class="auto-style2">
<input id="Checkbox10" type="checkbox" value="CC" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>K</td>
<td>asdasd.</td>
<td class="auto-style2">
<input id="Checkbox11" type="checkbox" value="GA" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>L</td>
<td>Rasdasd.</td>
<td class="auto-style2">
<input id="Checkbox12" type="checkbox" value="GPAT" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>M</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox13" type="checkbox" value="GPIN" class="maxi" />
</td>
</tr>
</table>
<h1>Callflow:</h1>
<div id="status"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#status").change(function () {
if (("#Checkbox1").attr("checked") === true) {
$("#status").append("#Checkbox1").val();
};
});
});
</script>
i want to show the user what kind of Model he chose (Basic or Maxi). The criteria are shown with the 'X's and depending on what features a user chooses, the text field below the form should show "basic" or "maxi".
Can someone help me with that? My JQuery/JS Skills are very basic, yet.

Try
$(document).ready(function () {
var $basic = $('.basic'), $maxi = $('.maxi'), $status = $('#status');
$basic.add($maxi).change(function(){
if($maxi.filter(':checked').length){
$status.text('Maxi')
} else if($basic.filter(':checked').length){
$status.text('Baisc')
} else {
$status.text('')
}
})
});
Demo: Fiddle

You're using a wrong selector. #status belongs to div
$("#status").change(function () {
so you need to have like
$("input[type=checkbox]").change(function () {
based on the value you can show/hide the div.

Writing jQuery function in PHP file

I've encountered a problem jQuery and PHP. I'm writing a jQuery function in my registration.php file, but it doesn't work.
This jQuery function is to control all the textbox via the checbox.
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#css').click(function(){
if (this.checked) {
$('#csc').removeAttr("disabled");
$('#cse').removeAttr("disabled");
$('#csp').removeAttr("disabled");
}
else {
$("#csc").attr("disabled", true);
$("#cse").attr("disabled", true);
$("#csp").attr("disabled", true);
}
});
$('#wrt').click(function(){
if (this.checked) {
$('#wsc').removeAttr("disabled");
$('#wse').removeAttr("disabled");
$('#wsp').removeAttr("disabled");
}
else {
$("#wsc").attr("disabled", true);
$("#wse").attr("disabled", true);
$("#wsp").attr("disabled", true);
}
});
$('#maths').click(function(){
if (this.checked) {
$('#msc').removeAttr("disabled");
$('#mse').removeAttr("disabled");
$('#msp').removeAttr("disabled");
}
else {
$("#msc").attr("disabled", true);
$("#mse").attr("disabled", true);
$("#msp").attr("disabled", true);
}
});
$('#sccb').click(function(){
if (this.checked) {
$('#ssc').removeAttr("disabled");
$('#sse').removeAttr("disabled");
$('#ssp').removeAttr("disabled");
}
else {
$("#ssc").attr("disabled", true);
$("#sse").attr("disabled", true);
$("#ssp").attr("disabled", true);
}
});
});
</script>
<table class="registration">
<tr>
<td width="250">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Subjects</strong></p>
</td>
<td width="220">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Full Name</strong></p>
</td>
<td width="200">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Email</strong></p>
</td>
<td width="150">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Phone Number</strong></p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="cscb" name="computerskills" value="computerskills"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png"></td>
<td><p5>Computer Skills</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="csc" name="CScoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="cse" name="CS_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="csp" name="CS_phone" disabled="disabled"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" name="writing" value="writing"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png"></td>
<td><p5>English</p5></td>
<td><p5 style="font-size: 12px; font-weight: normal; color: #333333;"> & </p5></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-writing-icon.png"></td>
<td><p5>Writing</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="wsc" name="Engcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="wse" name="Eng_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="wsp" disabled="disabled" name="Eng_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" name="mathematics" value="mathematics"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png"></td>
<td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="msc"name="Mcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="mse" name="M_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="msp" disabled="disabled" name="M_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="sccb" name="science" value="science"></input>
</td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png"></td>
<td><p5>Science</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="ssc" name="Sccoor" disabled="disabled" size="30"></input>
</script>
</td>
<td>
<input type="text" id="sse" name="Sc_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="ssp" name="Sc_phone" disabled="disabled"></input>
</td>
</tr>
</table>
Why is that so? Please help, I'm still new to the programming world. Thanks.
I tried to save it as .html file it works, but it doesn't work with .php

For changing disabled and other DOM properties you should use prop method instead of attr, and instead of using IDs you can traverse the DOM and find the target inputs using closest and find methods.
$(document).ready(function () {
$('table input[type=checkbox]').change(function () {
$(this).closest('table')
.closest('tr')
.find('input[type=text]')
.prop('disabled', !this.checked);
});
});
http://jsfiddle.net/hum7n/

"css","wrt","maths" Id attributes are not given to corresponding check box.. Please add this and try.
HTML code:
<table class="registration">
<tr>
<td width="250">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Subjects</strong></p>
</td>
<td width="220">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Full Name</strong></p>
</td>
<td width="200">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Email</strong></p>
</td>
<td width="150">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px"><strong>Phone Number</strong></p>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="css" name="computerskills" value="computerskills"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png"></td>
<td><p5>Computer Skills</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="csc" name="CScoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="cse" name="CS_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="csp" name="CS_phone" disabled="disabled"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" name="writing" id="wrt" value="writing"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png"></td>
<td><p5>English</p5></td>
<td><p5 style="font-size: 12px; font-weight: normal; color: #333333;"> & </p5></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-writing-icon.png"></td>
<td><p5>Writing</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="wsc" name="Engcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="wse" name="Eng_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="wsp" disabled="disabled" name="Eng_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="maths" name="mathematics" value="mathematics"></td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png"></td>
<td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="msc"name="Mcoor" disabled="disabled" size="30"></input>
</td>
<td>
<input type="text" id="mse" name="M_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="msp" disabled="disabled" name="M_phone"></input>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input type="checkbox" id="sccb" name="science" value="science"></input>
</td>
<td><img src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png"></td>
<td><p5>Science</p5></td>
</tr>
</table>
</td>
<td>
<input type="text" id="ssc" name="Sccoor" disabled="disabled" size="30"></input>
</script>
</td>
<td>
<input type="text" id="sse" name="Sc_email" disabled="disabled" size="27"></input>
</td>
<td>
<input type="text" id="ssp" name="Sc_phone" disabled="disabled"></input>
</td>
</tr>
</table>

I made some tweaks to it
$(document).ready(function() {
$('.skills').on('click', '.chk_skill', function(){
$(this).closest('tr.skill').find('input').not(this).prop('disabled', !this.checked)
})
});
HTML
<table class="registration">
<tr>
<td width="250">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Subjects</strong>
</p>
</td>
<td width="220">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Full Name</strong>
</p>
</td>
<td width="200">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Email</strong>
</p>
</td>
<td width="150">
<p style="font-color: black; font-size: 12px; margin-bottom: 1px">
<strong>Phone Number</strong>
</p>
</td>
</tr>
<tr>
<td>
<table class="skills">
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox" id="cscb" name="computerskills"
value="computerskills" /></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-computerskills-icon.png" /></td>
<td><p5>Computer Skills</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="csc" name="CScoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="cse" name="CS_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="csp" name="CS_phone"
disabled="disabled"></input></td>
</tr>
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox" name="writing"
value="writing"></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-english-icon.png" /></td>
<td><p5>English</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="wsc" name="Engcoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="wse" name="Eng_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="wsp" disabled="disabled"
name="Eng_phone"></input></td>
</tr>
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox"
name="mathematics" value="mathematics" /></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-mathematics-icon.png" /></td>
<td><p5>Mathematics</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="msc" name="Mcoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="mse" name="M_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="msp" disabled="disabled"
name="M_phone"></input></td>
</tr>
<tr class="skill">
<td>
<table>
<tr>
<td><input class="chk_skill" type="checkbox" id="sccb"
name="science" value="science"></input></td>
<td><img
src="/wp-content/themes/twentyeleven/images/EATS/icas-subject-science-icon.png" /></td>
<td><p5>Science</p5></td>
</tr>
</table>
</td>
<td><input type="text" id="ssc" name="Sccoor"
disabled="disabled" size="30"></input></td>
<td><input type="text" id="sse" name="Sc_email"
disabled="disabled" size="27"></input></td>
<td><input type="text" id="ssp" name="Sc_phone"
disabled="disabled"></input></td>
</tr>
</table>
</td>
</tr>
</table>
Demo: Fiddle

Categories

Resources