[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 326
  • Last Modified:

Refresh page when user clicks submit button (but theres a catch to this!)

hey guys and gals

I have a picture upload form page (done in coldfusion but I need JS help). As you will notice, upon clicking "Add Picture", it checks to see if the there is a picture file to upload. If not, it simply shoots an alert box telling the user to add a picture.

Another thing you will notice is that onClick of the submit button, the text on the button changes to "Please Wait".

That works fine.

Here is the issue: If a user clicks on the "Add Picture" button without adding a picture to upload, I recieve the alert box. When I close the alert box the text on the submit button says "Please Wait". I need this button to return to its original state of saying "Add Picture" when the user clicks ok on the alert box. Can anyone help me out?

My code is below.

Thanks

IShiva



<script language="JavaScript">
function validate_form ( )
{
      valid = true;
      if ( document.upload_form.ul_path.value == "" )
      {
            alert ( "Please add a picture to upload." );
            valid = false;
      }
      return valid;
}
</script>

<cfform action="imUploadPictureForm.cfm?GameID=#ScheduleView.GameID#" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form" onSubmit="return validate_form ( );">
<table>
<tr>
<td><input type="file" name="ul_path" id="ul_path" size="50"></td>
<td><input type="submit" name="upload_now" value="Add Picture" onClick="this.value='Please Wait'"></td>
</tr>
</cfform>
</table>
0
IShiva
Asked:
IShiva
  • 5
  • 4
1 Solution
 
smaccariCommented:
What about this?

<script language="JavaScript">
function validate_form ( )
{
     if ( document.upload_form.ul_path.value == "" )
     {
          alert ( "Please add a picture to upload." );
          return false;
     }
     document.forms[0].elements["upload_now"].value = "Please wait";
     return true;
}
</script>

<cfform action="imUploadPictureForm.cfm?GameID=#ScheduleView.GameID#" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form" onSubmit="return validate_form ( );">
<table>
<tr>
<td><input type="file" name="ul_path" id="ul_path" size="50"></td>
<td><input type="submit" name="upload_now" value="Add Picture"></td>
</tr>
</cfform>
</table>
0
 
IShivaAuthor Commented:
Worked perfectly!!!

Thanks!

One quick thing....I have seen submit buttons that are disabled upon clicking them so there arent multiple submissions. Is this possible with the JS I currently have? It would be nice to have the button disabled to prevent multiples.

Can this be done?
0
 
smaccariCommented:
Sure just modify your function into this:

function validate_form ( )
{
     if ( document.upload_form.ul_path.value == "" )
     {
          alert ( "Please add a picture to upload." );
          return false;
     }
     document.forms[0].elements["upload_now"].value = "Please wait";
     document.forms[0].elements["upload_now"].disabled = true;
     return true;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
IShivaAuthor Commented:
Well, it worked....kinda. (The issue lies in my code Im sure)

I have 1 page where a user can upload pictures for certain events. The upload picture page automatically inserts image info into my database as well as resizes and upload into a picture directory.

Upon successful upload, the page reloads and below the upload picture form, is a thumbnail of the images that have been uploaded as well as date of upload etc. Just general info.

When I use your updated JS, the page works fine but doesnt write to my DB or upload the picure. Basically, it just reloads and no info is passed. If I use your first example, everything works fine and info is written to the DB and the picure is uploaded correctly.

Does this sound right?

I know Im off my original question a bit, but can I post my pictureuploadform.cfm page for you to look at? Maybe you can spot where the issue lies.

Know that you got the points for your first answer as it worked great. I just thought it would be nice to disable the button since users are always so quick to click and click.

Thank you for time!!!
0
 
smaccariCommented:
One possible issue would be because you check the value of upload_now parameter to verify if you have to post your data in your db.
As the button is disabled, it will not pass its value in the posted data.
But post your code if you want, i'll take a look (even if i do not know well CF code, but that should be "understandable").
0
 
IShivaAuthor Commented:
I think I understand.... :)

Here is my code from the image upload form page. it is called imUploadPictureForm.cfm

Thanks!



<cfquery name="ScheduleView" datasource="newshs">
SELECT *
FROM #SESSION.Auth.tblSchedule#
WHERE GameID=#GameID#
</cfquery>


<tr>
<cfinclude template="NavBar.cfm">
<td width="630" valign="top" bgcolor="#ffffff">
<table width="630" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#fff8dc"><img src="images/corner.gif">You are adding <strong><cfoutput>#ScheduleView.VS#</cfoutput></strong> pictures for <cfoutput>#Session.Auth.Gender#</cfoutput> | <a href="imViewPictureList.cfm">Add Pictures Home</a></td>
</tr>
<tr>
<td height="5" bgcolor="#fff8dc"></td>
</tr>
<td class="frame">
<table cellpadding="3" cellspacing="3">
<tr>
<td><strong>UPLOAD YOUR PICTURES BELOW<br><br>
You are currently uploading <cfoutput><font color="##FF0000">#ScheduleView.VS#</font></cfoutput> pictures.</strong> <a href="imViewPictureList.cfm">To upload pictures for other events click here.</a></strong></td>
</tr>
<tr>
<td>To upload a picture, click the browse button below and choose a file from your computer.<br>
The file MUST be a JPG or GIF. You DO NOT need to resize your images.</td>
</tr>
<cflock scope="Session" timeout="30" type="exclusive">
<tr>
<td>
<cfif isdefined("form.upload_now")>
<cffile action="upload" filefield="ul_path" destination= "E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures" accept="image/jpeg, image/gif, image/pjpeg" nameconflict="makeunique">
<cfx_resize
original_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures\#file.ServerFile#"
modified_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\thumbnails\tn_#file.ServerFile#"
width="100"
height="-1">

<cfx_resize
original_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures\#file.ServerFile#"
modified_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures\#file.ServerFile#"
width="500"
height="-1">

<cfset UploadedFile = "#file.serverfile#">                                                
<cfset TodaysDate = Now()>
<font color="#FF0000">The file <cfoutput>#UploadedFile# </cfoutput>was successfully uploaded!</font>

<cfquery datasource="newshs">
INSERT INTO #Session.Auth.tblPictures# (GameID, GameDate, VS, Gender,
PictureFile, ThumbnailFile, DateUploaded) VALUES ('#ScheduleView.GameID#', '#ScheduleView.GameDate#',
'#ScheduleView.VS#', '#ScheduleView.Gender#', '#UploadedFile#', 'tn_#UploadedFile#', #TodaysDate#)
</cfquery>
</cfif>
</td>
</tr>
</cflock>
</table>
<script language="JavaScript">
function validate_form ( )
{
if ( document.upload_form.ul_path.value == "" )
{
alert ( "Please add a picture to upload." );
return false;
}
document.forms[0].elements["upload_now"].value = "Please wait";
document.forms[0].elements["upload_now"].disabled = true;
return true;
}
</script>

<cfform action="imUploadPictureForm.cfm?GameID=#ScheduleView.GameID#" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form" onSubmit="return validate_form ( );">
<table>
<tr>
<td><input type="file" name="ul_path" id="ul_path" size="50"></td>
<td><input type="submit" name="upload_now" value="Add Picture"></td>
</tr>
</cfform>
</table>

<CFPARAM name="start" default="1">
<!--- Number of records to display on a page --->
<CFPARAM name="disp" default="12">

<cfquery name="ListPictures" datasource="newshs">
SELECT *
FROM #Session.Auth.tblPictures#
WHERE GameID = '#URL.GameID#'
ORDER BY PictureID DESC
</cfquery>

<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="3" cellspacing="0" width="100%">
<tr bgcolor="#d5d6c6">
<td class="text6"><strong>Thumbnail</strong></td>
<td class="text6"><strong>Game</strong></td>
<td class="text6"><strong>Date</strong></td>
<td class="text6"><strong>Picture Name</strong></td>
<td class="text6"><strong>Date Added</strong></td>
<td class="text6"><strong>Action</strong></td>
</tr>
<CFSET end=Start + disp>
<CFIF start + disp GREATER THAN ListPictures.RecordCount>
<CFSET end=999>
<CFELSE>
<CFSET end=disp>
</CFIF>
<cfoutput query="ListPictures" startrow="#start#" maxrows="#end#">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('f1f2ed'))#">
<td class="framebottom"><a href="http://mysite/#Session.Auth.hsSport#/pictures/#ListPictures.PictureFile#" target="_blank"><img src="http://mysite/#Session.Auth.hsSport#/thumbnails/#ListPictures.ThumbnailFile#" border="0"></a></td>
<td class="framebottom">#ListPictures.VS#</td>
<td class="framebottom">#DateFormat(ListPictures.GameDate, "m/d/yy")#</td>
<td class="framebottom">#ListPictures.PictureFile#</td>
<td class="framebottom">#DateFormat(ListPictures.DateUploaded, "m/d/yy")#</td>
<td class="framebottom"><a href="imDeletePicture.cfm?GameID=#ListPictures.GameID#&File=#ListPictures.PictureFile#">Delete</a></td>
</tr>
</cfoutput>
<tr>
<td colspan="6">
<cfoutput>
<CFIF start NOT EQUAL 1>
<CFIF start GTE disp>
<CFSET prev=disp>
<CFSET prevrec=start - disp>
<CFELSE>
<CFSET prev=start - 1>
<CFSET prevrec=1>
</CFIF>
<a href="imUploadPictureForm.cfm?GameID=#ScheduleView.GameID#&start=#prevrec#">Last #prev#</a>&nbsp;&nbsp;
</CFIF>
<CFIF end LT ListPictures.RecordCount>
<CFIF start + disp * 2 GTE ListPictures.RecordCount>
<CFSET next=ListPictures.RecordCount - start - disp + 1>
<CFELSE>
<CFSET next=disp>
</CFIF>
<a href="imUploadPictureForm.cfm?GameID=#ScheduleView.GameID#&start=#Evaluate("start + disp")#">Next #next#</a>
</cfif>
</cfoutput>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="5" cellspacing="0">
<tr>
<td height="15"></td>
</tr>
<tr>
<td><font color="#FF0000"><strong>Please Read:</strong></font> When you upload your event pictures, they will AUTOMATICALLY be resized. There is no need to resize the pictures yourself prior to upload.</td>
</tr>
<tr>
<td>Our system only supports .jpg, .jpeg and .gif file formats. Other file formats will be denied.</td>
</tr>
<tr>
<td>If you need some help, feel free to <a href="contact.cfm">contact us</a>.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
0
 
smaccariCommented:
This portion of code (upload+insert in db) is done only if the upload_now is defined (i suppose that means exists) with the statement: <cfif isdefined("form.upload_now")>.
As i said, as the button is disabled, there will be no parameter with this name when catching the post server side. So this test will return false and your actions won't be done as expected.
Maybe you could try by testing ul_path instead of upload_now.
Try this:

<cfif isdefined("form.ul_path")>
<cffile action="upload" filefield="ul_path" destination= "E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures" accept="image/jpeg, image/gif, image/pjpeg" nameconflict="makeunique">
<cfx_resize
original_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures\#file.ServerFile#"
modified_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\thumbnails\tn_#file.ServerFile#"
width="100"
height="-1">

<cfx_resize
original_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures\#file.ServerFile#"
modified_file="E:\Inetpub\WWWRoot\Hosted\mysite\#Session.Auth.hsSport#\pictures\#file.ServerFile#"
width="500"
height="-1">

<cfset UploadedFile = "#file.serverfile#">                                        
<cfset TodaysDate = Now()>
<font color="#FF0000">The file <cfoutput>#UploadedFile# </cfoutput>was successfully uploaded!</font>

<cfquery datasource="newshs">
INSERT INTO #Session.Auth.tblPictures# (GameID, GameDate, VS, Gender,
PictureFile, ThumbnailFile, DateUploaded) VALUES ('#ScheduleView.GameID#', '#ScheduleView.GameDate#',
'#ScheduleView.VS#', '#ScheduleView.Gender#', '#UploadedFile#', 'tn_#UploadedFile#', #TodaysDate#)
</cfquery>
</cfif>
0
 
IShivaAuthor Commented:
haha....absolute genious!!!!

Thank you soooo much!

Feel free to respond to any of my questions!!!! :)

It works perfectly.

IShiva
0
 
smaccariCommented:
You're welcome :)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now