Hi,
The following code is to provide add more option to your website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
// start a counter for new row IDs
// by setting it to the number
// of existing rows
var newRowNum = 2;
// bind a click event to the "Add" link
$('#addnew').click(function(){
// increment the counter
newRowNum += 1;
// get the entire "Add" row --
// "this" refers to the clicked element
// and "parent" moves the selection up
// to the parent node in the DOM
var addRow = $(this).parent().parent();
// copy the entire row from the DOM
// with "clone"
var newRow = addRow.clone();
// set the values of the inputs
// in the "Add" row to empty strings
$('input', addRow).val('');
$('name', addRow).val('os' + newRowNum);
// replace the HTML for the "Add" link
// with the new row number
$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + 'value="Email Address ' + newRowNum + '>');
// insert a remove link in the last cell
$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
// loop through the inputs in the new row
// and update the ID and name attributes
$('input', newRow).each(function(i){
var newID = 'os' + newRowNum;
$(this).attr('id',newID).attr('name',newID);
});
// insert the new row into the table
// "before" the Add row
addRow.before(newRow);
// add the remove function to the new row
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
return false;
});
// prevent the default click
return false;
});
});
</script>
</head>
<body>
<form name="f" method="post" action="" enctype="multipart/form-data">
<table>
<tr><td>
</td><td> </td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="Email Address 1">
<a id="addnew" href="">Add</a></td><td>Before Image:<input name="os2" type="file" id="os2" value="" size="24" maxlength="60" />After Image:<input name="os3" type="file" id="os3" value="" size="24" maxlength="60" /></td>
<td> </td>
</tr>
</table>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
This might help you,
Thank you.
