CODEWITHSUNDEEP
javascriptjqueryhtml
Sowmya
Sowmya

Reputation: 26969

Add/Remove option for multiple input fields in form

I am using a form with the option of Add more city to enter more than one city name. There is a button t0 remove the fields also. It is working perfect but the problem is in below code I am getting the remove button for first city also which is not correct.

So how can I remove the 'remove' button from the 1st set of input box. Remove button should continue for all the newly generated fields.

I got this code from this website http://www.quirksmode.org/dom/domform.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Extending forms</title>
    <script type="text/javascript" src="./Javascript - Extending forms_files/quirksmode.js"></script>
    <script type="text/javascript">
    <!--
    var counter = 0;

    function init() {
        document.getElementById('moreFields').onclick = moreFields;
        moreFields();
    }

    function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=0;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
        }
        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields,insertHere);
    }

    // -->
    </script>
    </head>

    <body>

<!--This prat will be dynamically generated on clicking the add more button (and this is the default one to be shown in the page)-->
    <div id="readroot" style="display: none">   
    <input type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
        <label for="city">City:</label> &nbsp;&nbsp;<input type="text" class="pssng1" name="city" value="" />&nbsp;&nbsp;
         <label for="days">Days:</label> <input type="text" class="pssng1" name="days"  value="" />
    </div>    
<!--This prat will be dynamically generated on clicking the add more button-->

    <form method="post" >
    <div id="" style="display: block; "></div>
    <span id="writeroot"></span>
    <input type="button" id="moreFields" value="Add more!">
    </form>

    </body>
    </html>

Upvotes: 0

Views: 3191

Answers (1)

Alfred
Alfred

Reputation: 21386

Modify your JavaScript like;

<script type="text/javascript">
    <!--
    var counter = 0;

    function init() {
        document.getElementById('moreFields').onclick = moreFields;
        moreFields();
    }

    function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=1;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
        }
        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields,insertHere);
    }

    // -->
    </script>

Upvotes: 1

Related Questions