how to adding new div / content onclick button?

**davelf** · 10-26-2011, 03:29 AM

Hi, how to adding a new div / content onclick button?
This is the idea:

So if i click on the add more email, another textbox will added.
i don't think this function is hide or show, so are there any advice for my problem here.

Thank you..

**jscheuer1** · 10-26-2011, 06:24 AM

In coding often a picture is worth less than the actual code. And by mentioning hide and show you're implying that you're using jQuery. I seem to recall that you do in general, so I'll proceed on that basis.

You can clone the input and append the clone to a containing div:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $email = $('#email1'), count = 1;
	$('#addemail').click(function(e){
		e.preventDefault();
		var idname = 'email' + (++count);
		$email.parent().append($email.clone().attr({id: idname, name: idname}));
	});
	
});
</script>
<style type="text/css">
#emails input {
	display: block;
}
</style>
</head>
<body>
<div id="emails">
<input type="text" id="email1" name="email1">
</div>
<a id="addemail" href="#">Add Email Field</a>
</body>
</html>

**davelf** · 10-26-2011, 09:58 AM

thanks John,
it work.

Here's the online version:
http://metablast.net/hsco/send-to-friend.html

**davelf** · 10-26-2011, 10:17 AM

hmm, John have another problem here.
How to limit the user adding div??

**jscheuer1** · 10-26-2011, 01:48 PM

In one sense it's easy, but in another sense, you cannot. To be spammer proof that would have to be done on the server side. Spammers could copy your form and alter the javascript, or just put in as many hard coded email fields as they like.

But in the design sense you can limit the number right here:

Code:

jQuery(function($){
	var $email = $('#email1'), count = 1;
	$('#addemail').click(function(e){
		e.preventDefault();
		if(count > 5){
			alert("That's enough already!");
			return;
		}
		var idname = 'email' + (++count);
		$email.parent().append($email.clone().attr({id: idname, name: idname}));
	});
	
});

**kaybe** · 09-02-2013, 09:39 AM

Originally Posted by jscheuer1

In coding often a picture is worth less than the actual code. And by mentioning hide and show you're implying that you're using jQuery. I seem to recall that you do in general, so I'll proceed on that basis.

You can clone the input and append the clone to a containing div:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $email = $('#email1'), count = 1;
	$('#addemail').click(function(e){
		e.preventDefault();
		var idname = 'email' + (++count);
		$email.parent().append($email.clone().attr({id: idname, name: idname}));
	});
	
});
</script>
<style type="text/css">
#emails input {
	display: block;
}
</style>
</head>
<body>
<div id="emails">
<input type="text" id="email1" name="email1">
</div>
<a id="addemail" href="#">Add Email Field</a>
</body>
</html>

John, thanks so much for this code, it came in really handy for an assignment I'm doing. In my case, I'm cloning a div located in the middle of a long HTML form. I want the child div to appear directly under the parent div in the form. Using the code here, the child div appears at the end of the form, after the submit button. How do I specify where in the form I want the child element to appear?

**jscheuer1** · 09-02-2013, 02:04 PM

You are allowed to have div or span elements inside a form, so for your form you can do something like so:

HTML Code:

<form action="#">
<!-- other form stuff if any can go here -->
<div> <!-- this can be a span if you prefer -->
<input type="text" id="email0" name="email0">
</div>
<a id="addemail" href="#">Add Email</a>
<!-- other form stuff if any can go here -->
<input type="submit" value="Submit">
</form>

Thread: how to adding new div / content onclick button?

Thread Tools

Search Thread

how to adding new div / content onclick button?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

How to specify where a cloned div appears

Bookmarks

Bookmarks

Posting Permissions