04 June 2011

How to add text box ,combo box dynamically to a webpage

Some times , whenever  we want to upload multiple files at once ,then you  have to add file tag to html page dynamically ,similarly if you want to add text box ,check box, combo box dynamically to your webpage, then below mentioned code in javascript and HTML  can help you

<html>
<head>
<script type=”text/javascript”>
function addRow(tbl) {                                 
 var tbl = document.getElementById(tbl);
var rowc=tbl.rows.length;
var rowCount = tbl.rows.length;
var row = tbl.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = '';
var cell2 = row.insertCell(1);
cell2.innerHTML = '<input type="file" name="file[]" />';
var cell3 = row.insertCell(2);
cell3.innerHTML = '<span class="subelements"> </span>';
return false;
}
</script >
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="0" id="table1">
 <tr>
 <td colspan="3" style="font-size:18px;font-family:arial;">Image Upload<hr/>
</td>
</tr>
<tr>
<td width="15%" style="text-align:center;font-color:gray;font-size:14px;font-family:arial;"&gt <label for="file">Upload Picture</label>
</td>
<td width="25%">
<input type="file" name="file[]" />
</td>
<td width="60%"colspan="2" align="left" >
<input type="submit" value="Add more" title="Add More" onClick="return addRow('table1')">
</td>
</tr>
</table>
<table cellpadding="4" cellspacing="0" width="100%" border="0" >
<tr>
<td>
<input type="submit" name="submit" value="Submit" />
 </td>
</tr>
</table>
</body>
</html>

Try this , if find any problem then feel  free to ask solution ,in my next post  I will explain how to upload multiple files at once in php