Simple Add remove input fields dynamically using jquery with Bootstrap
In this post we will give you information about Simple Add remove input fields dynamically using jquery with Bootstrap. Hear we will give you detail about Simple Add remove input fields dynamically using jquery with BootstrapAnd how to use it also give you demo for it if it is necessary.
In this tutorial, I am going to show you how to add remove input fields dynamically in your form using jquery. In this simple example, i give you to add multiple input fields with remove button that way you can remove field if you don’t require. In this example i use bootstrap also because layout become pretty good.
In this example, Simply i added two click event of jquery as listed bellow:
1.add-more Class: On “.add-more” class that way we can write jquery append code.
2.remove Class: On “.remove” class that way we can remove input field.
I also added “copy” class div, that will be append after “after-add-more” class that way you can also modify easily on “copy” class like you want to change text or icon etc. It is pretty simple example and you can easily customize this example.
You have to create two file one for generate script code of add more input fields, and second file for getting value of dynamic field value.
So, let’s create both files, after finish this example you will find bellow output. you can check on demo for dynamic add more input fields.
Preview:
index.php:
<html lang="en">
<head>
<title>Bootstrap Jquery Add More Field Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div >
<div >
<div >Bootstrap Jquery Add More Field Example</div>
<div >
<form action="action.php" >
<div >
<input type="text" name="addmore[]" placeholder="Enter Name Here">
<div >
<button type="button"><i ></i> Add</button>
</div>
</div>
</form>
<!-- Copy Fields -->
<div >
<div style="margin-top:10px">
<input type="text" name="addmore[]" placeholder="Enter Name Here">
<div >
<button type="button"><i ></i> Remove</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
</script>
</body>
</html>
action.php:
In this PHP file you can get value of multiple input fields this way:
<?php
print_r($_REQUEST['addmore']);
exit;
?>
Hope this code and post will helped you for implement Simple Add remove input fields dynamically using jquery with Bootstrap. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs