jQuery has many important and magical plugins that make web development lot easy. There is one plugin addmore.js that allows to dynamically add and remove a repeatable group of form elements. This is useful when you want to receive multiple inputs of the same fields.
In this article, I will show you how to add or remove input fields dynamically using jQuery.
To create dynamic form-field, first download the plugin from the Github. Then include admore.js and jquery.js file path from the package you have downloaded. I have also included bootstrap.css CDN for simple styling.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/admore.js"></script>
Now add the .mulit-field-demo class to the form element that you want to dynamically duplicate or remove. Here I have added two input fields. You can add as more as you need.
<div class="mulit-field-demo">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
</div>
In the last, add the following script at the end of the document.
<script type="text/javascript">
$(document).ready(function () {
$(".mulit-field-demo").EnableAddMore({linkText: 'add more'});
});
</script>
That's it. Now you can duplicate all of that class html dynamically. You can also add more parameters to .EnableAddMore function. For more customization, see addmore.js file.
Here is my full html file. You can also modify according to your requirement. I have also uploaded code to our Github repository.
<!DOCTYPE HTML>
<html>
<head>
<title>Addmore.JS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/admore.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="#">
<div class="mulit-field-demo">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".mulit-field-demo").EnableAddMore({linkText: 'add more'});
});
</script>
</body>
</html>
I hope you had liked this article.
