asked on

Jquery complex element adding

I'm currently working on a project which involve product adding.
I'm trying to make all this dynamically by Jquery without refresh the browser.

I hv no problem on simple input adding like these http://muiomuio.com/tutorials/jquery/add-remove/

And my problem is how to generate the same thing inside the input that i just generate.
I mean when I click the ADD button , the script will generate a bunch of input field and follow by another ADD and REMOVE button for it(because i want to add color or size to it)

These is the code im working with

<!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>Add and Remove - jQuery tutorial</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

	var i = 2 ;
	
	$('a.add').click(function() {
        //when button clicked generate the input with add and remove button with unique value

$('<leon ><input type="text" name="input['+i+'][name]" /><input type="text" name="input['+i+'][desc]" /><input type="text" name="input['+i+'][code]" /><a href="#" class="attadd'+i+'">add</a><a href="#" class="attremove'+i+'">remove</a><div id="att'+i+'" >here the color</div></leon>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
		
		
		//-------------------------------------------------
	        //Of course after generate the new add and remove i have to add event listener so that the button is ready to be click

		$('a.attadd'+i+'').click(function() {

	$('<uiny><input type="text" name="input['+i+'][color][]" /><input type="text" name="input['+i+'][size][]" /></span>').animate({ opacity: "show" }, "slow").appendTo('#att'+i+'');
	});
	
	$('a.attremove'+i+'').click(function() {
		$('uiny:last').animate({opacity:"hide"}, "slow").remove();
	});

		//end of another event listener
		i++;

	});//end of a.add 


	$('a.remove').click(function() {
	if(i > 2) {
		$('leon:last').animate({opacity:"hide"}, "slow").remove();
		i--;
	}
	});//end of normal remove
	
	$('a.reset').click(function() {
	while(i >2) {
		$('leon:last').remove();
		i--;
	}

	});// end of normal reset


	$('a.attadd1').click(function() {

        //event listener for the first set of input

	$('<uiny><br/><input type="text" name="input['+i+'][color][]" /><input type="text" name="input['+i+'][size][]" /></span>').animate({ opacity: "show" }, "slow").appendTo('#att1');
	});
	
	$('a.attremove1').click(function() {
		$('uiny:last').animate({opacity:"hide"}, "slow").remove();
	});
	
	
	
});

</script>

<style rel="stylesheet" type="text/css">

h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

.hide {visibility:hidden;}

#inputs{
	width:1050px;
	padding:20px;
	border:1px solid #f0f0f0;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	}
#leon{display:block;}
</style>
</head>

<body>

<h1>Add / remove text fields from webform</h1>

<a href="#" class="add">add</a> 
<a href="#" class="remove">remove</a>
<a href="#" class="reset">reset</a>



<div id="inputs">

<leon ><input type="text" name="input[1][name]" /><input type="text" name="input[1][desc]" /><input type="text" name="input[1][code]" /><a href="#" class="attadd1">add</a><a href="#" class="attremove1">remove</a><div id="att1">here the color</div>

</div>

</body>
</html>

Open in new window

test.html

SOLUTION

Kiran Sonawane

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

FrankoH

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial