Gary Funk

a guest

Oct 20th, 2009

796

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

text 3.66 KB | None | 0 0

raw download clone embed print report

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple cloning demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.validate.js"></script>
<script type="text/javascript">
var current= 1;
$(document).ready(function() {
$("#addPerson").click(function() {
current++;
/* GWF - Modified the line below */
$newPerson= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
$newPerson.children("p").children("label").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("for",$currentElem.attr("for")+current);
});
$newPerson.children("p").children("input").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("name",$currentElem.attr("name")+current);
$currentElem.attr("id",$currentElem.attr("id")+current);
});
//Technically, you could update the attributes with one loop...
//
// $newPerson.children("p").children("label,input").each...
//
// ...but you end up assigning "NaN" names and ids to the labels and other such wackiness.
/* GWF - Added the following two lines */
var f = $("#fieldSet"+current);
f.html(f.html().replace("fieldSetID", "fieldSet"+current));
$newPerson.appendTo("#mainField");
$newPerson.removeClass("hideElement");
//add validation
$("#firstname"+current).rules("add", { required:true,minlength:2 });
$("#lastname"+current).rules("add", { required:true,minlength:2 });
$("#email"+current).rules("add", { required:true,email:true });
});
/*
$("#demoForm").submit(function() {
alert("Yeah...this doesn't really submit any data anywhere...");
return false;
});
*/
$("#demoForm").validate({
groups: {
fullname: "firstname1 lastname1"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "firstname1"
|| element.attr("name") == "lastname1" )
error.insertAfter("#lastname1");
else
error.insertAfter(element);
},
rules: {
firstname1: {
required: true,
minlength: 2
}
,lastname1: {
required: true,
minlength: 2
}
,email1: {
required: true,
email: true
}
}
});
});
/* GWF - Add function to remove Person */
function removePerson(id) {
$(id).remove();
};
</script>
<style>
.hideElement {display:none;}
</style>
</head>
<body>
<h2>jQuery Cloning Demo</h2>
<div id="userTemplate" class="hideElement">
<p>
<label for="firstname">Name</label> <em>*</em>
<input id="firstname" name="firstname" size="25" /> <input id="lastname" name="lastname" size="25" />
</p>
<p>
<label for="email">Email</label> <em>*</em><input id="email" name="email" size="25" />
</p>
<p>
<a href='#' onClick='removePerson("#fieldSetID"); return false;'>Remove</a>
</p>
</div>
<form name="demoForm" id="demoForm" method="post" action="none.cfm">
<fieldset id="mainField">
<div>
<p>
<label for="firstname1">Name</label>
<em>*</em> <input id="firstname1" name="firstname1" size="25" /> <input id="lastname1" name="lastname1" size="25" />
</p>
<p>
<label for="email1">Email</label>
<em>*</em><input id="email1" name="email1" size="25" />
</p>
</div>
</fieldset>
<p>
<input type="button" id="addPerson" value="Add Another Person">
</p>
<input type="submit" value="Save">
</form>
</body>
</html>

Add Comment

Please, Sign In to add comment