SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove unused File Upload Javascript

    Hi everybody,

    I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT?

    Please advise.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
            <script language="javascript" type="text/javascript">
            var fileCount = 1;
            function addOneFile()
            {
                ++fileCount;
                var div = document.getElementById("showFile"+fileCount);
                if ( div != null ) div.style.display = "block";
            }
            </script>
           <style type ="text/css">
           .style37
            {
    	        color: Black;
    	        margin-left: 99px;
            }
           </style>
        </head>
    <body>
                        <table cellpadding="5">
                            <tr>
                                <td style="vertical-align: top">
                                    Attachment:
                                </td>
                                <td>
                                    <input type="file" name="attachment" id="attachment" style="width:230px" />
                                    <div id="showFile2" style="display: none;">
                                        <input name="file2" type="file" />
                                    </div>
                                    <div id="showFile3" style="display: none;">
                                        <input name="file3" type="file" />
                                    </div>
                                    <div id="showFile4" style="display: none;">
                                        <input name="file4" type="file" />
                                    </div>
                                    <div id="showFile5" style="display: none;">
                                        <input name="file5" type="file" />
                                    </div>
                                    <br />
                                    <a href="javascript:addOneFile();" class="style37">Attach another File</a>
                                    <br />
                                                                  
                                    (Restricted to 5 uploads)
                                </td>
                            </tr>
                        </table>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Place the close link/image/button with a class of "closefile" on each of them.

    Then load the script from just before the </body> tag.

    Code javascript:
    <body>
    ...
    <script type="text/javascript" src="js/script.js"></script>
    </body>

    The script itself gets those elements with the class name of "closefile" using the getElementsByClassName method, and attaches a close event on to them. This works on all modern web browsers.

    To support other web browsers, such as Internet Explorer, you will want to help them know how to getElementsByClassName

    Code javascript:
    if (!document.getElementsByClassName) {
        document.getElementsByClassName = function (className) {
            getElementsByClassName(this, className);
        };
    }
    function getElementsByClassName(el, className) {
        // your favourite getElementsByClassName here
    }

    There are many different types of getElementsByClassName functions available for when less modern web browsers don't know how to do it, so a quick google search will give you a wide range of them to pick and choose from.

    Getting back to the task at hand, we'll get the page elements with a class name of "closefile" and attach an onclick event to them.

    Code javascript:
    var closefiles = document.getElementsByClassName('closefile'),
        i;
    for (i = 0; i < closefiles.length; i += 1) {
        closefiles[i].onclick = closefile;
    }

    The closefile function will walk up the DOM tree looking for the DIV element that you have it contained in. When it finds it, that div is removed.

    As a "just in case" safety measure, the code will stop looking if it manages to get up to the BODY element.

    Code javascript:
    function closefile() {
        var el = this;
        while (el.nodeName !== 'DIV' && el.nodeName !== 'BODY') {
            el = el.parentNode;
        }
        if (el.nodeName === 'BODY') {
            return;
        }
        el.parentNode.removeChild(el);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •