Add Extra Field Like Google Plus

Posted by Shiva on 08:01 in HTML, JQUERY | No comments

Jquery code to add extra field using jquery.

Demo

 HTML PART :

<div class='extdiv'>
<input type="text" class="addmore"  />
</div>


JQUERY CODE :

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>
$(document).on("keyup",".extdiv .addmore",function(){
    var dynamic = $(this).attr("class");
    var countoftext = $("."+dynamic).length;  // count of entered value
    var nextcount = $(this).parent(".extdiv").nextAll(".extdiv").length; // finding next class count
    if(this.value.length >= 1 && nextcount == 0 )  // if length of textbox values greate than or equal to one and nextdiv class count is equal to zero
    {
        $(this).after("<button>remove</button>"); // appending remove button to that field
        var extrabox = "<div class='extdiv'><input type='text' class= 'addmore' /></div>" // creating required field
        $(this).parent(".extdiv").after(extrabox); // appending
    }
    });
    $(document).on("click","button",function(){
    $(this).parent("div").remove();

    });
  

</script>