Solved

Display submit button only after upload image is selected

Posted on 2011-02-12
6
470 Views
Last Modified: 2012-08-13
I want to display the submit button only after user has uploaded image. That way there will be no confusion as to which button is to be selected first and no error.

Do we know when the image is uploaded? I guess this would be afer the OPEN is releaased from the BROWSE button.

Can we trap that action and display the submit button after that happens, and works in IE and FireFox?  JavaScript is okay, but please explain it so I can use it, both script and input.

Or perhaps display the Ppload button onMouseUp. If so, how do I code it to work?

Or perhaps disable the submit button until MouseOut.

Or make the submit button background while and color white until OnMouseOut.

Can ANY of this be done with my basic code and if so, show me exactly.



<!--- A clumsy way to catch the empty FileContents when Upload button pressed before selecting file --->
<cfif IsDefined("FIELDNAMES")>
	<cfif IsDefined("FILECONTENTS")>
        <cfif FILECONTENTS eq "">
        You pressed the Upload button before you selected an image to upload.
        </cfif>
    </cfif>
</cfif>


<!--- Of course, this didn't work --->
<cfset uStatus = "disabled">

<cfoutput>uStatus=#uStatus#</cfoutput>

<form action="upload_image.cfm" method="post" enctype="multipart/form-data">
<input style="font-size:14px" name="FileContents" type="FILE" size="45" onMouseUp="<cfset uStatus = ''>">
<cfoutput>
<input style="font-size:12px" type="submit" value="Upload Image" #uStatus#>
</cfoutput>
</form>

Open in new window

0
Comment
Question by:Qsorb
  • 3
  • 2
6 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
I think you might want to just see if the field contains a filename.

For example

<form onsubmit="var f = this.FileContents.value; if (f.length==0) {alert('You pressed the Upload button before you selected an image to upload'); return false}">
0
 

Author Closing Comment

by:Qsorb
Comment Utility
Wow, so simple yet didn't cross my mind. Or if it had I would have stumbled over it.

That did it. Many thanks!
0
 
LVL 20

Expert Comment

by:Proculopsis
Comment Utility
<!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>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26817901.html</title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">

jQuery( document ).ready( function() {

  $("#upload").toggle();

  $("#file").change( function () {
    $("#upload").toggle();
  });

});

</script>
</head>
<body>

<input id="file" type="file" />
<input id="upload" type="submit" value="Upload">

</body>
</html>
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Yeah, Proculopsis, much simpler ;)

Does it actually look at the content? It seems your code will allow upload as long as the field has been changed, even changed to nothing
0
 
LVL 20

Expert Comment

by:Proculopsis
Comment Utility

No, it allows you to browse for a file but the upload only takes place after the submit appears and is clicked.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Yes but the asker does not want the button if the file field is empty.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now