SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Skookum's Avatar
    Join Date
    Sep 2006
    Location
    Idaho
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Type property in IE

    I am trying to change a field from hidden to a checkbox. And I am able to do this fine in FireFox but not in IE.

    Form Code
    Code:
    <input type='Hidden' id='Heat1' name='mlsoptionsheat[]' value='Ceiling'>Ceiling<br>
    Javascript
    Code:
    document.getElementById('Heat1').type = "checkbox";
    But when I do this in IE I get an error
    Code:
    Line: 321
    Char: 3
    Error:  Could not get the type property.  This Command is not supported.
    Code:  0
    Does anyone have any suggestions for this? Or how I can change a field from hidden to checkbox, or radio button, or type?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you want to do that?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict Skookum's Avatar
    Join Date
    Sep 2006
    Location
    Idaho
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to auto populate a form with different attributes as per what the user selects.

    I orginally had everything using divs and innerHTML but once I moved everything into a table to make it look organized FireFox stopped recognizing the values that were dynamically generated. As per this Thread

    So I have been playing around with it, and I found that I can keep everything in a table as long as the values are already there. So I am creating 300 some odd hidden fields, and I am trying to change them from hidden to text, checkbox, or radio as per the selections the user makes. So far it is working great in FireFox.

    But IE for some reason does not like me changing the type.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Skookum

    Why not let functions create the input tags. If the user chooses A then call a function that create a checkbox, if B is choosen create a input-text etc.

    The code could be added with getElementById('id').innerHTML = "<input ..." or, more advanced (in any case to me) create and adding elements (document.createElement etc)

    Why use tables for layout? If you add a class to every input you can control layout with CSS (position, left etc) and then you would get rid of the problem ;-)

    Michael

  5. #5
    SitePoint Addict Skookum's Avatar
    Join Date
    Sep 2006
    Location
    Idaho
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would that be the correct way of doing this?

    Where I remove all the tables, and just use divs and padding to display the page how I am wanting it to look?

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Don't use innerHTML. It's non-standard and browsers implement it differently, especially when it comes to forms and tables. Stick to DOM0 (the things that NS4.x and IE4 both support) and DOM1+ methods.

    2) There's a bug in IE regarding setting the name attribute on elements created with document.createElement(). These describe the solution:
    Death to bad DOM Implementations (Anthony Lieuallen's version of the function)
    Setting the "name" attribute in Internet Explorer

    3) Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled.

    I suggest you read these:
    Graded Browser Support
    Progressive Enhancement and the Future of Web Design
    Accessibility is seldom just up to the interface developer

    4) I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

    5) I suggest you read these as well: Simple Tricks for More Usable Forms: Labels
    Accessible HTML/XHTML Forms
    Creating Accessible Forms
    Prettier Accessible Forms
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To Kravvitz: Pretty much reading, but interesting.

    To Skoocum: It's not necessary to use div-tags. You could do something like this:

    HTML Code:
    <ul class="myclass" >
    <li>Text here: <input type="text" value="Test" id="id1" class="c2"></li>
    <li>Text here, too: <input type="text" value="Test" id="id2" class="c2"></li>
    <li>More text: <input type="text" value="Test" id="id3" class="c2"></li>
    </ul>
    and the CSS code:
    Code:
    <style type="text/css">
    .myclass{
    padding: 0;
    margin: 0;
    line-height: 200%;
    }
    .c2{
    position: absolute;
    left: 120px;
    }
    </style>
    The HTML-code is in a list, read about semantic markup in some of Kravvitz' links...

    Michael

  8. #8
    SitePoint Addict Skookum's Avatar
    Join Date
    Sep 2006
    Location
    Idaho
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for all the links, I have not had the chance to check them all out yet. And thank you for the help.

    I know that I shouldn't be using innerHTML but to be honest I did not know of any other way to set this up.

    As it stands now I need to have this up and running by Friday. So I will slap to this together as is.

    But after I have everything up and running I will rewrite this section and hopefully do it correctly.

    By any chance do you have any links or tutorials that can show me more about DOM and how to use it properly? I am fairly new to JavaScript.

    Thanks hegelund for the suggestions and the code, I will have to give that a try and see what happens. And I did read about the semantic scripting and realized that I very rarely if ever write any of my scripts to follow those guidelines.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great links, Kravvitz!

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Addict Skookum's Avatar
    Join Date
    Sep 2006
    Location
    Idaho
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect. You're a life saver Kravvitz.

    Thank you


Bookmarks

Posting Permissions

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