addMore.js jQuery Plugin To Duplicate Form Group
source link: https://www.laravelcode.com/post/addmore-js-jquery-plugin-to-duplicate-form-group
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
addMore.js jQuery Plugin To Duplicate Form Group
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.
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK