add/remove input fields dynamically with jquery
Hi Friends today we are going to learn how to add and remove multiple input fields using jquery.. |
| add/remove multiple input fields dynamically with jquery |
This Jquery codes are used to add and remove input fields..
1 2 3 4 5 6 | function add_file(){$("#input_file").append("<div><input type='file' class='inputfile' name='file[]'><input type='button' value='REMOVE' onclick=remove_file(this);></div>");}function remove_file(ele){ $(ele).parent().remove();} |
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script src="jquery.js"></script><script type="text/javascript">function add_file(){$("#input_file").append("<div><input type='file' class='inputfile' name='file[]'><input type='button' value='REMOVE' onclick=remove_file(this);></div>");}function remove_file(ele){ $(ele).parent().remove();}</script></head><body><style>.inputfile { position: relative; font-family: calibri; width: 150px; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor:pointer;}input[type=button],[type=submit]{ padding:4px; border-radius:4px; background:black; color:white; cursor:pointer;}</style> <form method="post" action="upload.php" enctype="multipart/form-data"> <div id="input_file"> <input type="file" class="inputfile" name="file[]"> <input type="button" onclick="add_file();" value="ADD MORE"> </div> <input type="submit" name="submit_file" value="SUBMIT"> </form></body> |
Your Output will be something look like below:
 |
| add/remove multiple input fields dynamically with jquery |
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.