www.webdeveloper.com
Results 1 to 5 of 5

Thread: innerHtml with form elements Problem??

  1. #1
    Join Date
    Aug 2011
    Posts
    3

    Question innerHtml with form elements Problem??

    when i use innerHtml to add form elements, it causes some problems like ..hm.. the form elements are always created and destroyed immediately. I havent solved it, please help.

    Code:
    <script type="text/javascript">
    <!--
    function showtext(what){
    document.getElementById('text').innerHTML="<input type='password' name='pass'>";
    }
    function hidetext(what){
    document.getElementById('text').innerHTML="Login";
    }
    //-->
    </script>
    
    <div id='text' onMouseOver="showtext();" onMouseOut="hidetext();">Login</div>

  2. #2
    Join Date
    Aug 2011
    Posts
    3
    Is there someone that may help me?

  3. #3
    Join Date
    Nov 2008
    Location
    Atlanta, GA
    Posts
    64
    The problem has to do with event bubbling. As soon as you mouseOver the text and it is replaced with an input element it triggers the mouseOut event. Unfortunately, you will not get very far using inline event triggers.

    You should either A) Learn more about cross-browser event binding. B) Use jQuery. Or, C) try a different approach such as a button that shows/hides your login form.

    I am not trying to be rude; hopefully this information saves you some frustration.

    I wish you luck. May the source be with you

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    it would be easier to hide the form and show it. you should really only use innerHTML for altering plain text, not appending new elements. - this is a good place to start - http://www.javascriptkit.com/javatutors/dom2.shtml

  5. #5
    Join Date
    Aug 2011
    Posts
    3
    I just want to replace the text with input element. but I thank to you markle976 and DanInMA for your replies.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles