Add/Remove option for multiple input fields in form

Question

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>

Alfred · Accepted Answer · 2012-03-19 10:51:53Z

1

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>

answered Mar 19, 2012 at 10:51

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add/Remove option for multiple input fields in form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related