Dynamic textbox with attached script

Ken · Dec 8, 2007

Hello,

I'm wondering if someone could tell me why the following code would
work as expected in Firefox but not IE7.

Basically, I am attempting to dynamically create a text box and have
javascript code attached to an event on that textbox. What should
happen is this:
- Click "Create Element".
- A new textbox appears.
- Hover your mouse over the textbox, and an alert is displayed stating
"You are pointing at a dynamically created control!"

On Firefox, this works. On IE7, the textbox appears but no alert
onmouseover occurs. Of course, the code works when I try it using
static HTML.

Any ideas? Is this a security limitation or perhaps I have to do this
another way for IE7?

Thanks in advance!

===========

<!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">

</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="" >
<label for="textfield"></label>
<input type="button" name="btnCreateElement"
value="Create Element"
onclick="addTextBox( 'placeHolder'); " />
<br />
<label for="label"></label>
<input type="button" name="btnClearElement"
value="Clear Element"
onclick="clearTextBox( 'placeHolder' );" />
<br />
<div id="placeHolder" />
</form>
</body>
</html>

David Mark · Dec 8, 2007

Hello,

I'm wondering if someone could tell me why the following code would
work as expected in Firefox but not IE7.

Basically, I am attempting to dynamically create a text box and have
javascript code attached to an event on that textbox. What should
happen is this:
- Click "Create Element".
- A new textbox appears.
- Hover your mouse over the textbox, and an alert is displayed stating
"You are pointing at a dynamically created control!"

On Firefox, this works. On IE7, the textbox appears but no alert
onmouseover occurs. Of course, the code works when I try it using
static HTML.

Any ideas? Is this a security limitation or perhaps I have to do this
another way for IE7?

Thanks in advance!

===========

<!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">

Lose the deprecated language attribute. Optionally add type="text/
javascript".

<!--

Lose that too.

function addTextBox( targetElementId )
{

var newElement = document.createElement('input');
newElement.setAttribute( 'type', 'text');

You can skip this.

newElement.setAttribute( 'name', 'myTextfield');
newElement.setAttribute(
"onmouseover",
"javascript:alert('You are pointing at a dynamically created
control!'); "

Right there. IE's get/setAttribute implementation has never been
right. Somehow in the six plus years MS worked on IE7, they never
made time to fix it. That line in IE translates to:

newElement.onmouseover = "javascript:alert('You are pointing at a
dynamically created control!'); "

This clearly won't work.

You don't need the javascript: prefix either, so it should be written
as:

newElement.onmouseover = function() { alert('You are pointing at a
dynamically created control!'); };

);

var targetElement = document.getElementById( targetElementId );
targetElement.appendChild( newElement );

}

function clearTextBox( targetElementId )
{
var targetElement = document.getElementById( targetElementId );
targetElement.innerHTML = '';

targetElement.value = '';

}

//-->

You don't need to hide scripts.

</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="" >
<label for="textfield"></label>

What is that for?

<input type="button" name="btnCreateElement"
value="Create Element"
onclick="addTextBox( 'placeHolder'); " />

You clearly aren't serving this as XHTML, so lose the slash at the
end.

<br />

<br>

Or better yet, use CSS.

<label for="label"></label>

Why the empty labels for elements that don't exist?

<input type="button" name="btnClearElement"
value="Clear Element"
onclick="clearTextBox( 'placeHolder' );" />
<br />

See above.

VK · Dec 8, 2007

var newElement = document.createElement('input');
newElement.setAttribute( 'type', 'text');
newElement.setAttribute( 'name', 'myTextfield');
newElement.setAttribute(
"onmouseover",
"javascript:alert('You are pointing at a dynamically created
control!'); "
);

setAttribute is DOM method to create Attribute_Node in the DOM Tree
with the specified Text Node content; this method has none to do with
DOM interface scripting but some browsers do correct it so making
newElement.setAttribute("onmouseover", "something")
equal to
newElement.onmouseover = something;
IE is not one of them. If you request getAttribute("onmouseover") from
the newly created object it will report ""javascript:alert..." So the
DOM node is created and its textual content is set as requested. But
you don't want to create any nodes: you want to assign a function
reference to the exposed event handler of a DOM element. So doing what
we really want:
var newElement = document.createElement('input');
newElement.type = 'text';
newElement.name = 'myElement';
newElement.onmouseover = mOver;
and say
function mOver() {
window.alert('I am '+this.name);
}

No testing is made, just typing in so sorry for possible errors:

<script>
function mOver() {
window.alert('I am '+this.name);
}
</script
<form action="">
<input type="button" name="Button" value="Button" onclick="
var newElement = document.createElement('input');
newElement.type = 'text';
newElement.name = 'myElement';
newElement.onmouseover = mOver;
this.form.appendChild(newElement);
">
</form>

Thomas 'PointedEars' Lahn · Dec 8, 2007

Ken said:
I'm wondering if someone could tell me why the following code would
work as expected in Firefox but not IE7.
[...]
On Firefox, this works. On IE7, the textbox appears but no alert
onmouseover occurs. Of course, the code works when I try it using
static HTML.

Have a look in the statusbar. Probably there is a yellow icon that tells
you that you did something wrong.

Any ideas?

Yes. You should acquire a minimum clue before you start coding.

Is this a security limitation
No.

or perhaps I have to do this another way for IE7?

My tests indicate otherwise.

Thanks in advance!

You're welcome.

[...]
<!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">

IE does not support XHTML, and XHTML does not appear to be required here:

http://hsivonen.iki.fi/xhtml-the-point/

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

That's nonsense unless you make the additional mistake of serving XHTML as
text/html:

http://www.hixie.ch/advocacy/xhtml

And then it is only good for non-HTTP display, unless you have made the
additional mistake of omitting the encoding declaration from your
Content-Type HTTP headers:

http://www.w3.org/TR/html4/charset.html#spec-char-encoding

<title>Untitled Document</title>
http://www.w3.org/QA/Tips/good-titles

<script language="javascript">
http://validator.w3.org/

<!--

That is error-prone and unnecessary in HTML since version 3.2 (current is
4.01, and 3.2's predecessor v2.0 was obsoleted long ago). It constitutes an
XML comment which will comment out the entire script element for the parser
in XHTML, probably leaving only an empty <script />:

http://www.w3.org/TR/REC-xml/#sec-comments

function addTextBox( targetElementId )
{

var newElement = document.createElement('input');

Use spaces for indentation, not tabs.

newElement.setAttribute( 'type', 'text');

setAttribute() is buggily implemented and seldom necessary. It
is not necessary here as the object has a corresponding property:

newElement.type = "text";

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62883744

newElement.setAttribute( 'name', 'myTextfield');

newElement.name = "myTextfield";

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498

newElement.setAttribute(
"onmouseover",
"javascript:alert('You are pointing at a dynamically created
control!'); "
);

Event listeners should be assigned with the appropriate methods;
EventTarget::addEventListener() in a W3C DOM implementation (see above and
below) and attachEvent() in the MSHTML DOM:

http://msdn2.microsoft.com/en-us/library/ms536343.aspx

`javascript:' does not belong into event listener code; it is either a
syntax error or only a label there:

http://www.w3.org/TR/html401/interact/scripts.html#default-script

var targetElement = document.getElementById( targetElementId );

It does not make sense to retrieve the same element object reference again.
Store it in a globally available property that you assign to only once.
For example:

var targetElement = null;

function addTextBox(targetElementId)
{
if (!targetElement)
targetElement = document.getElementById(targetElementId);

if (targetElement)
{
// ...
}
}

targetElement.appendChild( newElement );

All calls should be feature-tested at runtime before. See the FAQ Notes:

http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

}

function clearTextBox( targetElementId )
{
var targetElement = document.getElementById( targetElementId );

See above.

targetElement.innerHTML = '';

`innerHTML' is a proprietary property is not supposed to work in the XHTML
DOM. It can not be expected to be supported in the HTML DOM either. Use
standards compliant access and mutator methods for that instead:

http://www.w3.org/DOM/

//-->
Unnecessary.

[...]
<form id="form1" name="form1" method="post" action="" >
<label for="textfield"></label>

Both lines are nonsense; the first one only in this context, as no `form'
element is needed here (and even if it were, it did not need to have an ID
*and* a name).

<input type="button" name="btnCreateElement"
value="Create Element"
onclick="addTextBox( 'placeHolder'); " />

Equivalent to

<input type="button" name="btnCreateElement"
value="Create Element"
onclick="addTextBox( 'placeHolder'); ">>

for an HTML parser which is used if you serve XHTML as text/html.
Tag-soup parsers will *falsely* error-correct this but to rely on
that is error-prone, of course.

What about people with a UA that does not provide support for client-side
scripting? Use

<script type="text/javascript">
document.write([
'<input type="button" value="Create Element"',
' onclick="addTextBox(\'placeHolder\');">'
].join("\n"));
</script>

instead. The better alternative would be to use a submit button so that the
server could take over if the client could not.

<br />

Equivalent to said:
<label for="label"></label>

Same nonsense as above. You have an empty label here that serves no
purpose, needlessly.

<input type="button" name="btnClearElement"
value="Clear Element"
onclick="clearTextBox( 'placeHolder' );" />

Equivalent to

<input type="button" name="btnClearElement"
value="Clear Element"
onclick="clearTextBox( 'placeHolder' );">>

for an HTML parser.

Same nonsense as above regarding accessibility.

And if you put unnecessary whitespace in the argument list, at least you
should do it consistently.

<br />

See above.

<div id="placeHolder" />

Equivalent to <div id="placeHolder">> for an HTML parser. That
particular fragment would also constitute invalid markup in HTML 4.01
*Strict* where close tags are required for non-EMPTY elements.

HTH

PointedEars

Thomas 'PointedEars' Lahn · Dec 8, 2007

VK said:
setAttribute is DOM method to create Attribute_Node in the DOM Tree
Correct.

with the specified Text Node content;
this method has none to do with DOM interface scripting
but some browsers do correct it so

Complete utter nonsense.

making newElement.setAttribute("onmouseover", "something")
equal to
newElement.onmouseover = something;

You miss the point.

[...]
No testing is made, just typing in so sorry for possible errors:
[...]

Invalid corrections as these are utterly useless to the uninitiated.
Stop posting them.

PointedEars

Issue with textbox script?	0	Sep 5, 2022
Script to send email not working	1	Apr 10, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Only one table shows up with the information	2	Mar 29, 2023
Check forms With JavaScript	1	Mar 28, 2023
Need help with stripe payment	0	Oct 2, 2021
Help with code	0	Jun 12, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

Dynamic textbox with attached script

Ken

David Mark

VK

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads