...

View Full Version : IE7 unable to set type of <button>



jcobban
09-19-2011, 05:03 PM
I am restarting a thread because as a result of acting on all of the suggestions I have received the nature of the issue has changed.

I am trying to create a button and add it to the DOM under IE7. The code works fine under Firefox:



var editButton = document.createElement("button");
editButton.name = "editCitation" + rowNum;
try {
editButton.type = 'button';
} catch(e) { // IE7 throws this exception
alert("citTable.js: gotAddCit: unable to set type for <button name='editCitation" + rowNum + "' type=" + editButton.type);
}
editButton.onclick = editCitation;
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);


I am creating a <button> rather than an <input type=button> because a <button> permits HTML in the button label. Most of my buttons support Alt keyboard shortcuts, so I want to underline the appropriate letter in the label.

According to the HTML 4.01 specification, which is as close to a standard as IE7 supports, a <button> can be one of three types: submit, reset, or button, and the default is submit. Since I wish to create a <button type=button> I therefore, at least theoretically, need to be able to set the value of the type attribute. However IE7 throws an exception at that point, although, interestingly, when I interrogate the value of editButton.type in the catch it is set to button.

So how do I reliably set the type of a button under IE7?

blaze4218
09-19-2011, 05:06 PM
why don't you "interrogate the value of editButton.type" first, then, only set the value when it doesn't already equal 'button'?

devnull69
09-19-2011, 05:07 PM
However IE7 throws an exception at that point

Which one?

mrhoo
09-19-2011, 05:23 PM
If you do not need the button as an uploadable form field do not give it a name attribute, but an id (if it actually needs an identifier.).

Older IE's will not modify a named form field with script statements.
Even if no error is thrown, the modified field will not be sent to the server in a form upload.

If you insist on a name for the button, you can use innerHTML to create the element entirely, name, type and all-
but you still can't modify its attributes after it is created, in IE between version 6 and 8.

xelawho
09-19-2011, 05:57 PM
I have two questions:

1) did Davey Erwin's seemingly-acceptable solution to your problem here (http://www.codingforums.com/showpost.php?p=1137202&postcount=22) not work?

2) (and this is a real question): can you put HTML inside a text node? I always figured it was for... text... which is why we use innerHTML for that....

blaze4218
09-19-2011, 06:25 PM
I have two questions:

2) (and this is a real question): can you put HTML inside a text node? I always figured it was for... text... which is why we use innerHTML for that....
I'm not sure where your question comes from, because I don't see that in this thread. However, if you were to try to insert HTML the same way you insert strict text most browsers (if any) will not parse that as you anticipated by adding it to the DOM. I don't understand the DOM, and can barely navigate it, so I won't touch the "why", but I will say this: Why bother? Use innerHTML for HTML and innerText for text




<div id="tst">hi</div>

<script>
//Uncomment and test each line in order...
//document.getElementById('tst').innerHTML+=' there'; //works as expected
//document.getElementById('tst').innerText+=' you'; //works as expected
//document.getElementById('tst').innerText+=' <button>bye</button>'; //will insert text, not HTML (kinda like if you had used <pre><button>bye</button></pre>)

</script>

xelawho
09-19-2011, 06:49 PM
the question comes because OP is twisting himself in knots trying to insert HTML elements into the value of the button. I only know this because he mentioned it in passing after about 20 posts on the other thread, but he does actually mention it in the original question of this thread. He doesn't actually post it in the example code, but it seems to me that this is the line where that HTML will eventually go:
editButton.appendChild(document.createTextNode('Edit Citation'));

which as I say I think (but don't know) is a dud approach to begin with.

just that.

blaze4218
09-19-2011, 07:03 PM
OK xelawho, I see. Yeah, I didn't really see the wisdom of that line either, but I didn't really associate it with your question.
I think that the statement in question is used append the editButton with a new element. And instead of supplying a string as in the following from java2s.com


<html>
<body>
<script language="javascript">
function function1(){
var myElement = document.createElement('<div style="width:600; height:200;background-color:blue;">www.java2s.com</div>');
document.all.myBody.appendChild(myElement);
}
</script>
<body id="myBody"><button onclick="function1();">Append child</button></body>
</body>
</html>

he created a text node "on-the-fly" and supplied that to the appendChild method. Seems legit...

Dormilich
09-20-2011, 07:49 AM
2) (and this is a real question): can you put HTML inside a text node? I always figured it was for... text... which is why we use innerHTML for that....

no. but depending on the parent node*, you can add Element nodes as well.

* - if you have an attribute node, its Text nodes only. however Element nodes (except for the self closed ones like <input>, <img>, <br>, etc. i.e. all elements that are defined in the DTD as EMPTY or with #PCDATA-only content) can have Text and Element node children.

DaveyErwin
09-21-2011, 06:16 PM
So how do I reliably set the type of a button under IE7?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">
function addButtons(){
var myButton = document.createElement("<BUTTON type='button'>");
var myReset = document.createElement("<BUTTON type='reset'>");
var mySubmit = document.createElement("<BUTTON type='submit'>");

myButton.innerHTML = "<p style='color:red'><u style='color:blue'>B</u>utton</p>";
myReset.innerHTML = "<p style='color:red'><u style='color:blue'>R</u>eset</p>";
mySubmit.innerHTML = "<p style='color:red'><u style='color:blue'>S</u>ubmit</p>";

document.getElementById("td1").appendChild(myButton);
document.getElementById("td1").appendChild(myReset);
document.getElementById("td1").appendChild(mySubmit);

}

</script>

</head>
<body>
<form>
<input type="text" >
<div id="td1">
<p><input type="button" onclick="addButtons()"
value="addButton"></p>
</div>
</form>
</body></html>

If you want to change the type of an existing
butoon , first remove the button then add w
button with the preferred type.

devnull69
09-21-2011, 06:24 PM
What?


var myButton = document.createElement("<BUTTON type='button'>");

Can you show me the documentation for that? I would really like it, but I think this is wishful thinking ...

DaveyErwin
09-21-2011, 08:27 PM
cross browser way ...
tested with ie6, ie7, ie8 and firefox6


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">var ie7=false</script>
<!--[if lte IE 7]>
<script type="text/javascript">var ie7=true</script>
<![endif]-->
<script type="text/javascript">

function init(){
var td1 = document.getElementById("td1");
var myButton = createNamedElement("button","idbt1","button1","button");
var myReset = createNamedElement("button","idrs1","reset1","reset");
var mySubmit = createNamedElement("button","idsb1","submit1","submit");
myButton.onclick = dosumthing;
myButton.innerHTML = 'do<u>sum</u>thing';
myReset.innerHTML = 're<u>set</u> thing';
mySubmit.innerHTML = 'sub<u>mit</u> thing';
td1.appendChild(myButton);
td1.appendChild(myReset);
td1.appendChild(mySubmit);
function dosumthing(){
alert('x');
}

}

function createNamedElement(tag,id,name,type)
{
tag = tag.toUpperCase()
var element = null;
if(ie7){
if(id)
tag += " id="+id;
if(name)
tag += " name="+name;
if(type)
tag += " type="+type;
element = document.createElement("<"+tag+">");
}else{
element = document.createElement(tag);
if(id)
element.setAttribute("id", id);
if(type)
element.setAttribute("type",type);
if(name)
element.setAttribute("name", name);
}
return element;
}
</script>

</head>
<body onload="init()">
<form name="frm1" action="whatever.php">
<input type="text">
<div id="td1"></div>
</form>
</body></html>

DaveyErwin
09-21-2011, 11:56 PM
(and this is a real question): can you put HTML inside a text node? I always figured it was for... text... which is why we use innerHTML for that....

Right , text node is for text, use innerHTML
to insert html
Problem, input elements have no innerHTML
Solution, button elements do have innerHTML



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">var ie7=false</script>
<!--[if lte IE 7]>
<script type="text/javascript">var ie7=true</script>
<![endif]-->
<script type="text/javascript">

function init(){
var td1 = document.getElementById("td1");
var myButton = createNamedElement("button","idbt1","button1","button");
var myReset = createNamedElement("button","idrs1","reset1","reset");
var mySubmit = createNamedElement("button","idsb1","submit1","submit");
myButton.onclick = dosumthing;
myButton.innerHTML = '<p style="color:red;margin:0;">do<u style="color:blue">sum</u>thing</p>';
myReset.innerHTML = 're<u>set</u> thing';
mySubmit.innerHTML = 'sub<u>mit</u> thing';
td1.appendChild(myButton);
td1.appendChild(myReset);
td1.appendChild(mySubmit);
function dosumthing(){
alert(document.getElementById('idbt1').type);
}

}

function createNamedElement(tag,id,name,type)
{
tag = tag.toUpperCase()
var element = null;
if(ie7){
if(id)
tag += " id="+id;
if(name)
tag += " name="+name;
if(type)
tag += " type="+type;
element = document.createElement("<"+tag+">");
}else{
element = document.createElement(tag);
if(id)
element.setAttribute("id", id);
if(type)
element.setAttribute("type",type);
if(name)
element.setAttribute("name", name);
}
return element;
}
</script>

</head>
<body onload="init()">
<form name="frm1" action="whatever.php">
<input type="text">
<div id="td1"></div>
</form>
</body></html>

xelawho
09-22-2011, 12:34 AM
Problem, input elements have no innerHTML
Solution, button elements do have innerHTML


well looky there:


function makeButton() {
var thediv = document.getElementById("div1");
mybutt=document.createElement('button');
mybutt.innerHTML= 'do<u>sum</u>thing';
thediv.appendChild(mybutt);
}

so they do. Thanks, Davey :thumbsup:

DaveyErwin
09-22-2011, 10:40 PM
What?


var myButton = document.createElement("<BUTTON type='button'>");

Can you show me the documentation for that? I would really like it, but I think this is wishful thinking ...


According to the HTML 4.01 specification, which is as close to a standard as IE7 supports, a <button> can be one of three types: submit, reset, or button, and the default is submit.

I will take jcobban's for it , if you like,
just look it up in the HTML 4.01 specification.

devnull69
09-22-2011, 10:49 PM
I don't mean the <button type="button">, I mean the parameter to document.createElement() ... as far as I know it can only be the name of an element ... without any brackets or attributes

So


document.createElement('button');

and not


document.createElement('<button type="button">');

DaveyErwin
09-23-2011, 09:58 PM
I don't mean the <button type="button">, I mean the parameter to document.createElement() ... as far as I know it can only be the name of an element ... without any brackets or attributes

So


document.createElement('button');

and not


document.createElement('<button type="button">');


Try this in InternetExplorer ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">
function init(){
frm = document.createElement("<form action='http://www.msn.com'>")
but = document.createElement("<button type='button'>")
but.innerHTML = "<p style='margin:0;color:red'>This will not submit</p>"
frm.appendChild(but)
sub = document.createElement("<button type='submit'>")
sub.innerHTML = "<p style='margin:0;color:blue'>This will submit</p>"
frm.appendChild(sub)
document.getElementById("formHolder").appendChild(frm)

}
</script>

</head>
<body onload="init()">
<div id="formHolder"></div>
</body></html>
http://msdn.microsoft.com/en-us/library/ms536389(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms534184(v=vs.85).aspx
Here is some documentation other
documentation can be found with
google, use this for search term ...

document.createElement("<

jcobban
09-24-2011, 03:13 AM
If you do not need the button as an uploadable form field do not give it a name attribute, but an id (if it actually needs an identifier.).

Older IE's will not modify a named form field with script statements.
Even if no error is thrown, the modified field will not be sent to the server in a form upload.

If you insist on a name for the button, you can use innerHTML to create the element entirely, name, type and all-
but you still can't modify its attributes after it is created, in IE between version 6 and 8.

Because every other element in the form has a name, I use the value of the name attribute as the key to help documentation, kept in <div>s. For example the documentation for <input name='Field' ... > is in <div id='HelpField'>. When the user presses the F1 key I take the name of the element that currently has the focus and use that to find the div to make visible (pop up). It is admittedly a pain to give buttons a name because then IE passes the buttons in the URI, which Firefox is smart enough to realize is pointless.

I am creating a <button> because I wish to be able to insert HTML into the innerHtml of the element, but <input> does not support innerHtml because the DTD does not permit the <input> tag to have content. Despite the fact that there are three different types of <button>s IE7 does not appear to permit the type to be set and does not document what the type is set to by default when you create a <button> using the standard form of createElement (without HTML) although it does document that the type for <input> defaults to text and that the type of an <input> can be changed between creation and insertion into the DOM. It is understandable that neither name nor type can be modified in IE7 after insertion into the DOM, although Firefox does permit type to be changed at any time.

I appreciate that MS thought it was giving its customers the tools they would need, and it is not its fault that the W3C did not incorporate the MS design, in particular of createElement('<html....>') in this case, into the standard. I also appreciate that MS has addressed most of the incompatibilities between IE and the W3C design in IE8 and 9. It is just a pain to have to write two versions of so much of the code because of this petty squabble. I am also frustrated by the failure of IE7 to take the trouble to tell me which source file the error is thrown in, so I constantly have to guess where the actual problem is based upon the line number and the vague description of the exception. It also takes an excessive effort for me to do IE7 testing because I do not normally run WinXP on any of my computers. I have tried running IE7 under WINE but I have not been able to get it to work, so I have to shut down one of my computers and reboot it in WinXP to do IE7 testing, then I have to reboot into Linux to fix the problem, and then reboot into WinXP to test the fix, etc. I have a copy of Win7 that I can run in a VM under Linux, but it has IE8, in which most of the incompatibility issues have been addressed. I would run WinXP in a VM under Linux but I am not going to spend hundreds of dollars for a WinXP install disk when I have a running WinXP system that I bought second hand and made into a dual-boot system.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum