Jquery dynamic add row : “Add more”

Posted: June 10, 2011 in HTML, Jquery
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<link rel="Stylesheet" href="files/reset-min.css">
<style>
.addMoreBoundry:first-child .removeCustom { display:none; }
</style>
<script src="files/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {		
	var addMoreCnt = 1;
	$('<span class="removeCustom" style="float:left; cursor:pointer;"><img border="0" src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_21.png" alt="Remove" title="Remove"></span><span class="addCustom" style="float:left; cursor:pointer;"><img border="0" src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_19.png" alt="Add More" title="Add More"></span> ').appendTo(".addMoreBoundry:first");
	var cloneObj = $(".addMoreBoundry:first").clone(true);	
	$('.addCustom').live('click',function() 
	{				
		$(cloneObj).clone(true).insertAfter(".addMoreBoundry:last");
		addMoreCnt = addMoreCnt + 1;			
		$(this).hide();
		$(".addCustom:last").show();			
	});			
	$('.removeCustom').live('click',function() {
		if(confirm('Are you sure you wish to remove selected field(s)?'))
		{
			$(this).parents(".addMoreBoundry").remove();
			$(".addCustom:last").show();
		}
	});
});
</script>
</head><body>
    
<span class="addMoreBoundry">
<div style="float:left; background-color:#CCCCCC; padding:10px; margin:10px; clear:both;">        	
Name : <input id="FilePath_1" name="filePath[]" type="text" size="60" />
<br> Address : <textarea id="address_1" name="address[]"></textarea>
<br> Gender : <input name="gender" type="radio" value="Male"> Male <input name="gender" type="radio" value="Female"> Female
<br> File : <input name="" type="file"> <input name="cb" type="checkbox" value="1">
<br> Button : <input type="button" id="button_1" value="Button" />  
</div>
</span> 
</body></html>
Advertisements
Comments
  1. Celina says:

    It is really helpful, what i need to add is just wrapper div and it works like a charm.. Thanks!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s