SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Oct 2004
    Location
    uk
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    add fields when link clicked

    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

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


  3. #3
    SitePoint Guru
    Join Date
    Oct 2004
    Location
    uk
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •