51 users online (0 members and 51 guests)  


  Results 1 to 5 of 5

Related

  1. dynamic web forms    Forum: HTML Forum
    Replies: 1
  2. using forms to display dynamic data    Forum: Javascript Forum
    Replies: 1
  3. dynamic forms    Forum: Website Scripts Forum
    Replies: 4
  4. dynamic forms    Forum: HTML Forum
    Replies: 1
  1. #1
    Team3's Avatar
    New User

    Status
    Offline
    Join Date
    May 2006
    Posts
    5

    Dynamic web forms

    I am trying to make a dynamic input form as part of a project. The form needs to be able to create new textareas when an 'add button' is pressed and delete them also if necassary.

    I have searched Google without much success. If anyone can help me this would be great.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Dynamic web forms


    Hi there Team3,

    and a warm welcome to these forums.

    Try this, it may suit your requirements...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>add/subtract textareas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    fieldset {
        width:395px;
        border:3px double #000;
        margin:50px auto;
     }
    legend {
        margin-left:10px;
     }  
    #butts {
        padding:10px 0 10px 0;
        text-align:center;
     }
    #txtara {
        width:385px;
        margin:auto;   
    }
    #txtara textarea {
        overflow:auto;
        margin:5px;
        float:left;
     }
    #clear {
        height:10px;
        font-size:0;
        clear:both;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
      var ta=new Array();
      var n=0;
    window.onload=function() {
       inp=document.getElementsByTagName('input');
    for(c=0;c<inp.length;c++) {
    if(inp[c].value=='add') {
       inp[c].onclick=function() {
       ta[n]=document.createElement('textarea');
       ta[n].setAttribute('rows',5);
       ta[n].setAttribute('cols',20);
       ta[n].name='box'+n;
       document.getElementById('txtara').appendChild(ta[n]);
       n++;
      }
     }
    if(inp[c].value=='subtract') {
       inp[c].onclick=function() {
    if(n<1) {
       return;
     }
       document.getElementById('txtara').removeChild(ta[n-1]);
    if(n>0) {
       n--;
         }
        }
       }
      }
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <form action="http://www.google.com" method="get">
    <fieldset>
    
    <legend>textareas</legend>
    
    <div id="butts">
    <input type="button" value="add">
    <input type="button" value="subtract">
    <input type="submit" value="submit">
    </div>
    
    <div id="txtara"></div>
    
    <div id="clear"></div>
    
    </fieldset>
    </form>
    
    </body>
    </html>
    

  3. #3
    Team3's Avatar
    New User

    Status
    Offline
    Join Date
    May 2006
    Posts
    5

    Re: Dynamic web forms

    That is exactly the sort of thing I was looking for! Thanks very much.

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Dynamic web forms


    No problem, you're welcome.

  5. #5
    Team3's Avatar
    New User

    Status
    Offline
    Join Date
    May 2006
    Posts
    5

    Re: Dynamic web forms

    I have another question about these dynamic forms.

    I am trying to create a form that has initially 1 text field, 1 textarea, an add button and a submit button. If the add button is pressed then underneath these elements appears another text field, area, add button and this time a delete button too. Every time an add button is pressed a new set of these elements appear under that button. If a delete button is pressed then it's corresponding text field, area and buttons are removed

    I have tried starting like this, but my newly created add and delete buttons won't work which completely has halted my progress. Also the positioning of the new elements is weird. I will be very grateful for any suggestions.

    Code:
    
    <html>
        <head>
            <script>
                var ta=new Array();
                var tf=new Array();
                var ad=new Array();
                var de=new Array();
                var n=0;
                window.onload=function() {
                    inp=document.getElementsByTagName('input');
                    for(c=0;c<inp.length;c++) {
                        if(inp[c].value=='New') {
                            inp[c].onclick=function() {
                                tf[n]=document.createElement('input');
                                tf[n].setAttribute('type','text');
                                tf[n].setAttribute('name','txt'+n);
                                tf[n].setAttribute('size',40);
                                document.getElementById('txt').appendChild(tf[n]);
                                ta[n]=document.createElement('textarea');
                                ta[n].setAttribute('rows',5);
                                ta[n].setAttribute('cols',50);
                                ta[n].setAttribute('wrap','virtual');
                                ta[n].name='box'+n;
                                document.getElementById('txtara').appendChild(ta[n]);
                                ad[n]=document.createElement('input');
                                ad[n].setAttribute('type','button');
                                ad[n].setAttribute('value','New');
                                document.getElementById('butts').appendChild(ad[n]);
                                de[n]=document.createElement('input');
                                de[n].setAttribute('type','button');
                                de[n].setAttribute('value','Delete');
                                document.getElementById('butts').appendChild(de[n]);
                                n++;
                                }
                            }
                        if(inp[c].value=='Delete') {
                            inp[c].onclick=function() {
                                if(n<1) {
                                    return;
                                    }
                                document.getElementById('txtara').removeChild(ta[n-1]);
                                document.getElementById('txt').removeChild(tf[n-1]);
                                document.getElementById('butts').removeChild(ad[n-1]);
                                document.getElementById('butts').removeChild(de[n-1]);
                                if(n>0) {
                                    n--;
                                    }
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
            <form action="">
                
                    <input type="button" value="New">
                    <input type="button" value="Delete">
                    <input type="submit" value="Submit">
                <div id="butts"></div>
                <div id="txt"></div>
                <div id="txtara"></div>
                <div id="clear"></div>
            </form>
        </body>
    </html>
    



Tags for this Thread