| 2 comments ]

qJquery based dynamic adding and removal of html elements.
it uses the some smal jquery function like append,remove,hide etc,

Enjoy jquery. less coding huray !!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery Test on - phpqa.blogspot.com</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function addNewToPhpqa() {
var id = $('#idVal').val();
id++;
// set a maximum value for elements
if(id<10){
$("#phpqaToAppend").append("<p id='count" + id + "'><label
for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text'
size='20' name='txtName[]' id='txtName" + id + "'>&nbsp;&nbsp<a
href='javascript:void(0);' onClick='removeThis("+ id +");'>Remove
this</a><p>");
}else{
alert("you have reached maximum Thanks phpqa.blogspot.com");
}
$('#idVal').val(id);
}

function removeThisFromPhpqa(id) {
$("#count"+id).hide(1000);
// or u can use
//$("#count"+id).remove();
}
</script>
<body>
<p><a href="javascript:void(0);" onClick="addNewToPhpqa();">Add More</a></p>
<form action="#" method="get" id="phpqa">
<input type="hidden" id="idVal" value="1">
<div id="phpqaToAppend">
<p id='count1'>
<label for="txt1">
Field 1
&nbsp;&nbsp;
<input size="20" name="txtName[]" id="txtName1" type="text">
&nbsp;&nbsp;
<a href="javascript:void(0);"
onclick="removeThisFromPhpqa(1);">Remove this</a>
</label>
</p>
</div>
<label ></label>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
</body>
</html>


see demo here Demo

Happy Jquering !!

2 comments

Suresh Rajagopal said... @ Saturday, August 8, 2009 at 10:55:00 AM GMT+1

Hey its not working, giving error for me.

jj said... @ Wednesday, August 12, 2009 at 4:37:00 AM GMT+1

please check the demo. you could see its working :)

Post a Comment

Please put your comments here. your questions, your suggestions, also what went wrong with me.