{"id":1144,"date":"2017-02-22T22:34:03","date_gmt":"2017-02-22T17:04:03","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=1144"},"modified":"2017-03-01T22:39:06","modified_gmt":"2017-03-01T17:09:06","slug":"add-and-remove-dynamic-input-fields","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/add-and-remove-dynamic-input-fields\/","title":{"rendered":"Add and remove dynamic input elements"},"content":{"rendered":"

Posted Date:22-02-2017<\/strong><\/p>\n

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

Example :<\/strong><\/p>\n

In this post \u00a0we will add the dynamic input field of file one by one and remove\u00a0and upload it.<\/p>\n

First ,Create the new file and include script file and css file inside html head<\/p>\n

<script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n<\/pre>\n
Second, Create the basic html form with one input type file like this<\/p>\n
<input id=\"Upload1\" name=\"file[]\" type=\"file\" \/><\/pre>\n
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<\/p>\n
<script type=\"text\/javascript\">\r\n    $(document).ready(function() {\r\n\r\n      var intCounter = 1;\r\n\r\n      $( document ).on( 'change', '#upload_list > input', function() {\r\n        intCounter++;\r\n        $(\"#upload_list\").prepend('<input type=\"file\" name=\"file[]\" id=\"Upload'+intCounter+'\" \/>');\r\n        $(\"#Upload\"+(intCounter-1)).css(\"display\", \"none\");\r\n        var strImageName = '<p>' + $(\"#Upload\"+(intCounter-1)).val() + ' <a href=\"#\" id=\"'+(intCounter-1)+'\">Remove<\/a><\/p>';\r\n        $(\"#display_list\").prepend(strImageName);\r\n      });\r\n\r\n      $( document ).on( 'click', '#display_list > p > a', function() {\r\n        var intId = $(this).attr('id');\r\n        $(\"#Upload\"+intId).remove();\r\n        $(\"#\"+intId).parent().remove();\r\n      });\r\n\r\n    });\r\n  <\/script><\/pre>\n
Finally, add the php code for file upload when the user submit the form files are saved into folder<\/p>\n
<?php\r\nif (isset($_POST['submit'])) \r\n{\r\n  if(isset($_FILES['file']))\r\n  {\r\n\r\n    foreach($_FILES['file']['tmp_name'] as $key => $tmp_name)\r\n    {\r\n        $file_name = $key.$_FILES['file']['name'][$key];\r\n        $file_size =$_FILES['file']['size'][$key];\r\n        $file_tmp =$_FILES['file']['tmp_name'][$key];\r\n        $file_type=$_FILES['file']['type'][$key];  \r\n        move_uploaded_file($file_tmp,\"test\/\".time().$file_name);\r\n    }\r\n  }\r\n}\r\n?><\/pre>\n
If following the above steps you getting code like this<\/p>\n
<?php\r\nif (isset($_POST['submit'])) \r\n{\r\n  if(isset($_FILES['file']))\r\n  {\r\n\r\n    foreach($_FILES['file']['tmp_name'] as $key => $tmp_name)\r\n    {\r\n        $file_name = $key.$_FILES['file']['name'][$key];\r\n        $file_size =$_FILES['file']['size'][$key];\r\n        $file_tmp =$_FILES['file']['tmp_name'][$key];\r\n        $file_type=$_FILES['file']['type'][$key];  \r\n        move_uploaded_file($file_tmp,\"test\/\".time().$file_name);\r\n    }\r\n  }\r\n}\r\n?>\r\n<html lang=\"en-GB\" xml:lang=\"en-GB\" xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n  <title>jQuery Multiple File Uploader<\/title>\r\n  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n   <script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n  <script type=\"text\/javascript\">\r\n    $(document).ready(function() {\r\n\r\n      var intCounter = 1;\r\n\r\n      $( document ).on( 'change', '#upload_list > input', function() {\r\n        intCounter++;\r\n        $(\"#upload_list\").prepend('<input type=\"file\" name=\"file[]\" id=\"Upload'+intCounter+'\" \/>');\r\n        $(\"#Upload\"+(intCounter-1)).css(\"display\", \"none\");\r\n        var strImageName = '<p>' + $(\"#Upload\"+(intCounter-1)).val() + ' <a href=\"#\" id=\"'+(intCounter-1)+'\">Remove<\/a><\/p>';\r\n        $(\"#display_list\").prepend(strImageName);\r\n      });\r\n\r\n      $( document ).on( 'click', '#display_list > p > a', function() {\r\n        var intId = $(this).attr('id');\r\n        $(\"#Upload\"+intId).remove();\r\n        $(\"#\"+intId).parent().remove();\r\n      });\r\n\r\n    });\r\n  <\/script>\r\n\r\n  <style type=\"text\/css\">\r\n    body {\r\n      font-family: \"Arial\", sans-serif;\r\n    }\r\n    #display_list p {\r\n      background: #eee;\r\n      margin: 2px;\r\n    }\r\n  <\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n  <form id=\"UploadIndexForm\" enctype=\"multipart\/form-data\" method=\"post\">\r\n    <fieldset>\r\n      <input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"512000\" \/>\r\n\r\n      Upload file:\r\n      <div id=\"upload_list\">\r\n        <input type=\"file\" name=\"file[]\" id=\"Upload1\" \/>\r\n      <\/div>\r\n\r\n      <div id=\"display_list\">\r\n      <\/div>\r\n\r\n      <input type=\"submit\" name=\"submit\" value=\"Upload\" \/>\r\n    <\/fieldset>\r\n  <\/form>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Posted Date:22-02-2017 In this Post we will explain how to create dynamic input elements and remove elements in php page […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-1144","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-is","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1144"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1144\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}