Hello everyone - firstly apologies... long post ahead.
I was wondering if someone could please help me out a little. I just can't figure this out!
I am trying to call a javascript function which exists in the same page from within InnerHTML in another script and I can't seem to figure out the correct syntax. I have read it is possible but the examples given on the internet just confuse me even more! (Javascript is not a strong point!)
I have split the two bits of code into working examples so that hopefully you can see what I intend to do.
This is my first bit of code which works just fine, it is simply a radio select which provides the user with inputs depending on the selection. The input fields need to be named the same in both innerHTML commands.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language=javascript>
function make_bLiveEmail(zz)
{
document.getElementById(zz).innerHTML = '<input type="text" name="EmailAddress" size="25" > @example.net - simply enter the first part of the email address.<br /><br /><input type="text" name="ConfirmEmailAddress" size="25"> @example.net - Please enter your choice again.';
}
function make_cEmail(zz)
{
document.getElementById(zz).innerHTML = '<input type="text" name="EmailAddress" size="25"> Please provide your current email address.<br /><br /><input type="text" name="ConfirmEmailAddress" size="25"> Please confirm your current email address.';
}
</script>
</head>
<body onload="make_bLiveEmail('eAddress');">
<form action="#" method="post" name="form2" id="form2">
Would you like a "@example.net" email account?<br /><br />
<input name="option" type="radio" onclick="make_bLiveEmail('eAddress');" value="Yes" checked="checked" />
Yes<br />
<input type="radio" name="option" value="No" onclick="make_cEmail('eAddress');" />
No
<div id="eAddress"></div>
</form>
</body>
</html>Now the tricky bit, I want to put an input mask on those fields so that users cannot enter information which is going to mess things up further down the line.
This is the code which will create the mask on the fields
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
var r={
'exampleemail':/[^\w|\.]/g,
'customemail':/[^\w|@|\.]/g
}
function valid(o,w){
o.value = o.value.replace(r[w],'');
}
</script>
</head>
<body>
<form id="form1" method="" >
@example.net allow numbers, letters, period and underscore
<br>
<input type="text" size="35" name="txtEmail" onkeyup="valid(this,'exampleemail')" onblur="valid(this,'exampleemail')">
<br>
<br>
Custom email - just email address characters
<br>
<input type="text" size="35" name="txtPostal" onkeyup="valid(this,'customemail')" onblur="valid(this,'customemail')">
</form>
</body>
</html>I have tried adding the script into the header and then pasting the bottom two lines directly into the InnerHTML code but of course that just throws back an error :( onkeyup="valid(this,'exampleemail')" onblur="valid(this,'exampleemail')" onkeyup="valid(this,'customemail')" onblur="valid(this,'customemail')" Hopefully someone can have a look at this for me and tell me where I am going wrong. Maybe I am going about the whole thing in the wrong way and using javascript where I shouldn't be?
Thanking you all in advance
