Tuesday, 31 January 2012

Dynamic add and remove Textbox with numeric validation using javascript

<script type='text/javascript'>
// Numeric validations
function numbersonly(e){
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8){ //if the key isn't the backspace key (which we should allow)
if (unicode<48||unicode>57) //if not a number
return false //disable key press
}
}

// remove dynamic textbox
function rem(inval)
{
$("#my"+inval+"Div").remove();
}
// add dynamic textbox
// --------------------------------------------------------
// Author : Daxa
// Website : http://www.beyondmart.com/
// modify by : darshakkkumar shah
// modify data :31 jan 2012
// --------------------------------------------------------

var inival=0; // Initialise starting element number

// Call this function to add textbox
function addTextBox()
{
var newArea = add_New_Element();
var htcontents = "<td valign='top'><input type='text' name='quan[]' style='text-align:right' onkeypress='return numbersonly(event)' /></td><td><textarea rows='1' name='desc[]' cols='48'/></textarea></td><td valign='top'><input type='text' name='price[]' style='text-align:right' onkeypress='return numbersonly(event)'/></td><td style='width:50px;padding='0' valign='top'>&nbsp;</td><td valign='top'><span style='cursor:pointer;' onclick='rem("+inival+");'><img src='img/delete.png'></span></td><br/>";
document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents'
}


function add_New_Element() {
inival=inival+1; // Increment element number by 1
var ni = document.getElementById('area');
var newdiv = document.createElement('tr'); // Create dynamic element
var divIdName = 'my'+inival+'Div';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
return divIdName;
}

</script>