Simple onmouseout event....I hope!

[ob1kanobee]

I have an Add button that creates textboxes within a loop and declaring an onchange event call on the fly, but when I execute the code by clicking the Add button, it automatically goes to the validateAddress function which is supposed to validate an email address.
What am I doing wrong to cause it to fire off the validateAddress function when it builds the textbox instead of after I key in a value?

Any help will be appreciated. Thanks

var td5 = document.createElement("TD");
var inp5 = document.createElement("INPUT");
inp5.type='text';
inp5.name='sEmailAddress-'+ index;
inp5.value='';
inp5.onchange=validateAddress(inp5.value);
td5.appendChild(inp5);
td5.align='center';
inp5.width='100';

 

[stewartwebb]

You really need to post your code to get a better understanding of how this is working. But you could try 'onKeyDown' or 'onKeyUp' to see if this makes a difference instead on 'onChange'. I maybe proven wrong but I think 'onChange' only applies to drop down lists.

hth

Stewart.

 

[tsdragon]

onChange applies to INPUT, SELECT and TEXTAREA, so it should work. Perhaps the event is getting fired because of something you are doing during the creation process. My suggestions:

Try setting the onChange handler as the very last thing you do to the text box.

Set a global flag to true while you are creating the element, and to false when done. Check that flag in the onChange event handler to see it you should do anything.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[tsdragon]

Never mind that, I think I know the problem. The line you highlighted in red is not assigning validateAddress as the event handler, it is calling validateAddress and assigning it's return value as the event handler!

Try putting quotes around the function call.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[ob1kanobee]

tsdragon, when I put quotes around the function call, it builds the textbox without firing the event, but it does not matter what event I use, it never gets fired off from that point.

I tried a global variable by setting it to true after the textbox is built, but that did not work either.
It seems that if I put quotes around it, it never fires the event. I tried onchange, onmouseout, onkeydown, etc. and the event is not being called.

Heres an example of the HTML calling the function:

<td><input type='button' onclick="javascript:addRow('myTable');" value='Add' <%=disabled%>></td>

Here's an example of the functions being used:

function addRow(id,oid)
{
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
document.form1.sAction.value="";
<%ContactManager cMan = new ContactManager(); %>

var form = document.createElement("FORM");
form.name="addRowForm";
form.action='process_editReferences.jsp';
tbody.appendChild(form);
var row = document.createElement("TR")
var td0 = document.createElement("TD")
var td1 = document.createElement("TD")
var inp = document.createElement("INPUT");
inp.type='text';
inp.width='100';
inp.name='sCompanyName-' + index;
inp.value='';
td1.appendChild(inp);
td1.align='center';
var td2 = document.createElement("TD")
var inp2 = document.createElement("INPUT");
inp2.type='text';
inp2.width='100';
inp2.name='sName-'+ index;
inp2.value='';
td2.appendChild(inp2);
td2.align='center';
var td3 = document.createElement("TD")
var inp3 = document.createElement("INPUT");
inp3.type='text';
inp3.width='100';
inp3.name='sTitle-'+ index;
inp3.value='';
td3.appendChild(inp3);
td3.align='center';
var td4 = document.createElement("TD")
var inp4 = document.createElement("INPUT");
inp4.type='text';
inp4.width='100';
inp4.name='sPhoneNumber-'+ index;
inp4.value='';
td4.appendChild(inp4);
td4.align='center';
var td5 = document.createElement("TD");
var inp5 = document.createElement("INPUT");
inp5.type='text';
inp5.name='sEmailAddress-'+ index;
inp5.value='asdf';
inp5.width='100';
inp5.onchange='validateAddress(inp5.value)';
td5.appendChild(inp5);
td5.align='center';

row.appendChild(td0);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);
index = index +1 ;
}

function validateAddress(incoming) {
var emailstring = incoming;
var ampIndex = emailstring.indexOf("@");
var afterAmp = emailstring.substring((ampIndex + 1), emailstring.length);
// find a dot in the portion of the string after the ampersand only
var dotIndex = afterAmp.indexOf(".");
// determine dot position in entire string (not just after amp portion)
dotIndex = dotIndex + ampIndex + 1;
// afterAmp will be portion of string from ampersand to dot
afterAmp = emailstring.substring((ampIndex + 1), dotIndex);
// afterDot will be portion of string from dot to end of string
var afterDot = emailstring.substring((dotIndex + 1), emailstring.length);
var beforeAmp = emailstring.substring(0,(ampIndex));
//old regex did not allow subdomains and dots in names
//var email_regex = /^[\w\d\!\#\$\%\&\'\*\+\-\/\=\?\^\_\`\{\|\}\~]+(\.[\w\d\!\#\$\%\&\'\*\+\-\/\=\?\^\_\`\{\|\}\~])*\@(((\w+[\w\d\-]*[\w\d]\.)+(\w+[\w\d\-]*[\w\d]))|((\d{1,3}\.){3}\d{1,3}))$/;
var email_regex = /^\w(?:\w|-|\.(?!\.|@))*@\w(?:\w|-|\.(?!\.))*\.\w{2,3}/
// index of -1 means "not found"
if ((emailstring.indexOf("@") != "-1") &&
(emailstring.length > 5) &&
(afterAmp.length > 0) &&
(beforeAmp.length > 1) &&
(afterDot.length > 1) &&
(email_regex.test(emailstring)) ) {
return true;
} else {
alert("Please enter a valid email address");
return false;
}
}

 

[tsdragon]

There seems to be a problem because you are specifying parameters to the onchange handler. Try this:

inp5.onchange=validateAddress;
...
function validateAddress() {
var incoming = window.event.srcElement.value;
...

See what that does for you.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[ob1kanobee]

Thank you, that fixed it.

 

[tsdragon]

You're welcome. If anyone can figure out how to specify an event handler WITH a parameter like you were trying to do, I'd LOVE to see how they do it. I tried a bunch of ways and couldn't figure it out.

Fortunately window.event.srcElement.value works quite well. It might even make you code more flexible.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[cLFlaVA]

If I understand your challenge correctly, Tracy, then I think you'd want something like this:

var inp5 = document.createElement("INPUT");
with (inp5) {
    type = 'text';
    name = 'sEmailAddress-'+ index;
    value = 'asdf';
    width = '100';
    onchange = 'validateAddress(this.value)';
}
td5.appendChild(inp5);
td5.align = 'center';

But then again, I haven't tested that code.

*cLFlaVA
----------------------------
[tt]0101 is binary code for "supreme programmer of omnipotent power"[/tt] - adam0101
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ob1kanobee]

cLFlaVA, FYI, I tried that too with no results. I tried passing both inp5.value as well as this.value but was not able to get it to work.
Tracy's solution so far has been the only thing that has worked.

 

[cLFlaVA]

then, yes, getting the source element would be the best way. just for x-browser compatability, I'd do something along these lines (just beefing up tracy's code a bit)

inp5.onchange=validateAddress;
...
function validateAddress(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    ...
}

(taken in part from quirksmode.org)

*cLFlaVA
----------------------------
[tt]0101 is binary code for "supreme programmer of omnipotent power"[/tt] - adam0101
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ob1kanobee]

Thank you, I'll incorporate that in my code.