phpqa: Jquery based dynamic adding and removal of html elements.

Jquery based dynamic adding and removal of html elements.

[Thursday, February 19, 2009 | 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 + "  <input type='text'
size='20' name='txtName[]' id='txtName" + id + "'> &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
  
<input size="20" name="txtName[]" id="txtName1" type="text">
  
<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>