I have successfully implemented a feature where I can add more fields by clicking a button. However, I am facing an issue when trying to delete a field after checking the checkbox. Any assistance on this matter would be greatly appreciated.
jQuery:
$(document).ready(function ()
{
var x = 0;
$('#addmore').click(function (e)
{
e.preventDefault();
if(x<5)
{
$("#Files").append("<div id='dummy'></div><input name='file' id='file" + x + "' type='file'/>");
$("#Files").append("<input value='remove' id='but" + x + "' data-id='" + x + "' type='checkbox'/>");
}
else
{
alert("max 5 images to be uploaded");
}
x++;
});
$("#imageForm").on('click', 'input[value="Delete"]' , function ()
{
var id = $(this).data('id');
if($(this).is('checked'))
{
$("#file" + id).add(this).add("#dummy").remove();
}
});
});
HTML:
<form name="imageForm" id="imageForm" method="post" enctype="multipart/form-data" action="imageuploadlogic.jsp">
<input type="button" id="addmore" value="addmore"/><input type="button" id="Delete" value="Delete"/>
<div style="clear: both;"></div>
<div id="Files"></div>
<div style="clear: both;"></div>
<input type="submit" id="submitimage" />
</form>