Using innerHTML to put a checkbox and an input field in a table cell
Hi all,
I need some help with some innerHTML code I am using to put a checkbox and an input field in a table cell. I have read in several places that the checkbox and input fields are not supposed to work when entered using innerHTML, but I have seen some examples on the Internet that do work.
By not working, I mean if I check the checkbox or try to enter a value in the input field, the check or value immediately disappears, and I can't use the value in my function.
Can someone please help me with my code? This is parred down to the minimum code required.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var refin_deduct = 0;
var refin_panel_deduct = 0;
var multistage_add = 0;
var addl_surface_add = 0;
var tot_hrs = 0;
//This is the funtion for row 1
function refinCalc1(refinForm) {
//This calculates the deductions for refinishing within a panel
if (document.refinForm.hood1.checked && document.refinForm.allother1.checked) {
alert("Don't check two!");
}
else if (document.refinForm.hood1.checked) {
refin_panel_deduct = document.refinForm.refin_hrs1.value*1*(2/3);
document.refinForm.within_panel1.value = -refin_panel_deduct;
}
else if (document.refinForm.allother1.checked) {
refin_panel_deduct = document.refinForm.refin_hrs1.value* 0.5;
document.refinForm.within_panel1.value = -refin_panel_deduct;
}
else {
refin_panel_deduct = 0;
document.refinForm.within_panel1.value = refin_panel_deduct;
}
//This calculates the additions for additional surfaces
refin_minus_refin_panel_plus_multi1 = document.refinForm.refin_hrs1.value*1 + multistage_add - refin_panel_deduct;
if (document.refinForm.hood1.checked) {
var swap = 'Input inside hood <br>paint hours<br>';
swap += '<input type="text" name="inside_hood" id="inside_hood" size="3" onKeyup="refinCalc1(this.form)"><br>';
document.getElementById("swap").innerHTML = swap;
var inside_hood = document.getElementById("inside_hood").innerHTML;
document.refinForm.surfaces1.value = inside_hood;
}
else {
var swap = '<input class="check" type="checkbox" name="door1" id="door1" onClick="refinCalc1(this.form)">Door Jambs<br>';
swap += '<input class="check" type="checkbox" name="interior1" id="interior1" onClick="refinCalc1(this.form)">Interior Edges<br>';
document.getElementById("swap").innerHTML = swap;
var door1 = document.getElementById("door1").innerHTML;
var interior1 = document.getElementById("interior1").innerHTML;
if (document.refinForm.door1.checked && document.refinForm.interior1.checked) {
addl_surface_add = refin_minus_refin_panel_plus_multi1 * 0.4;
document.refinForm.surfaces1.value = addl_surface_add;
}
else if (document.refinForm.door1.checked) {
addl_surface_add = refin_minus_refin_panel_plus_multi1 * 0.2;
document.refinForm.surfaces1.value = addl_surface_add;
}
else if (document.refinForm.interior1.checked) {
addl_surface_add = refin_minus_refin_panel_plus_multi1 * 0.2;
document.refinForm.surfaces1.value = addl_surface_add;
}
else {
addl_surface_add = 0;
document.refinForm.surfaces1.value = addl_surface_add;
}
}
}
</script>
</HEAD>
<body>
<center>
<form name="refinForm">
<table border=1>
<tr>
<td align=center><input type="text" name="refin_hrs1" size="3" onKeyup="refinCalc1(this.form)"></td>
<td width=100>
<input class="check" type="checkbox" name="hood1" onClick="refinCalc1(this.form)">Hood<br>
<input class="check" type="checkbox" name="allother1" onClick="refinCalc1(this.form)">All Other<br>
</td>
<td align=center width=40><input class="output" type="text" name="within_panel1" readonly size="4"><br></td>
<td width=150><span id=swap></span></td>
<td align=center width=40><input class="output" type="text" name="surfaces1" readonly size="4"><br></td>
</tr>
</table>
</form>
</body>
</html>
I need some help with some innerHTML code I am using to put a checkbox and an input field in a table cell. I have read in several places that the checkbox and input fields are not supposed to work when entered using innerHTML, but I have seen some examples on the Internet that do work.
By not working, I mean if I check the checkbox or try to enter a value in the input field, the check or value immediately disappears, and I can't use the value in my function.
Can someone please help me with my code? This is parred down to the minimum code required.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var refin_deduct = 0;
var refin_panel_deduct = 0;
var multistage_add = 0;
var addl_surface_add = 0;
var tot_hrs = 0;
//This is the funtion for row 1
function refinCalc1(refinForm) {
//This calculates the deductions for refinishing within a panel
if (document.refinForm.hood1.checked && document.refinForm.allother1.checked) {
alert("Don't check two!");
}
else if (document.refinForm.hood1.checked) {
refin_panel_deduct = document.refinForm.refin_hrs1.value*1*(2/3);
document.refinForm.within_panel1.value = -refin_panel_deduct;
}
else if (document.refinForm.allother1.checked) {
refin_panel_deduct = document.refinForm.refin_hrs1.value* 0.5;
document.refinForm.within_panel1.value = -refin_panel_deduct;
}
else {
refin_panel_deduct = 0;
document.refinForm.within_panel1.value = refin_panel_deduct;
}
//This calculates the additions for additional surfaces
refin_minus_refin_panel_plus_multi1 = document.refinForm.refin_hrs1.value*1 + multistage_add - refin_panel_deduct;
if (document.refinForm.hood1.checked) {
var swap = 'Input inside hood <br>paint hours<br>';
swap += '<input type="text" name="inside_hood" id="inside_hood" size="3" onKeyup="refinCalc1(this.form)"><br>';
document.getElementById("swap").innerHTML = swap;
var inside_hood = document.getElementById("inside_hood").innerHTML;
document.refinForm.surfaces1.value = inside_hood;
}
else {
var swap = '<input class="check" type="checkbox" name="door1" id="door1" onClick="refinCalc1(this.form)">Door Jambs<br>';
swap += '<input class="check" type="checkbox" name="interior1" id="interior1" onClick="refinCalc1(this.form)">Interior Edges<br>';
document.getElementById("swap").innerHTML = swap;
var door1 = document.getElementById("door1").innerHTML;
var interior1 = document.getElementById("interior1").innerHTML;
if (document.refinForm.door1.checked && document.refinForm.interior1.checked) {
addl_surface_add = refin_minus_refin_panel_plus_multi1 * 0.4;
document.refinForm.surfaces1.value = addl_surface_add;
}
else if (document.refinForm.door1.checked) {
addl_surface_add = refin_minus_refin_panel_plus_multi1 * 0.2;
document.refinForm.surfaces1.value = addl_surface_add;
}
else if (document.refinForm.interior1.checked) {
addl_surface_add = refin_minus_refin_panel_plus_multi1 * 0.2;
document.refinForm.surfaces1.value = addl_surface_add;
}
else {
addl_surface_add = 0;
document.refinForm.surfaces1.value = addl_surface_add;
}
}
}
</script>
</HEAD>
<body>
<center>
<form name="refinForm">
<table border=1>
<tr>
<td align=center><input type="text" name="refin_hrs1" size="3" onKeyup="refinCalc1(this.form)"></td>
<td width=100>
<input class="check" type="checkbox" name="hood1" onClick="refinCalc1(this.form)">Hood<br>
<input class="check" type="checkbox" name="allother1" onClick="refinCalc1(this.form)">All Other<br>
</td>
<td align=center width=40><input class="output" type="text" name="within_panel1" readonly size="4"><br></td>
<td width=150><span id=swap></span></td>
<td align=center width=40><input class="output" type="text" name="surfaces1" readonly size="4"><br></td>
</tr>
</table>
</form>
</body>
</html>
J Hoth
June 6,