PDA

View Full Version : Resolved 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:
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=4149&stc=1&d=1319599614

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:


<!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:


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
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:


<!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:


<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>