Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Display submit button only after upload image is selected

Posted on 2011-02-12
6
Medium Priority
?
478 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 34881542
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
ID: 34881570
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
ID: 34881574
<!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
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!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34881580
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
ID: 34882353

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
ID: 34882383
Yes but the asker does not want the button if the file field is empty.
0

Featured Post

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

609 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