This tutorial shows an example how to add input types text, textarea and file to the form. For this example I have used here jquery for dynamically adding inputs, css for some basic style and html code.

We have select/option for what type of input to be added to the form.
We have one <span/> tag with id=”addField” for triggering add functionality using jquery.
Each dynamically added input field has exactly one <span/> tag for removing the added input field if not needed later.

Final output

jQuery add or remove form fields dynamically

 

jQuery add or remove form fields dynamically

By default, we have already one input type=”text” field in the form.

This is an example which shows how to add fields to the form dynamically using jquery and if you want you may customize as per your needs. If you need any help you can leave a comment.

HTML code

Here you see we have select/option field for what type of input you want to add to the form. We have <span/> tag with id=”addField” clicking on which adds the input to the form. We have already default input field in the form.

<div id="container">
        <form id="dynamic_inputs" method="post">            
            <p>
                <select name="input_type" id="input_type">
                    <option value="">-- Select Type --</option>
                    <option value="1">Text</option>
                    <option value="2">Textarea</option>
                    <option value="3">File</option>
                </select>
                <span id="addField">Add Field</span>
            </p>
            <p>
                <label for="name">Name: </label>
                <input id="name" type="text" name="name">
            </p>
        </form>
    </div>

 

CSS Code

We have some css code for basic style.

#container{
            width:600px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
        }
        #addField{
            padding:5px;
            display:inline-block;
            background-color:#3A9668;
            color:#f1f1f1;
            border:1px solid #005;
        }
        .removeField{
            margin:auto;
            margin-left:5px;
            padding:5px;
            display:inline-block;
            background-color:#B02109;
            color:#f1f1f1;
            border:1px solid #005;
        }
        #addField:hover, .removeField:hover{
            cursor: pointer;
        }
        label{
            padding:0 10px;
            display:block;
            float:left;    
            width:150px;
        }
        input, textarea{
            padding:5px;
            font-size: 14px;
        }
        input {
            width: 250px;
        }
        textarea{
            width:290px;
            height:150px;
        }
        select {
            padding:5px;
        }
        .btn-submit {
            width: 100px;
            background-color:#428BCA;
            border-color:#357EBD;
        }

 

jQuery Code

We have finally jquery for adding inputs to the form.

<script type="text/javascript">
        $(document).ready(function(){            
            var $fieldCount = 0;
            $('#addField').on('click', function(){
                $(".error").remove();
                $(".values").remove();
                if($("#input_type").val()!=""){
                    var $type = $("#input_type").val();
                    $fieldCount++;;
                    if($type == 1) {
                        var $node = '<p><label for="text'+$fieldCount+'">Text '+$fieldCount+': </label><input type="text" name="text'+$fieldCount+'" id="text'+$fieldCount+'"/><span class="removeField">Remove</span></p>';
                    } else if($type == 2) {
                        var $node = '<p><label for="textarea'+$fieldCount+'">Textarea '+$fieldCount+': </label><textarea name="textarea'+$fieldCount+'" id="textarea'+$fieldCount+'"/><span class="removeField">Remove</span></p>';
                    } else if($type == 3) {
                        var $node = '<p><label for="file'+$fieldCount+'">File '+$fieldCount+': </label><input type="file" name="file'+$fieldCount+'" id="file'+$fieldCount+'"/><span class="removeField">Remove</span></p>';
                    }
                    $('p').last().after($node);
                } else {
                    $error_msg = "<p style='color:red;' class='error'>Select input type<p>";
                    $('form').prepend($error_msg);
                }
            });
            
            $('form').on('click', '.removeField', function(){
                $(this).parent().remove();
            });            
        });
    </script>

 

Thanks for your reading. Please leave a comment because comment help us to improve.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *