Today I am going to show you how to make a add new field or div or content on click event of a button .
step 1: for that first take a html page with a html fild, the html fild
mast have a parrant div with a unic id (here the id is test) and a
button with a unic id outside of the div(here the buttons id is: add).
the code will like as
<!DOCTYPE html>
<html>
<head>
<title>Add More Field</title>
</head>
<body>
<div id="test">
<p>
<label for=""> Test*</label>
<input type="text" placeholder="Test" name="test[]">
</p>
</div>
<button type="button" id="add">Add Test</button>
</body>
</html>
step 2: now take the jquery file where the jquery functions are defined ,
you will get the file in the link
http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and make a on click event function ,on load of the page
The code will be like as:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
});
});
</script>
Step:3 Now take a counter of the .add length
the code will be as
var n = $('.add').length + 1;
Step 4: Now in for loop of the counter append the field inside the parrant
div of the field
the code will be like
for( var i = 0; i < n; i++) {
$("#test").append('<p><label for=""> Test*</label>'+
'<input type="text" placeholder="Test" name="test[]">'+
'</p>')
}
Now on click of the button there will append a new button
so now the total code will be
<!DOCTYPE html>
<html>
<head>
<title>Add More Field</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
var n = $('.add').length + 1;
if(n != '') {
for( var i = 0; i < n; i++) {
$("#test").append('<p><label for=""> Test*</label>'+
'<input type="text" placeholder="Test" name="test[]">'+
'</p>')
}
}
});
});
</script>
</head>
<body>
<div id="test">
<p>
<label for=""> Test*</label>
<input type="text" placeholder="Test" name="test[]">
</p>
</div>
<button type="button" id="add">Add Test</button>
</body>
</html>
step 1: for that first take a html page with a html fild, the html fild
mast have a parrant div with a unic id (here the id is test) and a
button with a unic id outside of the div(here the buttons id is: add).
the code will like as
<!DOCTYPE html>
<html>
<head>
<title>Add More Field</title>
</head>
<body>
<div id="test">
<p>
<label for=""> Test*</label>
<input type="text" placeholder="Test" name="test[]">
</p>
</div>
<button type="button" id="add">Add Test</button>
</body>
</html>
step 2: now take the jquery file where the jquery functions are defined ,
you will get the file in the link
http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and make a on click event function ,on load of the page
The code will be like as:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
});
});
</script>
Step:3 Now take a counter of the .add length
the code will be as
var n = $('.add').length + 1;
Step 4: Now in for loop of the counter append the field inside the parrant
div of the field
the code will be like
for( var i = 0; i < n; i++) {
$("#test").append('<p><label for=""> Test*</label>'+
'<input type="text" placeholder="Test" name="test[]">'+
'</p>')
}
Now on click of the button there will append a new button
so now the total code will be
<!DOCTYPE html>
<html>
<head>
<title>Add More Field</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
var n = $('.add').length + 1;
if(n != '') {
for( var i = 0; i < n; i++) {
$("#test").append('<p><label for=""> Test*</label>'+
'<input type="text" placeholder="Test" name="test[]">'+
'</p>')
}
}
});
});
</script>
</head>
<body>
<div id="test">
<p>
<label for=""> Test*</label>
<input type="text" placeholder="Test" name="test[]">
</p>
</div>
<button type="button" id="add">Add Test</button>
</body>
</html>
1 comment:
Help Full Post
Post a Comment