Hi,
I was using the HTML code and script from your aspsnipptes
<form id="form1" runat="server" enctype="multipart/form-data" method = "post">
<span style ="font-family:Arial">Click to add files</span>
<input id="Button1" type="button" value="add" onclick = "AddFileUpload()" />
<br /><br />
<div id = "FileUploadContainer">
<!--FileUpload Controls will be added here -->
</div>
<br />
<asp:Button ID="btnUpload" runat="server"
Text="Upload" OnClick="btnUpload_Click" />
</form>
<script type = "text/javascript">
var counter = 0;
function AddFileUpload()
{
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
'" type="file" />' +
'<input id="Button' + counter + '" type="button" ' +
'value="Remove" onclick = "RemoveFileUpload(this)" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div)
{
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
</script>
Since I need the 1st upload control default so I added a function FirstLoad() on the script in the below code...
Can you help me once I click on the "add" near the 1st control the a new file upload is created and the above file upload control should get changed with the 'value="Remove" and whrn I click it must be removed...
How it is possible...
<script type = "text/javascript">
$(document).ready(function () {
FirstLoad();
});
var counter = 0;
function FirstLoad() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="Button1" type="button" value="add" onclick = "AddFileUpload()" />
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function AddFileUpload() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + '" type="file" />' +
'<input id="Button' + counter + '" type="button" ' +
'value="Remove" onclick = "RemoveFileUpload(this)" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div) {
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
</script>