Monday, May 17, 2010

Renaming id name in javascript

old is old id where we are going to rename it to new

function renameID()
{
document.getElementById("old").id = "new";
}

onclick="renameID()"

Wednesday, May 5, 2010

Adding and removing text box Which also insert a row next or Beneath the row

In this program We can add the row and we can also insert the row beneath the row
and we can remove the row.... dynamic select box value from database.. can be added each time to row

this program is calculating tax i did in html u can make it use in php by give the tax value from data base presently its static value

Remove all opening and closed BR tags and then run
ADD THIS IN HEAD TAG



<SCRIPT language="javascript">


function insRow1(id)
{
var m = document.getElementById(id).rowIndex;
++m;
var x=document.getElementById('myTable').insertRow(m);
id = ++id;
var y=x.insertCell(0);
var z=x.insertCell(1);
var g=x.insertCell(2);
var w=x.insertCell(3);
var h=x.insertCell(4);
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
--rowCount;
var divIdName = 'my'+rowCount+'Div';
x.setAttribute('id',divIdName);
var rowCount1=--rowCount;
y.innerHTML="<input type='text' value='' onkeyup=total2() id="+divIdName+"FT>";
z.innerHTML="<input type='text' value='' onkeyup=total2() id="+divIdName+"ST>";
g.innerHTML =table.rows[1].cells[2].innerHTML;
w.innerHTML="<input type='button' id="+divIdName+"Add onclick=insRow1('"+divIdName+"') value='Insert row'>";
h.innerHTML="<input type='button' id="+divIdName+"Del onclick=deleteRow('"+divIdName+"') value='Delete'>";
g.firstChild.setAttribute('id',divIdName+'Sel');
g.firstChild.setAttribute('onchange','total2()');
}


function deleteRow(tableID) {
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
var m = document.getElementById(tableID).rowIndex;
table.deleteRow(m);
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
var v=0;
for(var m=1;m<rowCount;m++) {
var Ft=document.getElementById(table.rows[m].cells[0].firstChild.getAttribute('id')).value;
var St=document.getElementById(table.rows[m].cells[1].firstChild.getAttribute('id')).value;
var Sel=document.getElementById(table.rows[m].cells[2].firstChild.getAttribute('id')).value
if(!Ft) {
Ft=0;
}
if(!St) {
St=0;
}

var to= parseInt(St) * parseInt(Ft);
if(!Sel) {
var tax=0;
} else {
var tax=to*(Sel/100);
}
to=parseInt(to)+parseFloat(tax);
if(Ft && St) {
v=parseFloat(v)+parseFloat(to);
}
}
document.getElementById('total1').value=v;
}

function total2() {
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
var v=0;
for(var m=1;m<rowCount;m++) {
var Ft=document.getElementById(table.rows[m].cells[0].firstChild.getAttribute('id')).value;
var St=document.getElementById(table.rows[m].cells[1].firstChild.getAttribute('id')).value;
var Sel=document.getElementById(table.rows[m].cells[2].firstChild.getAttribute('id')).value;
if(!Ft) {
Ft=0;
}
if(!St) {
St=0;
}
var to= parseInt(St) * parseInt(Ft);
if(!Sel) {
var tax=0;
} else {
var tax=to*(Sel/100);
}
to=parseInt(to)+parseFloat(tax);
if(Ft && St) {
v=parseFloat(v)+parseFloat(to);
}
}
document.getElementById('total1').value=v;
}
</SCRIPT>





<span style="font-weight:bold;">ADD THIS IN BODY TAG </span>
<textarea rows="10" cols="50">
<form action="index.php" method="post" name="adminForm" id="adminForm" enctype="multipart/form-data">
Total    <input type="text" id="total1" value=''>

<table id="myTable" border="1">
<tr>
<th>Qty</th>
<th>Price</th>
<th>Tax</th>
<th>Add</th>
<th>Delete</th>
</tr>
<tr id="my1Div">

<td><input type='text' onkeyup="total2()" value="" id="my1DivFT" ></td>
<td><input type='text' value='' id="my1DivST" onkeyup="total2()"></td>
<td><select name=select1 id=my1DivSel onchange="total2()">
<option value=''>Select</option>
<option value='1'>Value 1</option>
<option value='2'>Value 2</option>
<option value='3'>Value 3</option>
</select></td>
<td><input type="button" onclick="insRow1('my1Div')" value="Insert row"></td>
</tr>
</table>
</form>