working with 2 submit buttons in a html form

[tburra]

I have 2 submit buttons in a form. I will upload a file and save in a filepath in server when I click on one "upload" button. I want to use this file path in the code when I click on another button called"Process".  When I click the process nothing is happening with dump in below code.Form  submits to itself. Is there any better way to do this. Thanks in advance.

<table width="40%" border="0" style="border: 1px solid black;">

          <form  name="uploadform" action="processfile.cfm" enctype="multipart/form-data"  method="post">

          <tr>

                    <td><input type="file"  name="FileContents" size="25">

                        <input type="button" name="action" id="action" value="Upload">

                    </td>

          </tr>

          <tr>

                    <td align="middle">

                              <input type="button" name="submitaction" id="process" value="Process">

                      </td>

          </tr>

          </form>

    </table>

<cfset variables.filepath ="">

<cfif isdefined("form.action") AND form.action eq "upload">

             <cffile action = "upload"  fileField = "FileContents" destination = "C:\test\" accept = "text/plain" nameConflict="overwrite">

          <cfset variables.filepath= "C:\test\#cffile.serverFile#">

<cfelseif isdefined("form.submitaction") AND form.submitaction eq "process">

          <cfdump var="#variables.filepath#">

</cfif>

[BKBK · Accepted solution]

The elseif excludes the dump. In any case, it is unnecessary. You need not test for both form.submitaction and form.action, as they both either exist or not.

You could just do something like

<cfif isdefined("form.action") AND form.action eq "upload">

             <cffile action = "upload"  fileField = "FileContents" destination = "C:\test\" accept = "text/plain" nameConflict="overwrite">

          <cfset variables.filepath= "C:\test\#cffile.serverFile#">

     <p> variables.filepath: <cfoutput>#variables.filepath#</cfoutput></p>

</cfif>

[Steve Sommers]

It might be because you are using type="button" instead of type="submit". W3C says:

button = Defines a clickable button (mostly used with a JavaScript to activate a script)

submit = Defines a submit button

Because of the "mostly" reference, I don't rely on button=submit.

[BKBK]

Steve Sommers wrote:

It might be because you are using type="button" instead of type="submit". W3C says:

button = Defines a clickable button (mostly used with a JavaScript to activate a script)

submit = Defines a submit button

Because of the "mostly" reference, I don't rely on button=submit.

I assumed there is, for example, Javascript to do the form submission. That is in view of the following:

tburra wrote:

Form submits to itself.

[Carl Von Stetten]

There are a fair amount of CFM pages out there with forms and processing logic on same page (where form submits to itself) but don't use JavaScript.  I've had a few in my apps over the years.

-Carl V.

[BKBK]

Carl Von Stetten wrote:

There are a fair amount of CFM pages out there with forms and processing logic on same page (where form submits to itself) but don't use JavaScript.

I am only guessing that Tburra is using some form-submission handler. However, I agree that <input type="submit"> is the way to go, unless one has a good reason to do otherwise.

[tburra]

I tried both ways with type= button and type= submit. Nothing worked. If I reload the page to test it was dumping the code in cfelseif, without clicking the process button. Initially I tried to disable the process button using javascript with onload. But page was reloading  and I could not enable the process button with the condition of clicking onupload button. Thanks for reply I came to know new thing.

[tburra]

This is true. Thanks  a lot BKBK. My requirement is  not just to upload. I need  to use the filepath from the upload, to process .  I realized two buttons do not solve my requirements  and tried other way which solved my purpose. I think it may servr purpose if second button purpose donot dependent on the first one.

[Carl Von Stetten]

In addition to the input type="button" issue that Steve identified, I think you also might not understand the page request cycle properly.  Assuming both buttons were type="submit", when you click on the id="action" button, the form is submitted as a new request to the server.  The server processes the request and returns the result (which happens to be the same URL page in your case, but not necessarily the same content, as that depends on the logic of your .cfm page).  Then when you click on the id="process" button, an additional request to the server is made, and a new result is returned (again from the same URL page). So while each time the page being returned is the same URL as before, it is NOT the same exact page.

When you click the id="action" button, ColdFusion processes the form submittal based on what you coded in the .cfm page.  It creates the variable variables.filepath as an empty string, then based on the <cfif> block it places the uploaded file in C:\test\ and sets variables.filepath to the full path of the file.  That variable only exists during the page request process - it is not persisted anywhere beyond that.  So when you click on the id="process" button and ColdFusion processes that new form request, once again variables.filepath is created and set to an empty string - and is never repopulated with the original file path (because in that request cycle, it was never generated from the file submission).

-Carl V.

[tburra]

Thanks Carl, That is awsome explanation. It was just empty  string at page reload and when I clicked on process button. When I click upload, it uploaded the file and assigned the filepath to variable. But If I click on the process button it was just empty string again. I tried with Varaiables scope,Session, request scope and hidden field. Nothing worked for me.

[Anit_Kumar]

Hi tburra,

You can try the below code. This dumps the value of the path as well.

<cfif isDefined('Form.tmpfile1')> <cfset root = ExpandPath("/Upload")><!---location where file should be uploaded---> <cfset filename=GetFileFromPath(Form.tmpFile1)> <cfset FileExt=ListLast(filename,".")> <cfset variables.filepath =""> <cfset filename = "BidDocument1." & FileExt>  <cffile action="upload" filefield="BidDoc1" destination="C:\Upload\" nameconflict="overwrite" accept="application/pdf,application/msword,application/vnd.ms-excel,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> <cfset variables.filepath= "C:\test\#cffile.serverFile#"> <cfdump var="#variables.filepath#"> </cfif> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>cffileupload Document</title> <form name="form1" enctype="multipart/form-data" method="post"> <input type="hidden" name="tmpfile1" value="" /> <input  type="file"  name="BidDoc1"  onchange="setFile(this.form);" /> <input type="submit" name="save1" value="Upload" /> </form> <button onclick="location.href='processfile.cfm'">Process</button> </html> 

This should help you.

Regards,

Anit Kumar

[tburra]

Thank you  Anit. This is what I needed  but I used cflocation to process  my code in other coldfusion page. I used session scope to save the  filepath when I click  on  the upload button.  I made sessionfile path to empty in process page. It just worked like that. I renamed the upload button as upload& process. There is no issue if someone click on process button without clicking upload button. I greatly appreciate for the beautiful code.