Tuesday, March 11, 2014

add remove text box by javascript

<div id="content" class="add-images">
                    <div><ul><li>Label</li><li>Width</li><li>X</li><li>Height</li></div>
                    <div class="add-fil">
                   
                    <input name="label[]" type="text">
                    <input name="width[]" type="text">X
                    <input name="height[]" type="text">
                   
                    </div>
                    <div style="float:left;">
                        <input name=""  class="btn-all" type="button" value=" + " onclick="addInputFile()">
                        <input name="" class="btn-all" type="button" value=" - " onclick="removeElement()">
                        <input id="uploadButton" style="margin-top:8px;" class="" name="uploadButton"  type="submit" value="Submit My Work">
                    </div>
                </div>
               
                <script type="text/javascript">
            var intTextBox=0;
            //FUNCTION TO ADD TEXT BOX ELEMENT
            function addInputFile()
            {
                intTextBox = intTextBox + 1;
                var contentID = document.getElementById('content');
                var newTBDiv = document.createElement('div');
                newTBDiv.setAttribute('id','strText'+intTextBox);
                newTBDiv.setAttribute('class','strText');
                newTBDiv.innerHTML = "<input name='label[]' type='text'><input name='width[]' type='test'>X<input name='height[]' type='text' id='" + intTextBox + "' >";
                contentID.appendChild(newTBDiv);
            }
            //FUNCTION TO REMOVE TEXT BOX ELEMENT
            function removeElement()
            {
                if(intTextBox != 0)
                {
                    var contentID = document.getElementById('content');
                    contentID.removeChild(document.getElementById('strText'+intTextBox));
                    intTextBox = intTextBox-1;
                }
            }
        </script>

No comments:

Post a Comment