SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript + FF Browser Issue

    Hi all,

    Why doesn't this work in Firefox but does in IE6...

    JavaScript:
    PHP Code:
     <script language="JavaScript" type="text/javascript">
     <!--
     
     var 
    fieldCount 1;
     function 
    addAnswer() 
     {
             
    fieldCount++;
             var 
    newAnswer document.createElement('input');
             
    newAnswer.type 'text';
             
    newAnswer.name 'answer[]' fieldCount;
             
    newAnswer.id 'answer' fieldCount;
             
    document.getElementById('qs').appendChild(newAnswer);
             
             var 
    newAnswer document.createElement('input');
             
    newAnswer.type 'radio';
             
    newAnswer.name 'answer[]' fieldCount;
             
    newAnswer.id 'answer' fieldCount;
             
    document.getElementById('qs').appendChild(newAnswer);
     }
     
     
    //-->
     
    </script> 
    HTML:
    Code:
     <p id="qs">
     <label for="answer">1)</label>
     <input type="text" name="answer[]" id="answer" value="" />
     <input type="radio" name="correct[]" id="correct" />
     <button onclick="addAnswer(); return False;">Add another</button><br />
     </p>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It all works for me in FF1.5.

    The only error I did spot is in your submit button - return False; should be return false;

    (false is with a small f, not a capital F).

    NickJ

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good spot! Thanks Nick.

    Problem now is my radio buttons. They work fine in Firefox but in IE6 I can only select the first one.

    Any ideas why this is??

    Javascript:
    PHP Code:
     <script language="JavaScript" type="text/javascript">
     <!--
     
     var 
    fieldCount 1;
     function 
    addAnswer() 
     {
             
    fieldCount++;
             var 
    newAnswer document.createElement('input');
             
    newAnswer.type 'text';
             
    newAnswer.name 'answer[]' fieldCount;
             
    newAnswer.id 'answer' fieldCount;
             
    document.getElementById('qs').appendChild(newAnswer);
             
             var 
    newAnswer document.createElement('input');
             
    newAnswer.type 'radio';
             
    newAnswer.name 'correct[]';
             
    newAnswer.id 'correct';
             
    document.getElementById('qs').appendChild(newAnswer);
     }
     
     
    //-->
     
    </script> 
    HTML:
    Code:
     <p id="qs">
     <label for="answer">1)</label>
     <input type="text" name="answer[]" id="answer" value="" />
     <input type="radio" name="correct[]" id="correct" value="" />
     <button onclick="addAnswer(); return false;">Add another</button><br />
     </p>

  4. #4
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is because IE6 has a horrible bug with radio buttons. If you create them dynamically using DOM methods, it will not recognise them, nor add them properly into your form - they'll display, but they'll be completely broken. The only option that I know of is to add them in using innerHTML, in which case they'll work just fine.

    Sucks, I know, but such is the nature of the beast...
    Only dead fish go with the flow

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dek.

    How do I use innerHTML?

  6. #6
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a slightly messy way of doing it:

    Code:
       <script language="JavaScript" type="text/javascript">
       <!--
       
       var fieldCount = 1;
       function addAnswer()
       {
         var qs = document.getElementById('qs');
       
         fieldCount++;
       		
         qs.innerHTML = qs.innerHTML + 
     	  '<input type="radio" name="answer[]'+fieldCount+'" id="answer'+fieldCount+'" />' +
     	  '<input type="radio" name="correct[]'+fieldCount+'" id="correct'+fieldCount+'" />';
       		
       }
       
       //-->
       </script>
    This is completely untested, so apologies if I've made a mistake, but you get the general idea...
    Only dead fish go with the flow


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
  •