SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Essex, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically Producing New Text Boxes in Form

    I've been ask to produce a new upload form that can allow multiple files to be uploaded with each article i was thinking of adding an upload form field than when text is added to the text field an extra file name description and upload text box would appear on the page via javascript.

    So the more files that add to the form the more dynamically produced form text boxes are added, i have been looking to find if this could be done or what way is better, if anyone could help with telling where to look or how to dynamically produce more text areas. Or could you let me know another solutions to this.

    I have seen it work on my mobile when added new contacts, you type in mobile number and then the home text box appears below it, then you type in home number and then the work text box appears. etc...

    Thank you in advance.

    Kind Regards,
    Mark

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>

    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    TextBoxAry=new Array();
    var 
    TextBoxCnt=0;

    var 
    TextAreaAry=new Array();
    var 
    TextAreaCnt=0;


    function 
    Create(c,a1,a2){
     if (
    c=='TEXTBOX'){
      
    TextBoxAry[TextBoxCnt]=document.createElement('INPUT');
      
    document.getElementById('MyForm').appendChild(TextBoxAry[TextBoxCnt]);
      
    TextBoxAry[TextBoxCnt].type='TEXT';
      
    TextBoxAry[TextBoxCnt].size=a1;
      
    TextBoxAry[TextBoxCnt].name='MyTextBox'+TextBoxCnt;
      
    TextBoxCnt++;
     }
     if (
    c=='TEXTAREA'){
      
    TextAreaAry[TextBoxCnt]=document.createElement('TEXTAREA');
      
    document.getElementById('MyForm').appendChild(TextAreaAry[TextAreaCnt]);
      
    TextAreaAry[TextAreaCnt].rows=a1;
      
    TextAreaAry[TextAreaCnt].cols=a2;
      
    TextAreaAry[TextAreaCnt].name='MyTextArea'+TextAreaCnt;
      
    TextAreaCnt++;
     }
     
    br=document.createElement('BR');
     
    document.getElementById('MyForm').appendChild(br);
    }


    //-->
    </script>


    </head>

    <body>
    <span onclick="javascript:Create('TEXTBOX',8);" style="text-decoration:underline;color:blue;" >Create Text Box</span> (Size=8)<br>
    <span onclick="javascript:Create('TEXTBOX',10);" style="text-decoration:underline;color:blue;" >Create Text Box</span> (Size=10)</span><br>
    <span onclick="javascript:Create('TEXTAREA',10,20);" style="text-decoration:underline;color:blue;" >Create Text Area</span> (Rows=10,Colums=20)</span><br>
    <span onclick="javascript:Create('TEXTAREA',4,40);" style="text-decoration:underline;color:blue;" >Create Text Area</span> (Rows=4,Colums=40)</span><br>

    <form id="MyForm" >
    </form>


    </body>

    </html> 

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Essex, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for sending me this, can u show how it is done when data is entered into a text box and how to change the upload text box name for each new dynamic box

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can u show how it is done when data is entered into a text box

    dont understad this question

    currently
    The call is made on the onclick event of the text

    this could be called by any method you chose including an onblur event on an existing text box


    how to change the upload text box name for each new dynamic box
    at the moment

    TextBoxAry[TextBoxCnt].name='MyTextBox'+TextBoxCnt;

    sets the name to 'MyTextBox'+TextBoxCnt

    'MyTextBox' can be changed to anything you want

    TextBoxCnt is 0 to .... the number of textboxes made and therefore a unique name

    the name could be set by an attribute of the call.


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
  •