Dinamic Form JQuery

admin Aug 27, 2020 1488 2

Dinamic Form JQuery

Easily use Dynamic Form JQuery for your website.

Dynamic input field allows providing multiple values in a form. multi-input is a jQuery form builder/manipulation plugin which makes it possible to dynamically add and/remove form fields by clicking on Plus and Minus buttons. This tutorial will show you how to dynamically add form elements to a form using jQuery.

HTML Code:

==============================

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Dinamic Form JQuery!</title>
</head>
<body>
<div class="container">
<br>
<h3 align="center"> Dinamic input Name Name[] Form </h3>
<div class="form-group">
<form action="" method="" name="add-name" id="add-name">
<table class="table table-bordered" id="dinamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control" placeholder="Enter Value"></td>
<td><div class="btn btn-success" name="add" id="add">Add</div></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="submit" />
</form>
</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

jquery code:

========================

<script>
//........ all source code www.onlylearn24.com
var ic = 1;
$('#add').click(function(){
ic ++;
$('#dinamic_field').append('<tr id="row'+ic+'"><td><input type="text" name="name[]" placeholder="Enter Value" class="form-control"></td><td><div class="btn btn-danger btn_remove" name="remove" id="'+ic+'">Close</div></td></td></tr>')
});
//........... all source code www.onlylearn24.com
$(document).on('click','.btn_remove', function(){
var button_x_id = $(this).attr("id");
console.log(button_x_id);
$('#row'+button_x_id+'').remove();
});
//....... all source code www.onlylearn24.com
$('#submit').click(function(e){
e.preventDefault();
var data_d = JSON.stringify( $("#add-name").serializeArray() )
console.log(data_d);
});
</script>