Categories: JavascriptJquery

Add or remove form inputs dynamically using jquery

Add or remove form inputs dynamically using jquery

Some places we need to adding or cloning the form fields dynamically. By default we have Jquery clone() function. Which will clone the particular mentioned div or element and insert to mentioned places. Its simple and useful for cloning one field. If you want to clone group of elements and customising is little difficult.

Here we are going to see how to Dynamically add or remove form inputs using jquery. Here we can customise the form fields how ever we want.

1. Create Index.php file

2. Create From Inputs (Which you want to clone) alone in another file(clone-form.php)

3. Use Jquery load() function to add or remove form inputs.

4. Create a php from action file to retrieve user inputs.

My Index.php

1. Here I have mentioned the $length is 1. Beacause On create time we must have minimum one form group. In update page you can change the length based on user cloned forms on create time

2. Included clone-form.php which contains form elements

3. I set $_REQUEST[‘id’]=$i; Because during clone time We will pass parameter Id to clone-form.php. By same way here we have assigned parameter id as $i.

4. Have added 2 hidden input boxes. A. length (Count of Inserted forms on page load) B. last_inserted_id(Count of Inserted forms on page load minus 1 ) Its going to help us during the clone time.

<!DOCTYPE html>
<html lang="en">
  <title>Dynamically Add or Remove Div</title>
  <meta charset="utf-8">
  <meta name="vixewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
    .padding { padding: 20px;  }
    .remove { color: #d9534f; color: #d9534f;font-size: 16px; border: 2px solid #ccc; padding: 4px 10px; border-radius: 5px;  }
    .jumbotron { padding-top: 15px; padding-bottom: 15px;  }
    .add-another { color: #4CAF50;  font-size: 18px; font-weight: 600;  border: 2px solid #ccc; padding: 4px 10px; border-radius: 5px; }
<div class="jumbotron text-center">
  <h3>Dynamically Add/Remove Div</h3>
<div class="container">
<form class="form-horizontal" action="query.php" method="POST" enctype="multipart/form-data">
  $length = 1;
  for($i = 0; $i <  $length ; $i++ ) {

  <div id="last_inserted_id_<?php echo $i; ?>"></div>
<?php } ?>
<a href="javascript:;" class="pull-right add-another" id="add_another_block" >clone-form.php
$i =  $_REQUEST['id'];
  <div class="row" id="row_<?php echo $i; ?>" >
      <div class="col-sm-14 panel panel-default padding" >

            <div class="form-group">
              <label class="control-label col-sm-2" >
Here Based on $i values we will form the array of input elements.

In my index.php I have called addAnotherBlock() function to add new set of block
<script type="text/javascript">
  var length = $("#length").val();
  function addAnotherBlock() {
    var lastId = $("#last_inserted_id").val();
    $("#last_inserted_id").val( parseInt(lastId) + 1 );

You can see I have added id "last_inserted_id_<?php $i ?>" every end of block. Because Based on end of block we will load another set of elements.
This function will load load clone-form.php based on passing parameter.

On first click length will be total loaded from groups count and length++ will increase the value. On next click will pass increased value and so on.

Based on this logic you can modify or customise any number form elements and can convert as our need.

On submit it will redirect to query.php page



Lets see how to extract user inputs in php

echo '<pre/>';
foreach ($_POST['formdata'] as $key => $value) {
	echo  "<div style='padding:10px; width:100%; float:left; border:1px solid #ccc;margin-bottom:20px; ' >Title : ".$value['title'] . "<br/>";
	echo  "Description : ".$value['description'] . "<br/>";
	echo  "Select list : ".$value['sel'] . "<br/><br/>";
	for ($i=0; $i < count($_FILES['formdata']['name'][$key]['image']); $i++) { 
		echo "Image name : ". $_FILES["formdata"]['name'][$key]['image'][$i]. "<br/>";
		echo "Image type : ". $_FILES["formdata"]['type'][$key]['image'][$i]. "<br/>";
		echo "Image size : ". $_FILES["formdata"]['size'][$key]['image'][$i]. "<br/>";
		echo "Image tmp_name : ". $_FILES["formdata"]['tmp_name'][$key]['image'][$i]."<br/><br/>";
	echo "</div>";




Here formdata  is the primary array name of all inputs. Based on foreach we can extract all inputs as aobe.

Hope it will help someone.