www.webdeveloper.com
Results 1 to 6 of 6

Thread: The file input goes blank when trying to submit form

Threaded View

  1. #1
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582

    The file input goes blank when trying to submit form

    Hello, everyone.

    I have one document that resides in an iFrame, and it contains anywhere from 1 to 4 forms, depending. There is a dynamic content area that will display between zero and three forms, each named uniquely, associated with files that exist in a database. Regardless of the number of forms associated with a file, at the bottom of the document is one last form named NewDoc - this last form is used for uploading a new file into the database, or replacing a file.

    With one exception, this is working flawlessly.

    The user is supposed to choose a file for upload, use a SELECT input to say what document type it is, then click on the submit button.

    What is actually happening, however, has me confuzzed. When the submit button is clicked the first time, the value of the input="file" element becomes blank and nothing happens. If a file is chosen, again, and the submit button clicked, it uploads with no problem and the database does what it's supposed to. But if I refresh the document and try, again, same thing - the file disappears from the form element and the form does not submit.

    First, the forms (all three, just in case):
    Code:
    <form name="updateDocs_1" id="updateDocs_1" method="post" style="margin:0px; padding:0px; border:0px;"
        action="supplier_docs.cfm?vid=122" enctype="multipart/form-data">
        <tr>
            <td class="field field-bottom odd-row" style="width:16px; min-width:16px; max-width:16px;"><img src="images/Excel.gif" height="16" width="16" /></td>
            <td class="field field-bottom odd-row" style="width:209px; min-width:209px; max-width:209px;"><a href="supplier_docs_open.cfm?fid=49" style="color:blue;">ThisFile.xls</a></td>
            <td class="field field-bottom odd-row" style="width:110px; min-width:110px; max-width:110px;"><select name="docType" id="docType" onChange="this.form.submit();"><option value="1">Executive Summary</option><option value="2" SELECTED>Supplier Proposals</option><option value="3">Supplier Information</option><option value="4">Financial Information</option></select></td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 08,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 21,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><input type="checkbox" name="replaceFile" id="replaceFile" value="49" onClick="if(this.checked){setReplaceFileID(this.form.name,this.value);}" /></td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><a href="details_supplier_docs_email.cfm?fid=49" onClick="parent.openNew(this.href,'new1'); return false;" style="color:blue;">Attach</a></td>
            <td class="field field-bottom field-end odd-row"><input type="checkbox" name="deleteRecord" id="deleteRecord" value="49" onClick="return RUSureFileDelete(this.form.name,'Accenture.xls');" /></td>
        </tr><input type="hidden" name="fileId" id="fileId" value="49" />
    </form>
    
    <form name="updateDocs_2" id="updateDocs_2" method="post" style="margin:0px; padding:0px; border:0px;"
        action="supplier_docs.cfm?vid=122" enctype="multipart/form-data">
        <tr>
            <td class="field field-bottom even-row" style="width:16px; min-width:16px; max-width:16px;"><img src="images/pdf.gif" height="16" width="16" /></td>
            <td class="field field-bottom even-row" style="width:209px; min-width:209px; max-width:209px;"><a href="supplier_docs_open.cfm?fid=46" style="color:blue;">ThatFile.pdf</a></td>
            <td class="field field-bottom even-row" style="width:110px; min-width:110px; max-width:110px;"><select name="docType" id="docType" onChange="this.form.submit();"><option value="1">Executive Summary</option><option value="2">Supplier Proposals</option><option value="3">Supplier Information</option><option value="4" SELECTED>Financial Information</option></select></td>
            <td class="field field-bottom even-row" style="width:105px; min-width:105px; max-width:105px;">Dec 01,2010</td>
            <td class="field field-bottom even-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom even-row" style="width:105px; min-width:105px; max-width:105px;">Dec 08,2010</td>
            <td class="field field-bottom even-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom even-row" style="width:65px; min-width:65px; max-width:65px;"><input type="checkbox" name="replaceFile" id="replaceFile" value="46" onClick="if(this.checked){setReplaceFileID(this.form.name,this.value);}" /></td>
            <td class="field field-bottom even-row" style="width:65px; min-width:65px; max-width:65px;"><a href="details_supplier_docs_email.cfm?fid=46" onClick="parent.openNew(this.href,'new2'); return false;" style="color:blue;">Attach</a></td>
            <td class="field field-bottom field-end even-row"><input type="checkbox" name="deleteRecord" id="deleteRecord" value="46" onClick="return RUSureFileDelete(this.form.name,'Accenture_Email_Policies.pdf');" /></td>
        </tr><input type="hidden" name="fileId" id="fileId" value="46" />
    </form>
    
    <form name="updateDocs_3" id="updateDocs_3" method="post" style="margin:0px; padding:0px; border:0px;"
        action="supplier_docs.cfm?vid=122" enctype="multipart/form-data">
        <tr>
            <td class="field field-bottom odd-row" style="width:16px; min-width:16px; max-width:16px;"><img src="images/PowerPoint.gif" height="16" width="16" /></td>
            <td class="field field-bottom odd-row" style="width:209px; min-width:209px; max-width:209px;"><a href="supplier_docs_open.cfm?fid=48" style="color:blue;">SomePowerPoint.pptx</a></td>
            <td class="field field-bottom odd-row" style="width:110px; min-width:110px; max-width:110px;"><select name="docType" id="docType" onChange="this.form.submit();"><option value="1">Executive Summary</option><option value="2">Supplier Proposals</option><option value="3" SELECTED>Supplier Information</option><option value="4">Financial Information</option></select></td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 01,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:105px; min-width:105px; max-width:105px;">Dec 08,2010</td>
            <td class="field field-bottom odd-row" style="width:70px; min-width:70px; max-width:70px;">User</td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><input type="checkbox" name="replaceFile" id="replaceFile" value="48" onClick="if(this.checked){setReplaceFileID(this.form.name,this.value);}" /></td>
            <td class="field field-bottom odd-row" style="width:65px; min-width:65px; max-width:65px;"><a href="details_supplier_docs_email.cfm?fid=48" onClick="parent.openNew(this.href,'new3'); return false;" style="color:blue;">Attach</a></td>
            <td class="field field-bottom field-end odd-row"><input type="checkbox" name="deleteRecord" id="deleteRecord" value="48" onClick="return RUSureFileDelete(this.form.name,'Accenture Mockups.pptx');" /></td>
        </tr><input type="hidden" name="fileId" id="fileId" value="48" />
    </form>
    Now, JavaScript currently in place:
    Code:
    function setReplaceFileID(fn,v) {
        //function to set fileId value to upload document form for replacement of file data
        var df = document[fn];
        var fArray = document.getElementsByTagName("form"); // get all form names to loop through
        var fAlen = fArray.length;
        for(var i=0;i<fAlen;i++) {
            var thisName = fArray[i].name;
            if(thisName.indexOf("updateDocs") > -1) { // if it's one of the update forms
                if(thisName == df.name) {
                    if(document[thisName].replaceFile.checked == true) {
                        document.NewDoc.replaceFile.value = v;
                        document.NewDoc.documentToStore.click();  //This only works in IE browsers
                        document.NewDoc.docType.focus();
                        }
                    else {
                        document.NewDoc.replaceFile.value = "";
                        }
                    }
                else {
                    document[thisName].replaceFile.checked = false;
                    }
                }
            }
        }
    
    function allRequired() {
        var df = document.NewDoc;
        if(df.documentToStore.value.length > 0) {
            var ft = df.documentToStore.value;
            var ftArray = ft.split(".");
            var ftALen = ftArray.length;
            ft = ftArray[ftALen-1];
            switch(ft) {
                case "doc":
                case "docx":
                case "xls":
                case "xlsx":
                case "ppt":
                case "pptx":
                case "pdf":
                    // Do nothing - it's a valid file type
                break;
                default:
                    alert("Selected file is not a valid file type\n  (Word, Excel, PowerPoint, PDF)");
                    df.submitBtn.disabled = "disabled";
                break;
                }
            }
        if((df.documentToStore.value != "") && (df.docType.selectedIndex != 0)) {
            df.submitBtn.disabled = false;
            }
        else {
            df.submitBtn.disabled = "disabled";
            }
        }
    Any ideas on what could be causing the file field to go blank when the submit button is clicked for the first time? Why it works okay on subsequent clicks if the form is not refreshed or reloaded?

    Thanks,

    ^_^
    Last edited by WolfShade; 12-21-2010 at 03:05 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles