SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up radionbutton with createElement

    HI

    I have three checkboxes on my html page and i am converting them to radiobuttons by using DOM dynamically but the i cannot select them then in IE7 but it is working fine in firefox????
    i have checked the code generated and it is not putting the name in radiobuttons tag?????
    how can i make it run in both IE and firefox????
    here is my code
    HTML Code:
    function convert()
    {
    var divText = document.getElementById('divText');
    var allChild = divText.childNodes;
     
     
    for(var x=0 ;x<allChild.length;x++){
    if(allChild[x].nodeName.toLowerCase()== 'input')
    { //alert(allChild[x].nodeName.getAttribute('type');
    //alert(allChild[x].nodeName);
    var rbo = document.createElement('input');
    //alert(typeOf(IE));
    rbo.setAttribute('type','radio');
    rbo.setAttribute('name','r');
     
    rbo.setAttribute('value' ,allChild[x].getAttribute('value'));
    alert(document.getElementById('divText').innerHTML);
    divText.replaceChild(rbo,allChild[x]);
    } 
    }
    }
    its urgent plzzz.....
    regards
    phphelp

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    IE is notorious for not implementing setAttribute properly. Try doing this instead:
    Code:
    rbo.name = 'r';

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You can't set the name after creating the element in IE you have do do it during the create. For example:

    Code:
    /*@cc_on
        @if (@_jscript)
        var newR = document.createElement("<input name='aname'>");
    @else */ 
       var newR = document.createElement("input");
        newR.name = 'aname';
    /* @end @*/
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried this but not worked????
    its urgent plzzz.....
    regards
    phphelp

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the following works for me....
    HTML Code:
    var nameDiv = null; 
     try 
     { 
      nameDiv = document.createElement("<div class='recipientName'>");
     } catch(err) {
      nameDiv = document.createElement("div");
      nameDiv.setAttribute("class", "recipientName");
     }
    or try this one:
    HTML Code:
    function convert()
    {
    var divText = document.getElementById('divText');
    var allChild = divText.childNodes;
    
    
    for(var x=0 ;x<allChild.length;x++)
    {
    if(allChild[x].nodeName.toLowerCase()== 'input')
    { 
    var val = allChild[x].getAttribute('value');
    var rbo = "<input type='radio' name='r' value='" +val+ "' />";
    
    divText.replaceChild(rbo,allChild[x]);
    } 
    }
    }

  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)
    satrun77, there is no need to set the class that way. className works fine in IE just like other browsers.

    The second isn't valid. If it works at all, then IE is not following the DOM specs.

    Here are two articles related to felgall's reply:
    Death to bad DOM Implementations (Anthony Lieuallen's version of the function)
    Setting the "name" attribute in Internet Explorer
    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
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Both of those articles use try/catch while my version simply tests if the browser is running JScript (IE) or JavaScript (other browsers) by using IE conditional code which is treated as comments in JavaScript. I know my code works because I actually used that exact code in several scripts. I would expect that my version is more efficient since browsers other than IE don't need to try the IE version and fail before doing it the correct way since only IE can see the if statement.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right that your variation is more efficient. Does it work in IE5/Mac though?

    The only other problem with it is the potential, however unlikely, of Microsoft fixing both bugs in IE.
    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.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You can always amend the code to test the JScript version for if they fix it.

    Don't konw if it runs for IE/Mac, probably not but then that browser has been officially dead for over 4 years now.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function checkbox2radio(input_object) {
    var newEl = document.createElement("input");
    newEl.setAttribute("type","radio");
    newEl.setAttribute("name",input_object.name);
    newEl.setAttribute("id",input_object.id);
    newEl.setAttribute("value",input_object.value);
    newEl.setAttribute("defaultValue",input_object.defaultValue);
    newEl.setAttribute("title", input_object.title);
    input_object.parentNode.replaceChild(newEl,input_object);
    }
    Haven't checked this, but doesn't checkboxes and radio buttons have different values, "checked" or "on"? Can't remember. If it does you may want to take this into account.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  11. #11
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it used checked. I haven't tried in IE, but for sure FF you can even pass true and false value

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The following line is invalid in IE because you can't add a name to an existing element in IE, you have to give it a name at the time you create it.

    newEl.setAttribute("name",input_object.name);
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    this works in IE.....
    Code:
    <&#37;=request.form("name2")%>
    <form action="test.asp" method="post">
    <input name="name1" onblur="this.name='name2'">
    <input type="submit">
    </form>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but that element wasn't created with document.createElement().
    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.

  15. #15
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kravvitz
    Yes, but that element wasn't created with document.createElement()
    That was a basic example of altering a name on an existing element after being applied to the page. Works in IE. So does this.
    Code:
    <script type="text/javascript">
    function checkbox2radio(input_object) {
    var newEl = document.createElement("input");
    newEl.setAttribute("type","radio");
    newEl.setAttribute("name",input_object.name+"b");
    newEl.setAttribute("id",input_object.id);
    if(input_object.checked) chk=1;
    newEl.setAttribute("checked",input_object.checked);
    newEl.setAttribute("value",input_object.value);
    newEl.setAttribute("defaultValue",input_object.defaultValue);
    newEl.setAttribute("title", input_object.title);
    input_object.parentNode.replaceChild(newEl,input_object);
    if(chk==1){
    for(i=0;i<document.getElementsByTagName("input").length-1;i++){
    document.getElementsByTagName("input")[i].checked=false;
    }
    document.getElementById('testinput').checked=true;
    }
    }
    </script>
    <&#37;=request.form("name1")%> & <%=request.form("name1b")%>
    <form action="test.asp" method="post">
    <a onmouseover="checkbox2radio(document.getElementById('testinput'))" href="#">Roll Over Here to Change</a>
    <input type="checkbox" name="name1" title="test" id="testinput" value="64" checked=true>
    <input type="radio" name="name1b" title="test" id="testinput2" value="128" checked=true>
    <input type="submit">
    </form>
    Only problem was the one I mentioned earlier with the values. Well, actually it was the selected. To get it to work in IE I had check if the current checkbox was selected, and to give "chk" a value of 1. Then, after the checkbox was changed to a radio input and applied to the screen I had to set all the radios to "checked=false" and check the current input to true. Firefox worked quite well as it automatically canceled the other selected radio.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •