DYNAMIC FORMS USING BOOTSTRAP & jQUERY
Here you will learn how to generate and validate input fields dynamically ..
Introduction:
Bootstrap is a free and open-source front-end Web framework. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many earlier web frameworks, it concerns itself with front-end development only.
JQuery is a JavaScript library designed to simplify HTML Document Object Model (DOM) tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. The purpose of jQuery is to make it much easier to use JavaScript on your website.
Resources:
The following resources were used in this tutorial.
i. Bootstrap Content Delivery Network
ii. jquery Content Delivery Network
Setup :
// Bootstrap css cdn<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">// jQuery cdn
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>//bootstrap.min cdn<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous></script>// popper.js css
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
Next is putting together the tags
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Dynamic forms with Bootstrap & Jquery</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"></head><body><nav class="navbar navbar-dark bg-dark"> <!-- Navbar content --> <a class="navbar-brand text-white">DevLarry</a></nav><div class="container"> <div class="col-lg-12"> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Generate Forms</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Quick Demo on how to make Dynamic Forms</h4> <p class="card-text"></p> <form action="" id="needs-validation" novalidate> <div class="form-row"> <div class="form-group col-md-8"> <input type="number" name="" class="input form-control" placeholder="Enter number of forms" required> </div> <div class="form-group col-md-4"> <div class="text-center"> <button class="btn btn-sm btn-primary generate" type="submit">Generate</button> </div> </div> </form> </div> </div></div> <div class="col-lg-12"> <div class="card text-center"> <div class="card-body"> <div class="forms"> </div> </div> </div> </div> </div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script type="text/javascript">$(document).ready(function(){$('.card').css('margin-top', 30);$('.btn').click(function(e){e.preventDefault();let input = $('input').val();let temp_html = '';for(i = 0; i < input; i++){temp_html += '<div class="row"><div class="col-md-4"><div class="form-group"><label>Fullname</label><input type="text" name="fullname[]" class="form-control" placeholder="Fullname" required=""></div></div><div class="col-md-4"><div class="form-group"><label>Email Address</label><input type="email" name="email[]" class="form-control" placeholder="Email address" required=""></div></div><div class="col-md-4"><div class="form-group"><label>Mobile Number</label><input type="text" name="phone[]" class="form-control" placeholder="Phone number" required=""></div></div></div>';}$('.forms').append(temp_html);});});</script></body></html>
User Interface Design
Dynamic Input fields generation
Conclusion
Generating dynamic input fields got easier with jquery and bootstrap. Hope this helps someone. Happy coding !!!
