Add and remove dynamic input elements

Posted Date:22-02-2017

In this Post we will explain how to create dynamic input elements and remove elements in php page using javascript/jquery.

Example :

In this post  we will add the dynamic input field of file one by one and remove and upload it.

First ,Create the new file and include script file and css file inside html head

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Second, Create the basic html form with one input type file like this

<input id="Upload1" name="file[]" type="file" />

Third, Create jquery on change function for input type file,when user add the file at the time create automatically one input file created and remove button append into respective input type of file

<script type="text/javascript">
    $(document).ready(function() {

      var intCounter = 1;

      $( document ).on( 'change', '#upload_list > input', function() {
        intCounter++;
        $("#upload_list").prepend('<input type="file" name="file[]" id="Upload'+intCounter+'" />');
        $("#Upload"+(intCounter-1)).css("display", "none");
        var strImageName = '<p>' + $("#Upload"+(intCounter-1)).val() + ' <a href="#" id="'+(intCounter-1)+'">Remove</a></p>';
        $("#display_list").prepend(strImageName);
      });

      $( document ).on( 'click', '#display_list > p > a', function() {
        var intId = $(this).attr('id');
        $("#Upload"+intId).remove();
        $("#"+intId).parent().remove();
      });

    });
  </script>

Finally, add the php code for file upload when the user submit the form files are saved into folder

<?php
if (isset($_POST['submit'])) 
{
  if(isset($_FILES['file']))
  {

    foreach($_FILES['file']['tmp_name'] as $key => $tmp_name)
    {
        $file_name = $key.$_FILES['file']['name'][$key];
        $file_size =$_FILES['file']['size'][$key];
        $file_tmp =$_FILES['file']['tmp_name'][$key];
        $file_type=$_FILES['file']['type'][$key];  
        move_uploaded_file($file_tmp,"test/".time().$file_name);
    }
  }
}
?>

If following the above steps you getting code like this

<?php
if (isset($_POST['submit'])) 
{
  if(isset($_FILES['file']))
  {

    foreach($_FILES['file']['tmp_name'] as $key => $tmp_name)
    {
        $file_name = $key.$_FILES['file']['name'][$key];
        $file_size =$_FILES['file']['size'][$key];
        $file_tmp =$_FILES['file']['tmp_name'][$key];
        $file_type=$_FILES['file']['type'][$key];  
        move_uploaded_file($file_tmp,"test/".time().$file_name);
    }
  }
}
?>
<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Multiple File Uploader</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

      var intCounter = 1;

      $( document ).on( 'change', '#upload_list > input', function() {
        intCounter++;
        $("#upload_list").prepend('<input type="file" name="file[]" id="Upload'+intCounter+'" />');
        $("#Upload"+(intCounter-1)).css("display", "none");
        var strImageName = '<p>' + $("#Upload"+(intCounter-1)).val() + ' <a href="#" id="'+(intCounter-1)+'">Remove</a></p>';
        $("#display_list").prepend(strImageName);
      });

      $( document ).on( 'click', '#display_list > p > a', function() {
        var intId = $(this).attr('id');
        $("#Upload"+intId).remove();
        $("#"+intId).parent().remove();
      });

    });
  </script>

  <style type="text/css">
    body {
      font-family: "Arial", sans-serif;
    }
    #display_list p {
      background: #eee;
      margin: 2px;
    }
  </style>

</head>

<body>

  <form id="UploadIndexForm" enctype="multipart/form-data" method="post">
    <fieldset>
      <input type="hidden" name="MAX_FILE_SIZE" value="512000" />

      Upload file:
      <div id="upload_list">
        <input type="file" name="file[]" id="Upload1" />
      </div>

      <div id="display_list">
      </div>

      <input type="submit" name="submit" value="Upload" />
    </fieldset>
  </form>

</body>

</html>