Friday, March 2, 2018

add/remove multiple input fields dynamically with jquery

Puja Roy March 02, 2018 JQuery

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..

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();
}

Use The below Jquery Example to create add/remove input fields using jquery..

index.html

<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: