Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding/Removing input fields on button click

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 122
    Comment on it

    In this blog, we are adding input field by clicking on more button and removing input field by clicking on erase button. The procedure of doing this is very simple and easy. I have provided the code for doing this below .

    In below code first we are taking one field and letting include more fields on More button click until the number reaches the most . For erase button, when we clicked on it, it will erase the current input field. Below is the jquery code.

    $(document).ready(function() {
        var max      = 5; //maximum input boxes allowed
        var container         = $(".wraper");  
        var add      = $(".add_icon"); //Plus sign id
       
        var x = 1; //input field count intially
        $(add).click(function(e){         e.preventDefault();
            if(x < max){ //maximum number of input field allowed
                x++; //input field increment
                $(container).append('<div><input type="text" name="text[]"/><a href="#" class="delete">delete</a></div>'); //adding new input field
            }
        });
       
        $(container).on("click",".delete", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });

     

    Below is the html code.

    <div class="wraper">
        
       <div><input type="text" name="text[]"> <button class="add_icon">More</button>
      </div>
    </div>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: