add fields when link clicked

**wazo** · Jun 26, 2007, 11:34

Hi guys

On my form

Users type in there previous jobs

What i want is when the user clicks on a link then another field is added so they can add another job. I want to keep it on the same page

How can I do this

**gRoberts** · Jun 26, 2007, 14:10

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <script type="text/javascript">
            var fieldCount = 0;

            function add() {
                var parent = document.getElementById('container');
                
                var div = document.createElement('DIV');
                div.id = 'cont_' + fieldCount;

                var label = document.createElement('label');
                var input = document.createElement('input');
                var remove = document.createElement('a');

                label.setAttribute('for','itm_' + fieldCount);
                label.appendChild(document.createTextNode('Label ' + fieldCount + ' '));

                input.id = 'itm_' + fieldCount;
                input.type = 'text';

                remove.appendChild(document.createTextNode(' X'));
                remove.onclick = function() {
                    del(this);
                }

                div.appendChild(label);
                div.appendChild(input);
                div.appendChild(remove);
                div.appendChild(document.createElement('BR'));

                parent.appendChild(div);

                fieldCount++;
            };
            function del(which) {
                var parent = which.parentNode.parentNode;
                parent.removeChild(which.parentNode);
            };
        </script>
        <link rel="stylesheet" type="text/css" media="all" />
        <style type="text/css" media="all">

        </style>
    </head>

    <body>

        <form action="" method="post">

            <div id="container">

            </div>

            <div id="footer"><br /><br /><a onclick="add();">New</a>

        </form>
        
    </body>
</html>

**wazo** · Jun 26, 2007, 14:33

thanks for that

only problem is

I need it to add 3 fields

job name
start date
end date

How can I do it to add multiple fields

**gRoberts** · Jun 26, 2007, 14:49

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <script type="text/javascript">
            var fieldCount = 0;

            function add() {
                var parent = document.getElementById('container');
                
                var div = document.createElement('DIV');
                div.id = 'cont_' + fieldCount;

                var lbl_name = document.createElement('LABEL');
                lbl_name.setAttribute('for','txt_name_' + fieldCount);
                lbl_name.appendChild(document.createTextNode('Job Name: '));

                var lbl_start = document.createElement('LABEL');
                lbl_start.setAttribute('for','txt_start_' + fieldCount);
                lbl_start.appendChild(document.createTextNode('Start Date: '));

                var lbl_end = document.createElement('LABEL');
                lbl_end.setAttribute('for','txt_end_' + fieldCount);
                lbl_end.appendChild(document.createTextNode('End Date: '));

                var txt_name = document.createElement('INPUT');
                txt_name.id = 'txt_name_' + fieldCount;
                txt_name.type = 'text';

                var txt_start = document.createElement('INPUT');
                txt_start.id = 'txt_start_' + fieldCount;
                txt_start.type = 'text';

                var txt_end = document.createElement('INPUT');
                txt_end.id = 'txt_end_' + fieldCount;
                txt_end.type = 'text';

                var remove = document.createElement('A');
                remove.onclick = function() {
                    del(this);
                };
                remove.appendChild(document.createTextNode('X'));

                div.appendChild(lbl_name);
                div.appendChild(txt_name);
                div.appendChild(document.createElement('BR'));

                div.appendChild(lbl_start);
                div.appendChild(txt_start);
                div.appendChild(document.createElement('BR'));

                div.appendChild(lbl_end);
                div.appendChild(txt_end);
                div.appendChild(document.createElement('BR'));

                div.appendChild(document.createElement('BR'));
                div.appendChild(remove);

                parent.appendChild(div);

                fieldCount++;
            };
            function del(which) {
                var parent = which.parentNode.parentNode;
                parent.removeChild(which.parentNode);
            };
        </script>
        <link rel="stylesheet" type="text/css" media="all" />
        <style type="text/css" media="all">

        </style>
    </head>

    <body>

        <form action="" method="post">

            <div id="container">

            </div>

            <div id="footer"><br /><br /><a onclick="add();">New</a>

        </form>
        
    </body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: add fields when link clicked

Thread Tools

Display

add fields when link clicked

Bookmarks

Bookmarks

Posting Permissions