Create dynamic input fields

by Subigya Panta

HTML

<a href="#" class="dynamic-field">Add Field</a>
<form>
    <div class="add-field"></div>
    <input type="submit" name="submit" value="Done !" />
</form>

CSS

.add-field > *{
    display: block;
}

JavaScript

$.fn.addField = function(){
    var boxes = 0;
    var initialValue = 0;
    this.on('click', function( event ){
        event.preventDefault();
        console.log( boxes );
        $('.add-field').append('<input type="text" name="field-'+boxes+'" class="dynamic" value="Enter here" />');
        boxes++ ;
    });
    
    $('body').on({
        focusin : function(){
                    initialValue = $(this).attr('value');
                    $(this).attr('value', '');
                    console.log('in');
                },
        focusout : function(){
                    $(this).attr('value', initialValue );
                    console.log('out');
                    alert( $(this).attr('value') );
                }
        
    }, '.dynamic');
    
    return this;
};

$('.dynamic-field').addField();