I recently ran into a small issue with a file uploader form I was coding. What I wanted to do was basically to stop the JavaScript onclick event from completing should a certain required action not be completed.
To paint out my scenario for you, I have coded an image uploader web application that I want to require the user to input a description of the image before they are allowed to select the image for upload. That being said, there are two different simple ways to do this. The first, disable the "Browse" button until the user has entered a description. The second, if the description is not entered, notify the user onclick of the "Browse" button. For my situation, the latter was what I went for (I'll write another post on the first option if anyone is interested in it...let me know in the comments section).
Let's get some initial front-end code here...
<!-- Text box that can't be empty -->
<input type="text" id="text" />Some Text
<br />
<!-- The file box to be validated -->
<input type="file" id="filebox" onclick="return validateText('text')"/>
<br />
Here's the simple "back-end" JavaScript function...
<script>
function validateText( ObjectName )
{
// If there is nothing in the textbox...
if (document.getElementById(ObjectName).value == '')
{
alert('Please enter a value for Some Text before trying to select a file.')
return false;
}
// If textbox contains text...
else
{
alert('The text in Some Text is \"' + document.getElementById(ObjectName).value + '\". You may now select a file.');
return true;
}
}
</script>
Hopefully the HTML code is relatively self explanatory.
Note that the file input has it's onclick attribute set to call the validateText function (passing in the id of the "Some Text" textbox as the parameter).
The javascript code is where the fun happens. There I created a function with the name validateText, requiring one parameter. The basic breakdown of the order of operations for that function is
- Event triggered
- Function called
- Document element is retrieved by the parameter passed in (in the sample code this would be 'text')
- Value is checked
- if value is equal to ' ' (empty)
- -> Alert the user saying the value is empty
- -> Cancel onclick operation by not showing the file browser window)
- else (value is not empty)
- -> Alert the user saying what the value is set to
- -> Continue onclick event by showing file browser window
What the previously shown code does is it "interrupts" the onclick event to perform a check of the value of the specified textbox. In this case, if the textbox is empty, the onclick event stops before the file explorer dialog displays.
What makes this work is in the return values. When the method is called in the html, return is specified before the function call
<input type="file" id="filebox" onclick="return validateText('text')"/>
Typically in JavaScript, a return is not specified with function calls unless you want to be able to control the event (typically for code stability such as catching exceptions and stopping the code before it does harm) during the event.
Short and succinct, if your function returns true, the event (onclick, onsubmit, onchange, etc.) will continue as originally designed. If your function returns false, the event will be stopped before completion.
That being said, don't forget to add the return actions to your function as well, otherwise it won't work.
That about sums it up for this post. I unfortunately have no funny remarks to make other than a few buzzwords to let loose...
This seamless deployment of this bit of code is mission critical. Also, don't forget our meeting later so we can touch base to discuss a synergistic team-oriented coding approach to our new workflow paradigms.
Anyone have five in a row yet?
Timex
