SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot jooles's Avatar
    Join Date
    Jun 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forms + innerHTML + FF = A Mess!

    I'm encountering a problem when trying to modify the innerHTML of a div when the div contains a <form></form> element.

    Is there a way to fix this?

  2. #2
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    InnerHTML has its limitations. You're probably better off using the W3C DOM methods, which are more efficient anyway, as they can make modifications without as much reliance on the HTML rendering engine.

  3. #3
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes, you should use createElement and appendChild insted of innerHTML. By using them you will ensure it is acting like you want it too... but one thing people commonly do is try and set an attribute after they create it... remember to set all it's attributes before it is appended.

    -ALL
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Show us the code that doesn't work in Firefox, it might have errors.

  5. #5
    SitePoint Zealot jooles's Avatar
    Join Date
    Jun 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here. I uploaded this so you can see what I'm trying to do. See, it works the first link you click, but after that, you have to click a link twice to make it work properly. It's just weird! I'm new to javascript.

    http://www.gradr.com/woot.php#

  6. #6
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    play with this:

    HTML Code:
    <head>
    <script type="text/javascript">
    
    function stockSymbol(){
    if(document.getElementById('stock').className=='selected') return false;
    document.getElementById('stock').className='selected';
    document.getElementById('company').className='';
    document.getElementById('user').className='';
    //document.getElementById('search').innerHTML='stock symbol | <a href="#" onclick="companyName()">company name</a> | <a href="#" onclick="userName()">user</a>';
    document.getElementById('bar').innerHTML="<form class=poop action=\"http:\/\/www.gradr.com/stocks/search_list.php?search_type=company_name&search_string=\" method=\"get\"><input id=search name=search_string class=box type=text maxlength=25 size=30><input type=\"Submit\" class=go value=\"GO\"><br><font class=detail>enter stock symbol e.g. \"GOOG\"</font><br></form>";
    document.getElementsByName('search_string')[0].focus();
    }
    
    function companyName(){
    if(document.getElementById('company').className=='selected') return false;
    document.getElementById('company').className='selected';
    document.getElementById('stock').className='';
    document.getElementById('user').className='';
    //document.getElementById('search').innerHTML='<a href="#" onclick="stockSymbol()">stock symbol</a> | company name | <a href="#" onclick="userName()">user</a>';
    document.getElementById('bar').innerHTML="<form class=poop action=\"http:\/\/www.gradr.com/stocks/search_list.php?search_type=company_name&search_string=\" method=\"get\"><input id=search name=search_string class=box type=text maxlength=25 size=30><input type=\"Submit\" class=go value=\"GO\"><br><font class=detail>enter company name e.g. \"Google\"</font><br></form>";
    document.getElementsByName('search_string')[0].focus();
    }
    
    function userName(){
    if(document.getElementById('user').className=='selected') return false;
    document.getElementById('user').className='selected';
    document.getElementById('stock').className='';
    document.getElementById('company').className='';
    //document.getElementById('search').innerHTML='<a href="#" onclick="stockSymbol()">stock symbol</a> | <a href="#" onclick="companyName()">company name</a> | user';
    document.getElementById('bar').innerHTML="<form class=poop action=\"http:\/\/www.gradr.com/stocks/search_list.php?search_type=company_name&search_string=\" method=\"get\"><input id=search name=search_string class=box type=text maxlength=25 size=30><input type=\"Submit\" class=go value=\"GO\"><br><font class=detail>enter username e.g. \"sona\"</font><br></form>";
    document.getElementsByName('search_string')[0].focus();
    }
    
    </script>
    <style type="text/css">
    .selected{
    	text-decoration:none;
    	color:#000000;
    	cursor:default;
    }
    </style>
    </head>
    
    
    <div id="search">
    
    <a href="#" id="stock" class="selected" onclick="return stockSymbol()">stock symbol</a> | <a href="#" id="company" onclick="return companyName()">company name</a> | <a href="#" id="user" onclick="return userName()">user</a> 
    
    </div>
    
    <div id="bar">
    
    <form class=poop action="http://www.gradr.com/stocks/search_list.php?search_type=company_name&search_string=" method="get"><input id=search name=search_string class=box type=text maxlength=25 size=30><input type="Submit" class=go value="GO"><br><font class=detail>enter stock symbol e.g. "GOOG"</font><br></form>
    
    </div>
    I have it never actually alter the innerHTML of your problem, what i do insted is created a simple stylesheet that faked that it was not a link when it was... then on the one that was selected i just returned false causing it not to do anything.
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site


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
  •