Display submit button only after upload image is selected
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.
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<!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>https://www.experts-exchange.com/questions/26817901/Display-submit-button-only-after-upload-image-is-selected.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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>https://www.experts-exchange.com/questions/26817901/Display-submit-button-only-after-upload-image-is-selected.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>
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
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
No, it allows you to browse for a file but the upload only takes place after the submit appears and is clicked.
Yes but the asker does not want the button if the file field is empty.
ASKER
That did it. Many thanks!