Conditional Form Submit 1

[chris5g]

Hi, I am a ColdFusion newbie.

I am trying to use CF to process my email form and am having trouble with my error checking. Previously I had written a javascript function to check for required info and then submit the form if all info was present using the form.submit() method. This would then send the send the info to a CGI program.

All this worked perfectly until i changed the action to the CFM file. Now, no matter what, the form is always passed to the CFM file. My function is called and my message to fill in info displays but then continues on to the CFM file.

The form doesn't even have a submit button, just a plain button (type=button) with an onClick event.

Will i just have to rewite everything in CF?

 

[csteinhilber]

Usually you would handle this with an onSubmit event handler for the form. I'm not quite sure why your method doesn't work (seems like it should)... but I know for certain this one does:

<form action=&quot;ok_page.cfm&quot; onSubmit=&quot;javascript:validateForm();&quot;>
<input ...>
    :
<input type=&quot;submit&quot; name=&quot;submit&quot; ...>
</form>

then your validatedForm function would be something like:

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
   function validateForm(){
         :
	if (dontSubmit){
	   return false;
	} else {
	   return true;
	}
   }
</script>

As long as the function returns false back to the onSubmit handler, the form shouldn't submit.

The other thing you can do is have the form submit to itself... and just trap any errors before you process the action. This is what I like to do, since it avoids the use of javascript and redisplays the form if there are errors (with friendly error messages).

Something like:

<CFPARAM name=&quot;FORM.firstField&quot; default=&quot;&quot;>
<CFPARAM name=&quot;FORM.secondField&quot; default=&quot;&quot;>
<CFPARAM name=&quot;FORM.thirdField&quot; default=&quot;&quot;>
<CFPARAM name=&quot;FORM.submit&quot; default=&quot;&quot;>

<CFSET showForm = true>
<CFSET errorMessage = &quot;&quot;>
<CFIF CompareNoCase(FORM.submit,&quot;go!&quot;) EQ 0>
   <CFIF Len(Trim(FORM.firstField)) LTE 0>
   	   <CFSET errorMessage = errorMessage & &quot;You did not fill in the first name field<br />&quot;>
   </CFIF>
   <CFIF Len(Trim(FORM.secondField)) LTE 0>
   	   <CFSET errorMessage = errorMessage & &quot;You did not fill in the last name field<br />&quot;>
   </CFIF>
   <CFIF FindNoCase(&quot;@&quot;,FORM.thirdField) LTE 0>
   	   <CFSET errorMessage = errorMessage & &quot;You did not enter a valid email address<br />&quot;>
   </CFIF>
   <CFIF Len(Trim(errorMessage)) LTE 0>
   	   Thank you for your submission.<br />
	   I will now process your data.
	   <CFSET showForm = false>
   <CFELSE>
   	   <CFSET errorMessage = errorMessage & &quot;Please correct these errors and resubmit the form<br />&quot;>
       <CFSET showForm = true>
   </CFIF>
</CFIF>

<CFIF showForm>
<CFOUTPUT>
#errorMessage#
<FORM action=&quot;#GetFileFromPath(GetBaseTemplatePath())#&quot; method=&quot;post&quot;>
   First name (required): <input type=&quot;text&quot; name=&quot;firstField&quot; value=&quot;#FORM.firstField#&quot;><br />
   Last name (required): <input type=&quot;text&quot; name=&quot;secondField&quot; value=&quot;#FORM.secondField#&quot;><br />
   Email (must contain a '@'): <input type=&quot;text&quot; name=&quot;thirdField&quot; value=&quot;#FORM.thirdField#&quot;><br />
   <input type=&quot;submit&quot; name=&quot;submit&quot; id=&quot;submit&quot; value=&quot;Go!&quot;>
</FORM>
</CFOUTPUT>
</CFIF>

You would replace "I will now process your data" with a CFINCLUDE to include your OK page, or process your data (with INSERTs, etc) directly on this page.





-Carl

 

[chris5g]

Thanks for all the help! I tried the return true/false tip but it still doesn't work. Could it have to do with server setting or something else? Like I said, I'm new to CF. I didn't want to rewite the form but I guess I will. I just hate not knowing why something doesn't work when I know it should.


Form code:

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function checkIt() {

if ((document.theForm.FirstName.value != &quot;&quot;) && (document.theForm.LastName.value != &quot;&quot;))
	{
	  return true;
	}
else 
	{
	  alert(&quot;Please Fill in all blanks&quot;);
	  return false;
	}
}
</script>


<form name=theForm action=emailform.cfm method=post onSubmit=javascript:checkIt();>
<input type=hidden name=subject value=&quot;This is test&quot;>
<input type=hidden name=email value=&quot;you@email.com&quot;>
<input type=hidden name=recipient value=&quot;me@email.com&quot;>
<input type=hidden name=redirect value=&quot;thanks.htm&quot;>


<p>First Name: <input type=text name=FirstName value=&quot;&quot;>
<p>Last Name: <input type=text name=LastName value=&quot;&quot;>

<p><input type=submit>
<p><input type=reset>

</form>

CFM code:

<cfmail to=&quot;#form.recipient#&quot; from=&quot;#form.email#&quot; subject=&quot;#form.subject#&quot; type=&quot;html&quot;>
#form.subject# <br><br>
<cfloop index=&quot;thefield&quot; list=&quot;#form.fieldnames#&quot;>
    <cfset fields=&quot;#thefield# = #evaluate(thefield)#&quot;>
    <CFIF #fields# contains &quot;submit&quot; or #fields# contains &quot;required&quot;
            OR #FIELDS# contains &quot;recipient&quot; or #fields# contains &quot;subject&quot; 
            or #FIELDS# contains &quot;redirect&quot;>

    <cfelse>
        #fields#<br>
    </cfif>
</cfloop>
</cfmail>

<cflocation url=&quot;#form.redirect#&quot; addtoken=&quot;No&quot;>

 

[csteinhilber]

Oops... must've short-circuited there for a minute. Sorry 'bout that.

The proper syntax for the onSubmit event is return[/i] functionname... so your form tag should look like:

<form name=&quot;theForm&quot; action=&quot;emailform.cfm&quot; method=&quot;post&quot; onSubmit=&quot;return checkIt();&quot;>

(don't leave out the quotes in your parameters... they're pretty important... especially when you have parameter values that contain spaces, like in the onSubmit).


Now the form shouldn't submit if your function returns false.


-Carl

 

[chris5g]

Awsome! that did it. I'll have to remember that trick in the future! =)