cfform (flash) and javascript integration

[saintsilver]

I've been searching and shooting in the dark for 2 days and can't get this to work...

I need to have my flash form button execute a javascript, return the value to the form and then I need the form to submit and take advantage of cfform's validation.

So far, I get the javascript to change the value of the form field without submitting the form, but when I add the submit line, the form submits before the javascript returns the changes.

Here is my sample:


<script language="JavaScript" type="text/javascript">
function changeSomething(x,z1,z2)
{
var z3 = "window.document."+z1+ ".SetVariable";
if (x != "ABCDEFG")
{
eval(z3+"(z2+'.text', 'INVALID Name')");
}
}
</script>

<cfsaveContent variable="prevalidateIt">
getURL("javascript:changeSomethig('"+name.text+"','Step1','name')");
submitForm();
</cfsavecontent>

<cfform method="post" name="Step1" preloader="no" format="flash" width="960">

<cfformgroup type="panel" label="Step 1" visible="yes" enabled="yes">
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfformgroup type="hbox" width="200" visible="yes" enabled="yes">
<cfinput type="text" name="name" size="12" maxlength="11" width="12" label="name" validateat="onSubmit" validate="maxlength" required="yes" />
</cfformgroup>
</cfformgroup>
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfinput type="button" name="Submit" value="Submit" onclick="#prevalidateIt#" />
</cfformgroup>
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfinput name="Reset" type="reset" id="Reset" value="Reset" />
</cfformgroup>
</cfformgroup>
</cfformgroup>

</cfform>


My javascript is of course way more complicated than this one and goes through several steps of validation of the form field. It will ultimately be used on multiple fields in the form.

Has anybody else tried to do something similar.

Thanks!

[BKBK]

I ran your code. It appears to work as expected. The only major change is that I corrected the typo javascript:changeSomethi ng.

<script type="text/javascript">
function changeSomething(x,z1,z2)
{
var z3 = "window.document."+z1+ ".SetVariable";
if (x != "ABCDEFG")
{
eval(z3+"(z2+'.text', 'INVALID Name')");
}
}
</script>

<cfsaveContent variable="prevalidateIt">
getURL("javascript:changeSomething('"+name.text+"','Step1','name')");
submitForm();
</cfsavecontent>

<cfform method="post" action="#cgi.script_name#" name="Step1" preloader="no" format="flash" width="960">
<cfformgroup type="panel" label="Step 1" visible="yes" enabled="yes">
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfformgroup type="hbox" width="200" visible="yes" enabled="yes">
<cfinput type="text" name="name" size="12" maxlength="11" width="12" label="name" validateat="onSubmit" validate="maxlength" required="yes" />
</cfformgroup>
</cfformgroup>
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfinput type="button" name="Submit" value="Submit" onclick="#prevalidateIt#" />
</cfformgroup>
<cfformgroup type="hbox" visible="yes" enabled="yes">
<cfinput name="Reset" type="reset" id="Reset" value="Reset" />
</cfformgroup>
</cfformgroup>
</cfformgroup>
</cfform>

[saintsilver]

The typo is just a leftover from when I sanitized the code for the forum. With that correction, it only seems as if it runs as expected, but checking form results, the value of name has not changed.

I can't get it to change before the form submits. If I remove the submitForm(); line, the field will change with no problem (except no form submission).

Thanks again.

[BKBK]

Why don't you delete the line submitForm(); and change from type="button" to type="submit"?

[saintsilver]

It still won't work like that. Basicly, I need the javascript to do detailed validation of several fields. If the fields fail the javascript validation, their values are changed to a value that will also fail the cfform validation. Then the form should submit with these new values returning the standard cfform validation error alert. The javascript validates some very specific info like exact number of characters, with certain characters in certain positions etc.

Since my original post, I have rewritten the javascript in actionscript. Because of tiem restraints, I was hoping to avoid that. I have other forms that will have similar situations, so I still need to find a solution.

I'm sure the problem is because of actionscripts' asynchronous processing. But I can't get cfform to do a loop while to create a pause without creating an endless loop in this situation.

Any other ideas?

Thanks.

[saintsilver]

Here is a related issue that I'm having now. I need to display an alert based on a variable set by a javascript. I'm sure that because of the same reason as in my other post, I can't get it to work. Here is a sample of what I'm doing:

<script language="JavaScript" type="text/javascript">
function setMyAlert()
{
var x = "Yes1234";
window.document.myForm.SetVariable("myField.text", x);
};
</script>

<cfsaveContent variable="getHashjs">
getURL("javascript:setMyAlert()");
alert(myField.text);
</cfsavecontent>


I tried to set a delay to give the javascript a chance to return, but it did not work.

<cfsaveContent variable="getHashjs">
for (var x:Number = 0; x < 100; x++)
{
if (x==0){getURL("javascript:setMyAlert()");};
if (x==99) {
alert(myField.text);};
};
</cfsavecontent>

Any ideas?

Thanks

[BKBK]

I don't think it's good, or even possible, to do alert(myField.text);. The assignment myField.text=x implied by SetVariable("myField.text", x) should be sufficient. It will put the value of x into the flash field.

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function setMyAlert()
{
x = "Yes1234";
// Use SetVariable() to send a string value from JS to Flash
window.document.myForm.SetVariable("myField.text", x);
}
</script>
</head>

<body>
<cfsaveContent variable="getHashjs">
<!--- Use getURL to call JS from Flash --->
getURL("javascript:setMyAlert();");
</cfsavecontent>

<cfform action="#cgi.script_name#" method="post" name="myForm" id="myForm" format="Flash">
<cfinput type="text" name="myField"><br>
<cfinput type="button" name="btn" value="get it" onclick="#getHashjs#" >
<cfinput type="submit" name="sbmt" value="send it">
</cfform>
</body>
</html>

[saintsilver]

Setting the field.text works fine. However, I'd like to get all of my alerts to look the same. When my javascript returns an error, it's calling the javascript alert. I'd like to send the message to an actionscript alert in my cfform instead. So, I was sending the value of my javascript message to a cfform field. Is there a better way to do this?