Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE7 unable to set type of <button>

    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:

    Code:
    	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?

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    why don't you "interrogate the value of editButton.type" first, then, only set the value when it doesn't already equal 'button'?

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Quote Originally Posted by jcobban View Post
    However IE7 throws an exception at that point
    Which one?

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I have two questions:

    1) did Davey Erwin's seemingly-acceptable solution to your problem here 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....

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Quote Originally Posted by xelawho View Post
    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

    Code:
    <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>

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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
    Code:
    <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...

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,342
    Thanks
    13
    Thanked 349 Times in 345 Posts
    Quote Originally Posted by xelawho View Post
    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, it’s 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.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by jcobban View Post
    So how do I reliably set the type of a button under IE7?
    Code:
    <!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.
    Last edited by DaveyErwin; 09-21-2011 at 08:28 PM.

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    What?
    Code:
    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 ...

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    cross browser way ...
    tested with ie6, ie7, ie8 and firefox6

    Code:
    <!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>
    Last edited by DaveyErwin; 09-21-2011 at 10:40 PM.

  • #13
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by xelawho View Post

    (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


    Code:
    <!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>

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by DaveyErwin
    Problem, input elements have no innerHTML
    Solution, button elements do have innerHTML
    well looky there:
    Code:
    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

  • #15
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by devnull69 View Post
    What?
    Code:
    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 ...
    Quote Originally Posted by jcobban View Post
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •