Last updated on September 7th, 2023 at 07:36 am
In this tutorial we are going to see how to append dynamic input field or element to an HTML form. We will also look in to the steps involved in getting these values when user add multiple input fields before form submission. User also has an option to remove fields they have added.
Create HTML Form
Let us create a simple HTML form with two fields, one is the name and other is a drop down with country selection.
<div class="form_field_outer ">
<div class="form_field_inner">
<label id="big_label"> Name - Country</label><br>
<input type="text" name="full_name[]" id="full_name" placeholder="Enter Full Name" required />
<select name="country[]" id="no_type_1" class="form-control" required ><option value="">Select Country</option>
<option value="USA">USA</option><option value="India">India</option><option value="Australia">Australia</option><option value="Canada">Canada</option><option value="China">China</option></select>
<button class="remove_node" disabled style="display:none">
<i class="fas fa-trash-alt">Remove</i>
</button>
</div>
</div>
<button id="add" class="btn btn-outline-lite add_new_frm_field_btn btn btn-danger"><i class="fas fa-plus add_icon"></i> Add New Name/button>
Take a note of the names of the field
- full_name[]
- country[]
Yes you saw it right, I have declared an array (kind of) in the name field. They have no special meaning in HTML. Server side scripts like PHP can be used to extract data from form submission. So with PHP, for instance, if you have two input fields with same
name="full_name[]", when submitted via form, in your PHP code on the server you’d retrieve a singlefull_nameobject from the request and it would have the values of all the the field. Same goes to country[].For example if you are using PHP to retrieve the form values all your have to do is
$name will be an array<?php $name = $_POST["full_name"]; ?>
Apart from this I have a button named Add New Name . There is also a Remove button that is intentionally hidden
I also declared two divs, one is the parent div with class name form_field_outer and child div with class name form_field_inner
Add jQuery
Now that we have a simple form ready, with buttons that are not yet functional we need to get the help of jQuery to start appending input field with country select option when an user click on the button named “Add New Name”
In the same HTML page you created the above form, add this script
<!--Add this to the head section-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!--Head section ends-->
<script>
$(document).ready(function(){
var numberIncr = 1;
$("#add").click(function(e){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer").length + 1;
$(".form_field_outer").append(`
<div class="form_field_inner">
<label id="big_label"> Name - Country</label><br>
<input type="text" name="full_name[]" id="full_name" placeholder="Enter Full Name" required />
<select name="country[]" id="no_type_1" class="form-control" required ><option value="">Select Country</option>
<option value="USA">USA</option><option value="India">India</option><option value="Australia">Australia</option><option value="Canada">Canada</option><option value="China">China</option></select>
<button class="remove_node" >
<i class="fas fa-trash-alt ">Remove</i>
</button>
</div>
`);
numberIncr++;
e.preventDefault();
});
$("body").on("click", ".remove_node", function () {
$(this).closest(".form_field_inner").remove();
console.log("success");
});
});
</script>
As you can see above I am using jquery append function for the parent class form_field_outer and adding the child class form_field_inner as plain HTML within the append()
This append function get triggered when user click on the button with id=”add”
$("#add").click()
Basically when you click on the Add New Name button jQuery appends the HTML we have added above.
This line ask browser to remove the child form when clicked, rather than calling from the body element you can also add a ID or Class and call the remove() function accordingly.
$("body").on("click", ".remove_node", function () {
$(this).closest(".form_field_inner").remove();
console.log("success");
});
Now that you have the form ready it will look something like this
Let us now add some CSS and style the form
Final HTML Form With CSS
Just add the below CSS to style the form with some awesome look and feel, Add this in your head section
<style>
label
{
color:white;
padding:8px;
width:30%;
background-color:#2196F3;
display: block;
}
.form_field_outer {
border: 5px outset rgb(27, 18, 18);
background-color: rgb(40, 62, 70);
text-align: center;
width: 50%;
}
input,select {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid rgb(138, 76, 76);
width: 40%;
}
button
{color: #fff!important;
background-color: #90b135!important;
border: 10px;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-color: rgb(17, 15, 15);
}
.red
{
color: #fff!important;
background-color: #f32121!important;
}
</style>
After the above CSS is added my form will look like this
Complete form with Submit button
This is the complete code for the HTML form with dynamic input field and submit button added. Basically enclosing the parent div within the form tag and adding a submit button should do.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<style>
label
{
color:white;
padding:8px;
width:30%;
background-color:#2196F3;
display: block;
}
.form_field_outer {
border: 5px outset rgb(27, 18, 18);
background-color: rgb(40, 62, 70);
text-align: center;
width: 50%;
}
input,select {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid rgb(138, 76, 76);
width: 40%;
}
button
{color: #fff!important;
background-color: #90b135!important;
border: 10px;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-color: rgb(17, 15, 15);
}
.red
{
color: #fff!important;
background-color: #f32121!important;
}
</style>
<form action="process.php" method="post">
<div class="form_field_outer mydiv">
<div class="form_field_inner">
<label id="big_label"> Name - Country</label><br>
<input type="text" name="full_name[]" id="full_name" placeholder="Enter Full Name" required />
<select name="country[]" id="no_type_1" class="form-control" required ><option value="">Select Country</option>
<option value="USA">USA</option><option value="India">India</option><option value="Australia">Australia</option><option value="Canada">Canada</option><option value="China">China</option></select>
<button class="remove_node" disabled style="display:none">
<i class="fas fa-trash-alt">Remove</i>
</button>
</div>
</div><button class="" data-sitekey="6LelBhUkAAAAAE3Ql0eUfu1MYHt4gsL9xh4GairP" >Submit</button>
<button id="add" class="btn btn-outline-lite add_new_frm_field_btn btn btn-danger"><i class="fas fa-plus add_icon"></i> Add New Name</button>
<script>
$(document).ready(function(){
var numberIncr = 1;
$("#add").click(function(e){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer").length + 1;
$(".form_field_outer").append(`
<div class="form_field_inner">
<label id="big_label"> Name - Country</label><br>
<input type="text" name="full_name[]" id="full_name" placeholder="Enter Full Name" required />
<select name="country[]" id="no_type_1" class="form-control" required ><option value="">Select Country</option>
<option value="USA">USA</option><option value="India">India</option><option value="Australia">Australia</option><option value="Canada">Canada</option><option value="China">China</option></select>
<button class="remove_node">
<i class="fas fa-trash-alt ">Remove</i>
</button>
</div>
`);
numberIncr++;
e.preventDefault();
});
$("body").on("click", ".remove_node", function () {
$(this).closest(".form_field_inner").remove();
console.log("success");
});
});
</script>
admin