Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically add table with forms and internal script

    Several years ago, I was good with Javascript - now I am very rusty. I need to make a web form. I would like to keep all of the code for this form on a single page (ie. no .js files) (minus the eventual e-mail processing script of course). When someone chooses the "Number of Files to Attach", I want the page to dynamically create the "Document #:" text and corresponding 2-row table form.

    Each three-line document form would need unique field names.

    As you can see, I already have a script to populate a drop-down list after a first drop-down list's choice is selected. I would like this feature to work for however many documents are added.

    I would greatly appreciate any help you can provide. I am unsure what further info is needed, but would be more than happy to answer further questions. Thank you!!!

    Code:
    <html>
    <head>
    <title>Car Design</title>
    </head>
    <!-- Second part of the dilemma: how to use this script if there are multiple documents -->
    <script type="text/javascript">
    	function configureDropDownLists(ddl1,doc1_sys) {
    		var e1 = new Array('Bilge & Ballast (BL)', 'Boiler (B)', 'Vents & Sounds (V)', 'Other (GENR)');
    		var e2 = new Array('One Line Diagram (ONE)', 'Sound Powered Phone (SPP)', 'Other (GENR)');
    		var h1 = new Array('Damage Stability (DAM)', 'Intact Stability (INT)', 'Lightship (LTSH)', 'Other (GENR)');
    		switch (ddl1.value) {
    			case 'E1':
    				document.getElementById(doc1_sys).options.length = 0;
    				for (i = 0; i < e1.length; i++) {
    					createOption(document.getElementById(doc1_sys), e1[i], e1[i]);
    				}
    				break;
    			case 'E2':
    				document.getElementById(doc1_sys).options.length = 0; 
    				for (i = 0; i < e2.length; i++) {
    					createOption(document.getElementById(doc1_sys), e2[i], e2[i]);
    				}
    				break;
    			case 'H1':
    				document.getElementById(doc1_sys).options.length = 0;
    				for (i = 0; i < h1.length; i++) {
    					createOption(document.getElementById(doc1_sys), h1[i], h1[i]);
    				}
    				break;
    			default:
    				document.getElementById(doc1_sys).options.length = 0;
    				break;
    		}
    	}
    	function createOption(ddl, text, value) {
    		var opt = document.createElement('option');
    		opt.value = value;
    		opt.text = text;
    		ddl.options.add(opt);
    	}
    </script>
    <form name="car" action="html_form_action.asp" method="get">
    Submissions:<br>
    Number of Files to Attach: <select name="numberoffiles">
    <option value="0">0</option>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option></select> Expedite? <input type="radio" name="nvic" value="Yes">Yes <input type="radio" name="nvic" value="No" checked>No
    <br>
    <!-- From here to the below comment is what needs to be dynamically added with each "number of files to attach" -->
    Document 1:<br>
    <table>
    <tr>
    <td>Name:</td>
    <td><input type="text" size="60" name="doc1_name"></td>
    <td><input type="file" name="doc1_file" size="72" allow="text"></td>
    </tr>
    <tr>
    <td>Number:</td>
    <td><input type="text" name="doc1_number"> Rev.: <input type="text" size="2" maxlength="2" name="doc1_rev"> Type:  <select name="doc1_type">
    <option value="Letter">Letter</option>
    <option value="Manual">Manual</option>
    <option value="Plans">Plans</option></select></td>
    <td>Branch: <select id="ddl" onchange="configureDropDownLists(this,'doc1_sys')">
    <option value=""></option>
    <option value="E2">Electrical</option>
    <option value="H1">Hull & Stability</option>
    <option value="E1">Machinery & Piping</option>
    </select>
    System: 
    <select id="doc1_sys">
    </select></td>
    </tr>
    </table>
    <!-- End of what needs to be dynamically added with each "number of files to attach" -->
    <br>
    <br>
    <input type="reset" value="Clear">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Dynamically add table with forms and internal script-pageasposted.png  

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quite frankly, I would not do it that way.

    If you are willing to set a reasonable upper limiit on the number of files to attach, and in this case you have with the <select> allowing 1 to 5, I'd just create all the <input type=file> and associated HTML for all 5 file uploads and then simply hide all but the first one.

    When the user changes the number to upload, you just change the number of sets of info that are displayed.

    *******

    I do have to ask what you mean by "email processing script". How do you expect a script to be able to send an email with files attached?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two points

    1) Hidden fields would be great; however, I do not know how to do that. With my actual script, I would like to have 0-10 attachments.

    2) Processing script. I used to do a lot of work with forms and used CGI/PERL to process the forms. Attaching files are new to me. Can I not do this? Is there no way to have a user form, where they attach a file, and have it sent to a pre-determined e-mail account?

    Thank you for your help!

  • #4
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by joedirty99504 View Post

    2) Processing script. I used to do a lot of work with forms and used CGI/PERL to process the forms. Attaching files are new to me. Can I not do this? Is there no way to have a user form, where they attach a file, and have it sent to a pre-determined e-mail account?
    Sure, no problem. But I would do it in a similar way to old pedant's suggestion.

    Either use a <select> to prompt for number of attachments or, my preference, have an Add Attachment button which dynamically adds a table row and its cells using the insertRow() and insertCell() methods each time the Add Row button is clicked. I would also have a Delete button at the end of each row so a user can delete the attachment if they change their mind.

    When the form is submitted, your server side script (in my case PHP) appends all the attachments to an email and sends them to wherever.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quote Originally Posted by joedirty99504 View Post
    1) Hidden fields would be great; however, I do not know how to do that. With my actual script, I would like to have 0-10 attachments.
    Trivial to do. MUCH MUCH easier than dynamically creating all that stuff
    2) Processing script. I used to do a lot of work with forms and used CGI/PERL to process the forms. Attaching files are new to me. Can I not do this? Is there no way to have a user form, where they attach a file, and have it sent to a pre-determined e-mail account?
    Oh, sure, but not with HTML and JavaScript alone. You need server-side processing. You could do it with CGI, but nowadays you'll find it much easier to use PHP or JSP or ASP.NET, say.
    Last edited by Old Pedant; 03-30-2013 at 03:27 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Also, you can not use method="get" when attaching files. You must use method="post".

    Also, named forms are obsolete. Give your <form> and id instead.

    Also, any form field that does *NOT* have a name will *NOT* be sent by the browser to the recipient of the form (that is, the page specified in the action= of the <form>). IDs do *NOT* count. Only names do.

    And I just noticed that your <form>'s action is an ASP page. So why were you talking about using HTML/JavaScript to send the email? ASP is somewhat old-fashioned, but it can certainly allow uploaded files and then send them via email.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post
    Trivial to do. MUCH MUCH easier than dynamically creating all that stuff
    I guess it's all relative. Using insertRow(), insertCell() and deleteRow() is fairly trivial and easy as well. I don't like creating "hidden" or "invisible" elements which still might in some cases be sent to the server with no data in them which the server side script then has to handle.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quote Originally Posted by knightCoder View Post
    I guess it's all relative. Using insertRow(), insertCell() and deleteRow() is fairly trivial and easy as well. I don't like creating "hidden" or "invisible" elements which still might in some cases be sent to the server with no data in them which the server side script then has to handle.
    ??? How hard can that be?

    In this case, for example, you look to which <input type="file"> fields have been used and only process those. Optionally, you could give an error if fields for (say) document 3 are filled in without a file being specified.

    If you properly created the dynamic elements in this case, it would take probably 2 pages or more of JS code. Avoiding the empty fields in server-side code (in this case ASP code) would take maybe one or two lines. Besides, the <select> that says how many files to attach will have its value sent to the server, as well, so the server knows how many it needs to process.
    Last edited by Old Pedant; 03-30-2013 at 04:00 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Here, my version that does all this. Only 3 documents shown for brevity's sake.

    I also cleaned up the ugly code for filling in the dependent <select>s.

    Note also the required enctype for the <form> tag. ASP and ASP.NET need it, for sure, when attaching files. I would assume that PHP and JSP would need it as well.

    And yes, except for actually attaching files, this has been tested.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>demo</title>
    <style type="text/css">
    .document {
        display : none;
    }
    </style>
    </head>
    <body>
    <form id="car" action="html_form_action.asp" method="post" 
          enctype="multipart/form-data" >
    Submissions:<br>
    Number of Files to Attach: 
    <select name="numberoffiles">
        <option>0</option>
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
    </select> 
    <div id="doc1" class="document" style="display: block;">
    <hr/>
    Document 1:<br>
    <table>
    <tr>
        <td>Name:</td>
        <td><input type="text" size="60" name="doc1_name"></td>
        <td><input type="file" name="doc1_file" size="72" allow="text"></td>
    </tr>
    <tr>
        <td>Number:</td>
        <td><input type="text" name="doc1_number"> 
            Rev.: <input type="text" size="2" maxlength="2" name="doc1_rev"> 
            Type:  <select name="doc1_type">
                 <option value="Letter">Letter</option>
                 <option value="Manual">Manual</option>
                 <option value="Plans">Plans</option>
                 </select>
        </td>
        <td>Branch: 
            <select name="ddl1">
                <option value="">--choose--</option>
                <option value="E2">Electrical</option>
                <option value="H1">Hull & Stability</option>
                <option value="E1">Machinery & Piping</option>
            </select>
            System: 
            <select name="doc1_sys"><option value="">--choose--</option></select>
        </td>
    </tr>
    </table>
    <br/>
    </div>
    <div id="doc2" class="document">
    <hr/>
    Document 2:<br>
    <table>
    <tr>
        <td>Name:</td>
        <td><input type="text" size="60" name="doc2_name"></td>
        <td><input type="file" name="doc2_file" size="72" allow="text"></td>
    </tr>
    <tr>
        <td>Number:</td>
        <td><input type="text" name="doc2_number"> 
            Rev.: <input type="text" size="2" maxlength="2" name="doc2_rev"> 
            Type:  <select name="doc2_type">
                 <option value="Letter">Letter</option>
                 <option value="Manual">Manual</option>
                 <option value="Plans">Plans</option>
                 </select>
        </td>
        <td>Branch: 
            <select name="ddl2">
                <option value="">--choose--</option>
                <option value="E2">Electrical</option>
                <option value="H1">Hull & Stability</option>
                <option value="E1">Machinery & Piping</option>
            </select>
            System: 
            <select name="doc2_sys"><option value="">--choose--</option></select>
        </td>
    </tr>
    </table>
    <br/>
    </div>
    <div id="doc3" class="document">
    <hr/>
    Document 3:<br>
    <table>
    <tr>
        <td>Name:</td>
        <td><input type="text" size="60" name="doc3_name"></td>
        <td><input type="file" name="doc3_file" size="72" allow="text"></td>
    </tr>
    <tr>
        <td>Number:</td>
        <td><input type="text" name="doc3_number"> 
            Rev.: <input type="text" size="2" maxlength="2" name="doc3_rev"> 
            Type:  <select name="doc3_type">
                 <option value="Letter">Letter</option>
                 <option value="Manual">Manual</option>
                 <option value="Plans">Plans</option>
                 </select>
        </td>
        <td>Branch: 
            <select name="ddl3">
                <option value="">--choose--</option>
                <option value="E2">Electrical</option>
                <option value="H1">Hull & Stability</option>
                <option value="E1">Machinery & Piping</option>
            </select>
            System: 
            <select name="doc3_sys"><option value="">--choose--</option></select>
        </td>
    </tr>
    </table>
    <br/>
    </div>
    <br/>
    <hr/>
    <br/>
    <input type="reset" value="Clear" />
    <input type="submit" value="Submit" />
    </form>
    
    <script type="text/javascript">
    var dropLists = {
        "E1" : ['Bilge & Ballast (BL)','Boiler (B)','Vents & Sounds (V)','Other (GENR)'],
        "E2" : ['One Line Diagram (ONE)', 'Sound Powered Phone (SPP)', 'Other (GENR)'],
        "H1" : ['Damage Stability (DAM)', 'Intact Stability (INT)', 'Lightship (LTSH)', 'Other (GENR)']
    };
    
    var form = document.getElementById("car");
    var docnum;
    
    for ( docnum = 1; docnum <= 3; ++docnum )
    {
        form["ddl" + docnum].onchange = configureDropDown;
    }
    
    form.numberoffiles.onchange = function( )
    {
        for ( docnum = 1; docnum <= 3; ++docnum )
        {
            document.getElementById("doc"+docnum).style.display =
                this.selectedIndex >= docnum ? "block" : "none";
        }
    }
    
    function configureDropDown( )
    {
        var dnum = this.name.substring(3); // isolate the number from "ddl"
        var sel = form["doc"+dnum+"_sys"];
        sel.options.length = 1; // clear out anything existing
        var dropList = dropLists[ this.value ];
        for ( var op = 0; op < dropList.length; ++op )
        {
            var val = dropList[op];
            sel.options[op+1] = new Option( val, val );
        }
    }
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 03-30-2013 at 03:58 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post
    You must use method="post".
    And you must also have enctype="multipart/form-data" in your form's attributes to upload files. Without it, your files won't be uploaded.

    Also, if using a 3rd party ISP to host your website then your isp account needs to have file uploads enabled.

  • #11
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post
    ??? How hard can that be?
    .
    The point I am making is that it's 6 of one and a half dozen of the other. Creating rows dynamically is easy as well.

    If I was building a form that allowed a user to upload say 10, 20, 50, 100 or whatever number of images, I don't want to see a bunch of unused html in my web page code.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quote Originally Posted by knightCoder View Post
    And you must also have enctype="multipart/form-data" in your form's attributes to upload files. Without it, your files won't be uploaded.

    Also, if using a 3rd party ISP to host your website then your isp account needs to have file uploads enabled.
    I did notice the enctype, as you can see.

    But if indeed he uses an ASP page as the target of the <form>, then I don't know of any host that doesn't support uploading files to ASP. Even the cheapest $3 a month plans for ASP support that. Some of them don't support a file upload *component* (DLL), but with ASP you actually can upload files with code written entirely in the scripting language (VBScript).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quote Originally Posted by knightCoder View Post
    The point I am making is that it's 6 of one and a half dozen of the other. Creating rows dynamically is easy as well.

    If I was building a form that allowed a user to upload say 10, 20, 50, 100 or whatever number of images, I don't want to see a bunch of unused html in my web page code.
    Matter of perspective. But also of the number of files to be uploaded.

    However, if you were really going to allow more than, say, 10 files to be uploaded, then it's time to look into full directory uploading, using a browser plug-in, probably.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    and a downside to creating extra html elements which might not be used is that if you want to change say an option value then you have to go make that change in every single block of similar html code which would be a real pita if you have a large number as exampled by my hypothetical form to upload 10, 20 100 or whatever number of images.

    If you create the rows dynamically you'll most probably have to make a change in only 1 line of js code which would then be reflected in all the rows the code ends up creating.

    [ot]

    damn , still waiting on that Edit button to magically appear

    [/ot]

  • #15
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post

    However, if you were really going to allow more than, say, 10 files to be uploaded, then it's time to look into full directory uploading, using a browser plug-in, probably.
    Maybe, maybe not. Depends on the application type and use cases etc etc and is a whole different kettle of fish to the max. of 10 files the op originally specified.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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