Share on:

article image to show article

Add dynamically form field in html form using jquery

Jul 29 2016

Nowadays almost everything is dynamic in websites, if you are going to create any CMS then dynamic form will be big part of you project.

In this article I will show you how to add dynamic form field in html form.

 

So let’s get start:-

First of all  create basic html page structure then add bootstrap and Jquery to make your page responsive and look beautiful.

 Create  a html form inside body with one input field, just after that input field add a button to call modal box.

Inside that modal box you have 5 input field to create attribute of new input field that you want to add. You can also field that you added.

 Demo

Here is full code :

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Phone</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <style>
 .glyphicon-remove{
 color: red;
 }
 </style>
 </head>
 <body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">

</div>
</nav> 
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-info">
Add field dynamically
</div>
<form role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter Name">
</div>
<button type="button" class="btn btn-success add-field" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus"></span> Add Field</button>
</form>
</div>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add form field</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="type">Input Type:</label>
<input type="text" class="form-control" id="type" name="input-type" placeholder="Input Type">
</div>
<div class="col-md-6">
<label for="name">Input Name:</label>
<input type="text" class="form-control" id="name" name="input-name" placeholder="Input Name">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="class">Input Class:</label>
<input type="text" class="form-control" id="class" name="input-class" placeholder="Input Class">
</div>
<div class="col-md-6">
<label for="id">Input Id:</label>
<input type="text" class="form-control" id="id" name="input-id" placeholder="Input Id">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="placeholder">Input Placeholder:</label>
<input type="text" class="form-control" id="placeholder" name="input-placeholder" placeholder="Input Placeholder">
</div>

</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success add-fieldm" data-dismiss="modal" >Add</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
</div>
</div>

</div>
</div>
<script>
$(document).ready(function () {
$('.add-fieldm').click(function(){
var input_type=$("input[name=input-type").val().trim();
var input_name=$("input[name=input-name]").val();
var input_class=$("input[name=input-class]").val();
var input_id=$("input[name=input-id]").val();
var input_placeholder=$("input[name=input-placeholder]").val();
var datas = '<div class="form-group"><input type="'+input_type+'" name="'+input_name+'" class="'+input_class+'" id="'+input_id+'" placeholder="'+input_placeholder+'"> <span class="glyphicon glyphicon-remove todel"></div>';
$('.add-field').before(datas);
});
$(document).on('click', 'span.todel', function(){
var del = $(this).closest('.form-group');
$(del).remove();
});
});
</script>
</body>
</html>
Category: html  css  jquery  javascript