Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CF Flash Form, onKeyUp

Status
Not open for further replies.

TamedTech

IS-IT--Management
May 3, 2005
998
GB
Hi Guys,

I'm runninga flash form for my app, and thanks to other forum members i've quired a piece of javascript that will give me a nice little meter on the stregnth of my password.

Problem is I cant get my form to run when i have the onKeyUp event triggering my java. I'm sure this is because i'm using a flash form, do I have to re-code my Javascript trigger as actionscript? if so, HELP! lol.

i've coppied my code below.

Rob

p.s. sorry for the sloppyness, i'ts still in first stages of development.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Flash Form Test</title>

    <script language="javascript">
    var ieDOM = false, nsDOM = false;
    var stdDOM = document.getElementById; function initMethod()
    {
    //Determine the browser support for the DOM
    if( !stdDOM )
    
    {
    ieDOM = document.all;
    if( !ieDOM )
    
    {
    nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4));
    }
    }
    
    passwordChanged();
    }
    function getObject(objectId)
    
    {
    if (stdDOM) return document.getElementById(objectId);
    if (ieDOM) return document.all[objectId];
    if (nsDOM) return document.layers[objectId];
    }
    function getObjectStyle(objectId)
    
    {
    if (nsDOM) return getObject(objectId);
    var obj = getObject(objectId);
    
    return obj.style;
    }
    function showDefault(objectId)
    
    {
    showCell(objectId, "#E2E2E2", "#E2E2E2");
    }
    function showCell(objectId, foreColor, backColor)
    {
    getObjectStyle(objectId).color = foreColor;
    
    getObjectStyle(objectId).backgroundColor = backColor;
    }
    function showWeak()
    
    {
    showCell("pwWeak", "Black", "#FF6666");
    showDefault("pwMedium");
    
    showDefault("pwStrong");
    }
    function showMedium()
    
    {
    showCell("pwWeak", "#FFCC66", "#FFCC66");
    showCell("pwMedium", "Black", "#FFCC66");
    
    showDefault("pwStrong");
    }
    function showStrong()
    
    {
    showCell("pwWeak", "#80FF80", "#80FF80");
    showCell("pwMedium", "#80FF80", "#80FF80");
    showCell("pwStrong", "Black", "#80FF80");
    }
    function showUndetermined()
    
    {
    showDefault("pwWeak");
    showDefault("pwMedium");
    showDefault("pwStrong");
    }
    
    
    function passwordChanged(pwd)
    {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{1,}).*", "g");
    
    
    //var pwd = getObject("txtPassword").value;
    if( false == enoughRegex.test(pwd) )
    {
    showUndetermined();
    }
    else if( strongRegex.test(pwd) )
    {
    showStrong();
    }
    else if( mediumRegex.test( pwd ) )
    {
    showMedium();
    }
    else
    {
    showWeak();
    }
    }
    </script>

</head>

<body>

<cfform format="flash" width="520" height="1000" skin="halosilver">

<cfformitem type="html"><h1>User Details</h1><br><font size="-3"><b>User Name / Password</b> - This first section of the form details your username and password, you are more than welcome to chose anything you want, the only people who will see these details is you, they will not be displayed to the customers browing the site.</font></cfformitem>

<cfformgroup type="hdividedbox" style="background-color:##EFEFEF;">
<cfformgroup type="horizontal" label="*Full Name:">
		<cfinput type="text" name="name">
		<cfinput type="text" name="name2">
</cfformgroup>
		<cfinput type="text" name="username" label="*Username:" tooltip="This is the unique identity you will use to login to your account">
		<cfinput tpye="password" name="password" label="Password">
		<cfinput type="password" name="password2" label="*Confirm Password:">
</cfformgroup>

<cfformitem type="html"><h1>Contact Details</h1><br><font size="-3"><b>Contact Details</b> - Now we just need a set of your contact details, you will be able to select a different name and address for both the advertisment and your billing address, this is purly a point of contact so that we can get in touch if we need to discuss anything with you, want to know what we'll do with your info? have a look at our <a href="pp.cfm">Privacy Policy</a>.</font></cfformitem>

<cfformgroup type="hdividedbox" style="background-color:##EFEFEF;">
		<cfinput type="text" name="add1" label="*Address 1:">
		<cfinput type="text" name="add2" Label="Address 2:">
		<cfinput type="text" name="Town" Label="Town:">
		<cfinput type="text" name="County" Label="County:">
		<cfinput type="text" name="PostCode" Label="*Post Code:">
		<cfinput type="text" label="*E-Mail Address:" name="email">
		<cfinput type="checkbox" name="news" label="Recieve Our Monthly Newsletter?"checked>
		<cfinput type="text" label="Telephone Number:" name="telephone">
		<cftextarea name="query" height="150" Label="Your Enquiry:"></cftextarea>
</cfformgroup>

<cfformitem type="html"><font size="-3">All thats left to do now is submit the form, you will then be given a reciept for your order</font></cfformitem>
		<cfinput type="submit" value="Submit" name="submit">
</cfform>
    
<TABLE style="BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; FONT-SIZE: 75%; BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid" cellSpacing="0" cellPadding="0" width="100%">

<TR>
	<TD id="pwWeak" style="BORDER-RIGHT: black thin solid" align="center" width="34%" title="Has at least six characters">Weak</TD>
    <TD id="pwMedium" style="BORDER-RIGHT: black thin solid" align="center" width="33%" title="Has a mix of numbers, lower & upper case characters.">Medium</TD>
    <TD id="pwStrong" align="center" width="33%" title="Has numbers, special characters, lower & upper case characters.">Strong</TD>
</TR>
</TABLE>
</body>
</html>
 
According to the livedocs for cfinput - there is an onKeyUp attribute which can be used to call javascript or actionscript if you are using flash forms.


There are libraries which allow communication via flash and javascript but not sure if they work with flash forms...
 
Yep, i noted the live doc that says you can call java, and it works fine when the form is in xml or html format, but kick it into flash then its no good.

It's only a small trigger:
Code:
onKeyUp="passwordChanged(this.value)"

The form loads fine without the onkeyup even in it, as soon as i add the attribute then the form stops loading in the browser.

I'm guessing i need to use somthing like the getURL feature in Actionscript to power that Javascript.

I have no real knowledgy of action script so anyone that does it would be a great help.

Rob
 
Are you talking about Java or JavaScript? They are two completely seperate programming languages that have no relation to each other whatsoever. Kinda like CF and C#.


Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Sorry, my mistake for not being clear ECAR.

I am most definatly talking about JavaScript ... I have the JavaScript (see above) that calculates and changes the id of a table to indicated the strength of the password.

An onKeyUp event on the password field triggers the JavaScript to run and re-calculate the strength of the password.

The onKeyUp event that runs the JavaScript works fine in HTML forms and CFFORMS set to XML format ... but when i change the CFFORM to a Flash form the form will not load whist the onKeyUp event is in there, remove the onKeyUp event and the flash form works fine.

So i'm guessing the:

Code:
onKeyUp="passwordChanged(this.value)"

Isnt the correct syntax for a Flash Form, i need someone to advise me on how to trigger my JavaScript, On Key Up from a flash form.

Thanks,

Rob
 
OK, so i've made a small amount of progress, i've managed to get the JavaScript to run from the flash form, but seemingly not quite properly.

Have a look at the following two pages, the first is the HTML version of the form, the second is the flash form. the JavaScript and Table are identical in both examples.

You'll notice that in the Flash version the meter will only get as far as "weak" and no matter what you put, wont get any higher.

HTML -
Flash -
Thanks,

Rob
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top