Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<script>
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
</script>
<html>
<body>
<form action="" method="post">
<table border="1" id="table">
<tr> <td colspan="2">Select Technolgy:</td> </tr>
<tr> <td>c</td>
<td><input type="checkbox" name="techno[]" value="c" class='chk'></td>
</tr>
<tr> <td>hadoop</td>
<td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>
</tr>
<tr> <td>core java</td>
<td><input type="checkbox" name="techno[]" value="Core JAVA" class='chk'></td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>
</body>
</html>
Using this code, I candelete the checked checkbox. But how can I remove the checked checkbox containing row of table in the form?
I've read through this question, but it didn't help me.
Editing your code you can do it like this
function delBoxes() {
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for (var i = 0; i < boxes.length; i++) {
box = boxes[i];
if (box.checked) {
rowTag = box.parentNode.parentNode;
tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr>
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr>
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' />and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
But you have to consider changing design to something better. Set ids or classes and refer to them, instead of relative "magic number of levels".
If you mark rows with data-tech attribute then you could do something like:
function delBoxes() {
var classname = document.getElementsByClassName("chk");
for (var i = 0; i < classname.length; i++) {
box = classname[i]
if (box.checked) {
elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
elements[0].parentNode.removeChild(elements[0]);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr data-tech="c">
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr data-tech="hadoop">
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr data-tech="Core JAVA">
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' /> and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
Related
im planning to display my output thru innerHTML but the javascript cant seem to display my input just like i wanted. when user enter input into the form, i want to display the input by using innerHTML.
my attempt output is just in a normal list similar to something like this:
to students
output 1
output 2
output 3
to organizer
k1
k2
k5
<html>
<head>
<title>part b</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name = "pelajar1" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar2" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar3" rows = "4" cols = "110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
<script>
function printChecked()
{
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items=document.getElementsByName('kl');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementsByName("pelajar1").innerHTML = pel1;
document.getElementsByName("pelajar2").innerHTML = pel2;
document.getElementsByName("pelajar3").innerHTML = pel3;
document.getElementsByName("kl").innerHTML = items;
}
</script>
</body>
</html>
try this and see console
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked">
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you
interest
</td>
</tr>
<tr>
<td>1. to students</td>
<td>
<textarea
id="pelajar1"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar2"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar3"
rows="4"
cols="110"
></textarea>
</td>
</tr>
<tr>
<td>TO ORGANIZER</td>
<td>
<br />
<input
type="checkbox"
id="k1"
value="communication"
/>K1
<input
type="checkbox"
id="k2"
value="problems"
/>K2
<br />
<input
type="checkbox"
id="k3"
value="teamwork"
/>K3
<br />
<input
type="checkbox"
id="k4"
value="info"
/>K4
<br />
<input
type="checkbox"
id="k5"
value="business"
/>K5
<br />
<input
type="checkbox"
id="k6"
value="ethics"
/>K6
<br />
<input
type="checkbox"
id="k7"
value="leadership"
/>K7
<br />
</td>
</tr>
</table>
<br /><br />
<input
type="button"
onclick="printChecked()"
value="Submit"
/>
</form>
<div id="form"></div>
<script>
function printChecked() {
var pel1 =
document.getElementById("pelajar1");
var pel2 =
document.getElementById("pelajar2");
var pel3 =
document.getElementById("pelajar3");
var items = [];
for (let i = 0; i < 7; i++) {
var a = document.getElementById(
"k" + (i + 1),
);
a.checked ? items.push(a.value) : null;
}
console.log(
"1 : " +
pel1.value +
"\n2 :" +
pel2.value +
"\n3 :" +
pel3.value,
);
items.forEach((element) => {
console.log(element);
});
}
</script>
</body>
</html>
</tr>
</table>
</form>
</body>
</html>
Okay i am not so clear about what you want to achieve in here, i believe you want the form submit not to do submission and get the details in the function for some kind of computation , i use this as for a javascript approach for preventing default form submit
make use of a return function that returns false stating not to submit the form as in below example
if this satisfies your query, please refer=>
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
selectedItems += items[i].value + "\n";
}
console.log("pel1-data=> "+pel1[0].value);
console.log("pel2-data=> "+pel2[0].value);
console.log("pel3-data=> "+pel3[0].value);
console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
you can see return for onsubmit of form which gets value from the function printChecked() -> see last return statement in function
Additional
for jquery inside the called function definition we can just add the received event's preventDefault function
$("form").submit(function(event){
event.preventDefault();
});
Edit-> prints data on the same page using innerHtml
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
//selectedItems += items[i].value + "\n";
//add values as li elements
selectedItems += '<li>'+ items[i].value + '</li>';
}
//show list on submit
document.getElementById("toStudents").style.display = "block";
document.getElementById("toOrganizer").style.display = "block";
//add tostudents text area values in to list
document.getElementById("pelajar1").innerHTML=pel1[0].value;
document.getElementById("pelajar2").innerHTML=pel2[0].value;
document.getElementById("pelajar3").innerHTML=pel3[0].value;
//add toorganizer checkbox values in to list
document.getElementById("toOrganizer").innerHTML=selectedItems;
//just printing values in console
//console.log("pel1-data=> "+pel1[0].value);
//console.log("pel2-data=> "+pel2[0].value);
//console.log("pel3-data=> "+pel3[0].value);
//console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
/*list is hidden at first*/
#toStudents,#toOrganizer{
display:none;
list-style:none;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
<h2>To Students</h2>
<ul id="toStudents">
<li id="pelajar1"></li>
<li id="pelajar2"></li>
<li id="pelajar3"></li>
</ul>
<h2>To Organizer</h2>
<ul id="toOrganizer">
</ul>
</form>
the issue you seem to be experiencing is from the page reloading on the form submit BEFORE the JS function is called. Based on your code, you are calling printChecked() onsubmit when the button is clicked.
To fix your issue, look into Stop form refreshing page on submit, which, among other things, would involve adding return false to your onsubmit call. Other solutions from the same page mention not using button type="submit", and instead focusing on using the type="button" with a separate call from there onclick.
Hopefully this helps!
I have a table like this:
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
And I want to get the hidden value in the same td as the checked checkbox.
I tried this:
$("#TempTable tr input:checkbox:checked").each(function(){
alert($("#"+this.id).parent("td").child("input:hidden").val());
});
Of course, after I get value what I want, I will save it to an Array.
Not sure why the values are not on the checkbox, it would simplify the code.
But With your code, you would just use next and map.
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return $(this).next().val();
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
and as I said before putting the values on the checkbox simplify's it
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return this.value;
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1" value="1"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3" value="3"/>
</td>
</tr>
</table>
Try this:
$("input[type='checkbox']").each( function (){
var value = $(this).parent().find("input:hidden").val();
// this will return the value of each hidden field
});
You can use siblings and input type hidden to get the value.
$("#TempTable tr input[type=checkbox]:checked").each(function(){
$(this).siblings('input[type=hidden]').val()
});
I have designed a table below using HTML. I have validated for only one row, but for the 2nd row it was not validated. Below UI have given submit that validates entire table.
Condition is that at least one checkbox should be selected from each row.
Using pure js: https://jsfiddle.net/v8mghww9/1/
function validate(form)
{
var rows = document.getElementsByTagName('tr');
var isTableValid = true;
for(var i=0;i<rows.length;i++) {
var checkboxs=rows[i].getElementsByTagName("input");
var okay=false;
for(var j=0;j<checkboxs.length;j++)
{
console.log('here' + checkboxs[j].checked);
if(checkboxs[j].checked)
{
okay=true;
break;
}
}
if(!okay && checkboxs.length > 0) {
isTableValid = false;
break;
}
}
if(isTableValid)
return true;
else
{
alert("Please select atleast one item for male patients");
return false;
}
}
Your code was fine but you weren't writing the jsfiddle the right way, this is a live snippet showing that your code works fine:
function validate(form) {
var checkboxs = document.getElementsByName("m1");
var okay = false;
for (var i = 0, l = checkboxs.length; i < l; i++) {
if (checkboxs[i].checked) {
okay = true;
break;
}
}
if (okay) return true;
else {
alert("Please select atleast one item for male patients");
return false;
}
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0.5em;
line-height: 1.5em;
}
#color {
background-color: lightblue;
}
.adjust {
text-align: left;
}
input[type="checkbox"] {
margin-left: 47%;
}
<table border="1" width="100%">
<tr>
<th rowspan="3">OAB Patient Types</th>
<th colspan="6" id="color">Therapy of First Choice</th>
</tr>
<tr>
<th colspan="4" id="color">Muscarinic Antagonists</th>
<th style="background-color:lightblue">Beta-3 Adrenergic Agonist</th>
<th style="background-color:lightblue">Other Therapies</th>
</tr>
<tr>
<th>Detrol LA
<br>(tolterodine)</th>
<th>Enablex
<br>(darifencian)</th>
<th>Toviaz
<br>(festoridine)</th>
<th>VESIcare
<br>(solifencian)</th>
<th>Myrbetriq
<br>(merabergan)</th>
<th>Other</th>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">General Patient Types</th>
</tr>
<tr>
<td>Male Patients</td>//
<form name=form1>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>//</form>
</tr>
<tr>
<td>Female Patients</td>
<form name=form2>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<!-- <td><input type="submit" value="submit"></td> -->
</form>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">Line of Therapy</th>
</tr>
<tr>
<td>First-line (newly daignosed OAB patients on their first course of therapy)</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Second-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Third-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
</table>
<br>
<br>
<center>
<input type="button" value="Submit" onclick='return validate()'>
</center>
Note:
The button Submit should be of type button and not submit.
First thing because it's not inside any form to be submitted
Second thing is that you have many forms in your page (which is strange here), so you may have a conflict in submitting which form of them wityh this submit button?
give the same name on all the checkboxes of each row and then give it a class to all which you want to validate.
function validate() {
var flag = true;
var array = [];
$(".js-validate-required-radio").each(function () {
array.push($(this).prop('name'));
});
var uniqueNames = $.unique(array);
for (var i = 0; i < uniqueNames.length; i++) {
if ($('input:checkbox[name=' + uniqueNames[i] + ']:checked').val() == undefined) {
if (flag) {
flag = false;
}
}
}
if(!flag){
alert('select atleast one radio on each row');
}
else{
alert('yeee');
}
return flag;
}
here is fiddle
<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!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to calculate some input fields using javasscript?
I'm really newbie at this so sorry if question was easy for you <3
<table>
<tr>
<td>
<input name="price_1" id="price_1" value="5" type="text">
<input name="pieces_1" id="pieces_1" type="text">
<input name="subtot_1" id="subtot_1" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_2" id="price_2" value="7" type="text">
<input name="pieces_2" id="pieces_2" type="text">
<input name="subtot_2" id="subtot_2" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_3" id="price_3" value="9" type="text">
<input name="pieces_3" id="pieces_3" type="text">
<input name="subtot_3" id="subtot_3" type="text">
</td>
</tr>
<tr>
<td id="total_price">21</td>
</tr>
Thank you everyone!
Hi Sanela i've created a demo to help you out, it uses jQuery
Demo
http://jsfiddle.net/L9PJa/
HTML
<table>
<tr>
<td>
<input name="price_1" id="price_1" class="price" value="5" type="text">
<input name="pieces_1" id="pieces_1" type="text" value="1">
<input name="subtot_1" id="subtot_1" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_2" id="price_2" class="price" value="7" type="text">
<input name="pieces_2" id="pieces_2" type="text" value="1">
<input name="subtot_2" id="subtot_2" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_3" id="price_3" class="price" value="9" type="text">
<input name="pieces_3" id="pieces_3" type="text" value="1">
<input name="subtot_3" id="subtot_3" type="text">
</td>
</tr>
<tr>
<td id="total_price"></td>
</tr>
<tr>
<td><input type="button" id="button" value="calculate"></td>
</tr>
JavaScript
$("#button").click(function() {
$('#total_price').text('0');
$(".price").each(function() {
$(this).next().next().val(parseInt($(this).val())*parseInt($(this).next().val()));
$('#total_price').text(parseInt($('#total_price').text())+parseInt($(this).next().next().val()));
});
});
on click for dynamically created elements
$("body").on("click", "#button", function() {
$('#total_price').text('0');
$(".price").each(function() {
$(this).next().next().val(parseInt($(this).val())*parseInt($(this).next().val()));
$('#total_price').text(parseInt($('#total_price').text())+parseInt($(this).next().next().val()));
});
});
inputs not next to each other
$("body").on("click", "#button", function() {
$('#total_price').text('0');
$(".price").each(function() {
$(this).next('input').next('input').val(parseInt($(this).val())*parseInt($(this).next('input').val()));
$('#total_price').text(parseInt($('#total_price').text())+parseInt($(this).next('input').next('input').val()));
});
});