Simple text field

[atsidi]

I want to call a javascript if User clicks on a button and the text field is empty.
here is the button and the text field:
<cfinput type="file" name="custCartFile">
<cfinput type="submit" name="submit" value="Add Image">
Thanks,
Trint

[Dan_Bracuk]

required="yes" is easier

[atsidi]

I tried that and got "error in submit text"
Can you give me the exact context?
Thanks

[Guest]

> here is the button and the text field:

You don't have a text field. You have a type="file" and a type="submit".

[Dan_Bracuk]

My mistake. You have to check it on your action page.

form page
<form action="actionpage.cfm" enctype="multipart/form-data" method="post">
<input type="file" name="inputFile" size="45">

action page
<cfif len(InputFile) is 0>
no file, write code to handle it
</cfif>

[atsidi]

How do I present the "custCartFile" and "custCartThumb" which are the input file entry boxes?
Ok, do I put it like this?
<cfinput type="submit" name="submit" value="Add Image">
<cfif len(custCartFile) is 0>
noImage(); <<<this is a java function. displays message to add imagefile
</cfif>
<cfif len(custCartThumb) is 0>
noThumbnail(); <<<this is a java function. displays message to add thumbfile
</cfif>

[atsidi]

All I want is for a message box to pop up and remind if no imagefile or thumbnailfile were selected.
Thanks,
Trint

[Kronin555]

Coldfusion runs on the server. Javascript runs on the browser. If you want a popup warning _before_ they submit it, it needs to be written in javascript (both the testing and the popup). If you want them to submit it, then get back a popup, you can do the testing in coldfusion and write the popup in javascript.

[atsidi]

Ok, but I'm new to Coldfusion and don't know the syntax for doing the cfif correctly. I get an error message "custCartFile" not defined when I do this:
cfinput type="submit" name="submit" value="Add Image">
<cfif len(custCartFile) is 0>
noImage(); <<<this is a java function. displays message to add imagefile
</cfif
How can I use that test correctly (syntax) so that I don't get an error message?
Thanks,
Trint

[Kronin555]

Until the form is submitted, custCartFile isn't defined.

Also, noImage() is a Javascript function, not a java function.

So, you can do:
<cfif isDefined("FORM.custCartFile") and len(custCartFile) is 0>

[MrBonk · Accepted solution]

The easiest way is to return the javascript function from the onSubmit event of your form. onSubmit = "return your_function()". That way, when your user clicks your submit button, your script can check whatever you want to check *before* the form is actually submitted.

Like this:

<script type="text/javascript" language="javascript">
function check_file_field()
{
var file_field = document.getElementById("flFileField");
if(file_field.value.length == 0)
{
alert("Select a file first!");
return false;
}
else
{
return true;
}
}
</script>

<cfform action="#cgi.script_name#" method="post" name="frmTest" preloader="no" onsubmit="return check_file_field()">
<cfinput type="file" id="flFileField" name="flFileField">
<cfinput type="submit" name="btnSubmit" value="Go">
</cfform>

[atsidi]

MrBonk,
Since this <cfinput type="file" is already within a <cfform action, I used "onClick="return check_file_field()" at the end of this:
<cfinput type="submit" name="submit" value="Add Image" onClick="return check_file_field()">
and gives me the message "Select a file first!" whether I select a file or not!
Please help.
Thanks,
Trint

[Kronin555]

Did you happen to change the name of the file field that is being checked in the check_file_field() function?

[atsidi]

Yes, it looks like this now:

function check_file_field()
{
var file_field = document.getElementById("custCartFile");
if(file_field.value.length == 0)
{
alert("You are required to select an Image");
return false;
}
else
{
return true;
}
}

<cfinput type="file" name="custCartFile">

<cfinput type="submit" name="submit" value="Add Image" onClick="return check_file_field()">

Thanks,
Trint

[Kronin555]

You need to give the custCartFile input field an id of custCartFile in order for that javascript code to work.

<cfinput type="file" name="custCartFile" id="custCartFile">

it's the id value that the javascript function "document.getElementById()" is checking for.