How would I use JavaScript to add up some values from a form? I want to display the value in a read-only text field at the bottom of the form. Here is my code so far, I have made each form value the value of what I want to add:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function checkAll(){
document.getElementById("notop").checked=false;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
</script>
</head>
<body>
<div class="head">
<h3 align="center">Gourmet Pizza</h3>
</div>
<div class="main">
<form action="" method="get" name="pizza">
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<td>Name:</td>
<td><input name="name" type="text" id="name" /></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="name" type="text" id="phone"/></td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="8.00" id="small" onclick="this.form.total.value=calculateTotal(this);" > <label for="small">Small ($8.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="pepperoni" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="pepperoni">Pepperoni
</label>
<input type="checkbox" name="topping" id="sausage" value="0.50" onClick="checkAll(document.pizza.topping)" class="top" />
<label for="sausage">Sausage
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="10.00" id="medium" onclick="this.form.total.value=calculateTotal(this);" /> <label for="medium">Medium ($10.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="mushroom" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="mushroom">Mushroom
</label>
<input type="checkbox" name="topping" id="olive" value="0.50" onClick="checkAll(document.pizza.topping" class="top"/>
<label for="olive">Olive
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="12.00" id="large" onclick="this.form.total.value=calculateTotal(this);" onselect="addTwelve()"/> <label for="large">Large ($12.00)</label></td>
<td style="border:none">
<input type="checkbox" name="Un_CheckAll" value="0.00" id="notop" class="none" onClick="uncheckAll(document.pizza.topping)"/>
<label for="notop">No Toppings (Cheese Pizza)
</label>
</td>
</tr>
<tr>
<td colspan="2">
Your Order:<br />s
<textarea name="" colums="2">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" name="button" id="button" value="Process Order" />
<input type="reset" name="button2" id="button2" value="Clear Order" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Any help is greatly appreciated!
you can do something like this
var total = 0;
window.onload = function() {
var toppings = document.pizza.topping;
for (var i = 0, l = toppings.length; i < l; i++) {
toppings[i].addEventListener("change", function() {
if (this.checked) {
total += parseFloat(this.value);
} else {
total -= parseFloat(this.value);
}
alert(total);
}, false);
}
};
see example here
Related
I Have html table as below code, How to check all checkboxes with different names in the same row??
Such as in the row of "Item name 1": if I check the box of "Check all", and then the box of "Date of Start: 2022-04-01" and the box of " Date of End: 2022-04-30" will be auto checked.
<table border="1" cellpadding="10" cellspacing="1" width="100%" class="tblListForm">
<tbody><tr class="listheader">
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('tbid[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<td style="width:10%"><input type="checkbox" onclick="toggle(this)">Quantity/Select All</td>
<td style="width:67%"> Item Details </td>
<td style="width:10%; text-align:right;"> Unit Price </td>
<td style="width:13%; text-align:right;"> Sub-total </td>
</tr>
<tr class="evenRow">
<td style="vertical-align:top">
<input type="checkbox" name="tbid[]" value="238"> 1</td>
<td style="vertical-align:top">
Item name 1 <br>
<input type="checkbox" name="item_no[]" value="1"> Check all<input type="checkbox" name="item_date_start[]" value="2022-04-01">Date of Start: 2022-04-01<input type="checkbox" name="item_date_end[]" value="2022-04-30"> Date of End: 2022-04-30</td>
<td style="vertical-align:top; text-align:right;">
105.00</td>
<td style="vertical-align:top; text-align:right;">
105.00</td>
</tr>
<tr class="oddRow">
<td style="vertical-align:top">
<input type="checkbox" name="tbid[]" value="239"> 1</td>
<td style="vertical-align:top">
Item name 2<br>
<input type="checkbox" name="item_no[]" value="17"> Check all<input type="checkbox" name="item_date_start[]" value="2022-05-01">Date of Start: 2022-05-01<input type="checkbox" name="item_date_end[]" value="2022-05-31"> Date of End: 2022-05-31</td>
<td style="vertical-align:top; text-align:right;">
250.00</td>
<td style="vertical-align:top; text-align:right;">
250.00</td>
</tr>
<tr class="listheader">
<td></td>
<td></td>
<td style="vertical-align:top; text-align:right;"> Total (HKD): </td>
<td style="vertical-align:top; text-align:right;"> 355.00</td>
</tr>
</tbody>
</table>
Thank you very much for your sharing & support in advance!
In this example I added a <fieldset> as a (near) parent to the checkboxes. The event listener will look for any change in the form. In the if() statement I determine if it was a "Check all" that changed. If so, all the input elements in the closest fieldset should have the same value.
document.forms.form01.addEventListener('change', e => {
// the field that just changed
let field = e.target;
// somehow determine if the change was
// on a "Check all" field -- here if class name = "checkall"
if (field.className == 'checkall') {
// get the parent fieldset
let fieldset = e.target.closest('fieldset');
// for each element in fieldset
[...fieldset.elements].forEach(input => {
// all should have the same value as "check all"
input.checked = field.checked;
});
}
});
<form name="form01">
<table>
<tr>
<td style="vertical-align:top">
<fieldset>
<label><input type="checkbox" name="item_no[]" class="checkall" value="1">Check all</label>
<label><input type="checkbox" name="item_date_start[]" value="2022-04-01">Date of Start: 2022-04-01</label>
<label><input type="checkbox" name="item_date_end[]" value="2022-04-30"> Date of End: 2022-04-30</label>
</fieldset>
</td>
</tr>
</table>
</form>
I find a similar answer from the web as below, but how to remove checkbox if click Uncheck, need to rewrite the javascript.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.js"
></script>
</head>
<body>
<div id="div1">
<input type="button" id="btnDiv1" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank</div>
<div id="div2">
<input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" />Matt</div>
<div id="div3">
<input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles</div>
<script type="text/javascript">
$('.select-all').on('click', function ()
{
$(this).nextAll('.check').prop('checked', true);
});
</script>
</body>
</html>
Why i dont get the javascript value after calculation in input tag of my htm given
`id=""result"`
while i get this in span id and using document.write(num);
<?php include ('header.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Calculator </title>
</head>
<body>
<form>
<table>
<tr>
<td>
<label style="padding-top: 5px" >Enter Your Per KG Price : </label>
</td>
<td style="padding-left:15px;">
<input type="tex" id="perkg" placeholder="Enter Per KG Price">
</td>
</tr>
<tr>
<td>
<label style="padding-top: 10px" >Enter Your Price : </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="required" placeholder="Desired Amount">
</td>
</tr>
<tr>
<td>
<input type="button" onClick="multiply()" Value="Multiply" />
</td>
</tr>
<td>
<label style="padding-top: 10px" > Weight Given To Customer In Grams </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="result" value="" placeholder="In Grams">
</td>
</tr>
</table>
<input type="button" onClick="divideBy()" Value="Divide" />
<p>The Result is : <br>
<span id = "results"></span>
</p>
</form>
<script type="text/javascript">
function multiply()
{
var num1 = document.getElementById("perkg").value;
var num2 = document.getElementById("required").value;
var num = (1000/num1) * num2;
document.getElementById("result").innerHTML = num;
//document.write(num); its working
}
</script>
</body>
</html>
To update input value attribute use value property instead of innerHTML
document.getElementById("result").value = num;
I am trying to make a little form in which the users select their gender. I have a script that creates a new line for additional users but the problem is that as this code clones the previous element and the radio button name attribute is the same as before making the gender selection name unusable, is there a way to change the radio buttons name when adding a new row so the group will be different to the previous groups name.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
table.appendChild(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
Assign name property for child elements of cloned node.
Use querySelector to select element.
Use querySelectorAll('#myTable tr') selector to get the length of the tr elements.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
var index = --document.querySelectorAll('#myTable tr').length;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
table.appendChild(newRow);
}
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
You should not try to clone the line and make changes to names.
You should generate the HTML code for the row and hanlding the correct name directly.
Here is an example snippet:
var idx = 0;
window.onload = addRow;
function addRow() {
var rowHTML = '<td><input placeholder="Surname" /></td><td><input placeholder="Forename(S)" /></td><td><input placeholder="Age" /></td><td><input placeholder="City" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Male" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Female" /></td>';
var row = document.createElement("tr");
row.innerHTML = rowHTML;
var table = document.getElementById('myTable');
table.appendChild(row);
idx++;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
</table>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
Done this with JQuery, Try this:
function addRow() {
var table = $('#myTable');
var newRow = $("#myTable tr:last").clone()
var name = $(newRow).find("input[type='radio']").attr("name");
var newVal = parseInt(name.match(/\d+/)) + 1;
$(newRow).find("input[type='radio']").attr("name", 'gender' + newVal);
table.append(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
I'm having issues displaying the math problems I have created in javascript. I'm not sure if I'm missing something or if I need to take something out. I would appreciate any help or input on this matter it's got me stumped.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Math Worksheet</title>
<script type="text/javascript">
var mathProblem = new Array();
// writing the problem 10 times
function writeProblem() {
var num1 = new Array();
var num2 = new Array();
for (var i = 0; i < 10; i++) {
num1 = (Math.floor(Math.random() * 50) + 1);
num2 = (Math.floor(Math.random() * 50) + 1);
document.getElementById("t" + i).innerHTML = num1;
document.getElementById("b" + i).innerHTML = "+" + num2;
mathProblem[i] = num1 + num2;
document.forms["prob" + i]["a" + i].value = "";
}
}
</script>
</head>
<body onload="writeProblem()">
<table border="0" cellspacing="50" id="frm1" width="800">
<tr>
<td width="50">
<label id="t1"></label><br>
<label id="b1"></label><br>
<hr>
<form name="prob1">
<input name="a1" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t2"></label><br>
<label id="b2"></label><br>
<hr>
<form name="prob2">
<input name="a2" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t3"></label><br>
<label id="b3"></label><br>
<hr>
<form name="prob3">
<input name="a3" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t4"></label><br>
<label id="b4"></label><br>
<hr>
<form name="prob4">
<input name="a4" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t5"></label><br>
<label id="b5"></label><br>
<hr>
<form name="prob5">
<input name="a5" size="3" type="text">
</form>
</td>
</tr>
<tr>
<td>
<label id="t6"></label><br>
<label id="b6"></label><br>
<hr>
<form name="prob6">
<input name="a6" size="3" type="text">
</form>
</td>
<td>
<label id="t7"></label><br>
<label id="b7"></label><br>
<hr>
<form name="prob7">
<input name="a7" size="3" type="text">
</form>
</td>
<td>
<label id="t8"></label><br>
<label id="b8"></label><br>
<hr>
<form name="prob8">
<input name="a8" size="3" type="text">
</form>
</td>
<td>
<label id="t9"></label><br>
<label id="b9"></label><br>
<hr>
<form name="prob9">
<input name="a9" size="3" type="text">
</form>
</td>
<td>
<label id="t10"></label><br>
<label id="b10"></label><br>
<hr>
<form name="prob10">
<input name="a10" size="3" type="text">
</form>
</td>
</tr>
</table>
</body>
</html>
I noticed you are starting from i=0; and getElementById("t"+i) bu there is no element with id t0.Hope that helps
Just check the for loop. I have fix the problem.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Math Worksheet</title>
<script type="text/javascript">
var mathProblem = new Array();
// writing the problem 10 times
function writeProblem(){
var num1 = new Array();
var num2 = new Array();
for (var i=1; i<11; i++){
num1 = (Math.floor(Math.random()*50)+1);
num2 = (Math.floor(Math.random()*50)+1);
document.getElementById("t"+i).innerHTML = num1;
document.getElementById("b"+i).innerHTML = "+" + num2;
mathProblem[i] = num1 + num2;
document.forms["prob"+i]["a"+i].value = "";
}
}
</script>
</head>
<body onload="writeProblem()">
<table id="frm1" width="800" border="0" cellspacing="50">
<tr>
<td width="50"><label id="t1"></label><br /><label id="b1"></label><br /><hr /><form name="prob1"><input type="text" size="3" name="a1"></form></td>
<td width="50"><label id="t2"></label><br /><label id="b2"></label><br /><hr /><form name="prob2"><input type="text" size="3" name="a2"></form></td>
<td width="50"><label id="t3"></label><br /><label id="b3"></label><br /><hr /><form name="prob3"><input type="text" size="3" name="a3"></form></td>
<td width="50"><label id="t4"></label><br /><label id="b4"></label><br /><hr /><form name="prob4"><input type="text" size="3" name="a4"></form></td>
<td width="50"><label id="t5"></label><br /><label id="b5"></label><br /><hr /><form name="prob5"><input type="text" size="3" name="a5"></form></td>
</tr>
<tr>
<td><label id="t6"></label><br /><label id="b6"></label><br /><hr /><form name="prob6"><input type="text" size="3" name="a6"></form></td>
<td><label id="t7"></label><br /><label id="b7"></label><br /><hr /><form name="prob7"><input type="text" size="3" name="a7"></form></td>
<td><label id="t8"></label><br /><label id="b8"></label><br /><hr /><form name="prob8"><input type="text" size="3" name="a8"></form></td>
<td><label id="t9"></label><br /><label id="b9"></label><br /><hr /><form name="prob9"><input type="text" size="3" name="a9"></form></td>
<td><label id="t10"></label><br /><label id="b10"></label><br /><hr /><form name="prob10"><input type="text" size="3" name="a10"></form></td>
</tr>
</table>
</body>
</html>
You ids begin with t0/b0, so you have to change the index start from 1:
for (var i=1; i<=10; i++){
The DEMO.
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="myFunction(this)" />
</td>
</tr>
</table>
I want to clear textbox when we corresponding checkboc is checked. Here is my Java script,
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox1');
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox1');
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
Any idea?
In order to get the corresponding textbox, you can't get it by ID. Instead you should get the inputs parent table row and then find the input from there, so that it is relative to the checkbox.
Working demo
function CheckCheckboxes1(chk){
var txt = chk.parentNode.parentNode.cells[2].getElementsByTagName('input')[0];
if(chk.checked == true)
{
txt.value = "";
txt.readOnly = false;
}
else
{
txt.value = "Enter Username";
txt.readOnly = true;
}
}
Notes:
Use txt.readOnly not txt.disabled because disabled is something different.
Use the checkbox onchange event not onclick.
Hi in order to disable and enable you need to assign the id's to both checkbox and textboxs. please look at the below code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" id="1" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox2" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="2" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>`enter code here`
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox3" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="3" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox4" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="4" onclick="myFunction(this)" />
</td>
</tr>
</table>
</body>
</html>
As #Adil said it is easier if you use jQuery. You can give your textbox an id and your checkbox a cutstom attribute e.g.:
<td>
<input type="text" id="txt_1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" specId="1" onclick="CheckCheckboxes1(this)"/>
</td>
function CheckCheckboxes1(chk){
var specId = $(chk).attr("specId");
var txt = $("#txt_"+specId);
if(chk.checked == true)
{
$(txt).val("");
$(txt).attr("disabled","disabled");
}
else
{
$(txt).val("Enter Username");
$(txt).removeAttr("disabled");
}
}
Hope it helps!