Add or Remove Input fields Dynamically Using JQuery - HTML

Add or Remove Input fields Dynamically Using JQuery - HTML

add/remove multiple input fields in html forms

if you are looking to add and remove duplicate input fields, here’s another jQuery example below to do the task for you. This jQuery snippet adds duplicate input fields dynamically and stops when it reaches maximum.

Code:

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

---

<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="file" name="mytext[]"/><a href="#" class="remove_field">X</a></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

---

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="file" name="mytext[]"></div>

</div>

---

---

Stylish Search bar example using jQuery

Stylish Search bar example using jQuery html and CSS it use jQueary online CDN for including jquery and use simple hide and show functions.

Download Code

Test here:

---

HTML Code:

---

<div class="main">

<img src="logo.png" id="display" />

<div class="search_bar" id="search">

<div class="box"><input type="text" placeholder="Search..." ></div>

<div class="btn"><input type="image" src="logo.png" alt="submit"></div>

</div>

</div>

---

JQuery Code:

---

<script>

$(document).ready(function(){

$("#display").click(function(){

$(this).hide();

$("#search").show();

});

$("#search").click(function(){

$(this).hide();

$("#display").show();

});

});

</script>

---

CSS code:

---

<style>

body{background-color:#eee;}

#display{height: 50px;width: 50px;border: 1px solid blue;border-radius: 10px;box-shadow: 2px 2px 10px skyblue;cursor:pointer;}

#search{padding: 10px;display: none;}

#search .box{float: left;}

#search input{height: 50px;box-shadow: 2px 2px 10px blue;}

#search input[type=image]{height: 42px;background-color: skyblue;border: 4px;border-style: solid;border-color: black;border-left: 0px;}

#search input[type=text]{padding: 12px;border: 4px;border-style: solid;border-color: black;border-right: 0px;}

.main{width:30%;margin:10% auto ;height:10%;box-shadow: 2px 2px 10px skyblue;padding:20px;background-color:#aaa;}

</style>