www.webdeveloper.com
Results 1 to 11 of 11

Thread: adding a dynamically created element

  1. #1
    Join Date
    Mar 2008
    Posts
    11

    adding a dynamically created element

    I'm trying to dynamically add an input box element directly after an input checkbox, onclick of that checkbox. I am able to create the input box dynamically but since the checkbox I'm trying to add after is not a parent I can't append a child to it. How can I get around this? Which function do I use?

    Thanks

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473

  3. #3
    Join Date
    Mar 2008
    Posts
    11
    function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
    }
    If I have something like the following:

    <span id="myspan">
    checkbox1
    checkbox2 [textbox]
    [...]
    </span>

    Textbox is what I want to add/remove dynamically and it can be next to any number of checkboxes depending on which are clicked by the user. Then parent is the span, correct? But what would node and referenceNode be?
    Thanks

  4. #4
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    You can check this also.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>DOM insertAfter</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var aInput=document.getElementById('myspan').getElementsByTagName('input');
    for(var i=0; i<aInput.length; i++) {
        aInput[i].onclick=new Function('addDelete(this)');
        }
    }
    
    function addDelete(obj) {
    var parentSpan=document.getElementById('myspan');
    if(obj.nextSibling.nodeName!='INPUT') { // add
        var oInputText=document.createElement('input');
        oInputText.setAttribute('type', 'text');
        parentSpan.insertBefore(oInputText, obj.nextSibling);
        }
    else { // delete
        parentSpan.removeChild(obj.nextSibling);
        }
    }
    </script>
    
    </head>
    <body>
    <span id="myspan">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </span>
    </body>
    </html>

  6. #6
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Here's another one, although Fang's is more unobtrusive:

    The script:

    Code:
    function showDiv( id ) { 
      document.all.textBox01.style.visibility = 'hidden'; 
      document.all.textBox02.style.visibility = 'hidden'; 
      document.all.textBox01.value = ''; 
      document.all.textBox02.value = ''; 
      document.all[ id ].style.visibility = 'visible'; 
      document.all[ id ].focus(); 
    }


    Place in the body:

    Code:
    Add your e-mail address here: <input type=radio name=radioBtn onClick="showDiv( 'textBox01' );"> 
    <input type=text  name=textBox01 size=30 style="visibility:hidden"> 
    <br>
    Give us your FAX number: <input type=radio name=radioBtn onClick="showDiv( 'textBox02' );"> 
    <input type=text  name=textBox02 size=20 style="visibility:hidden">

  7. #7
    Join Date
    Mar 2008
    Posts
    11
    Thanks!!

  8. #8
    Join Date
    May 2008
    Posts
    2
    Quote Originally Posted by LeeU
    Here's another one, although Fang's is more unobtrusive:

    The script:

    Code:
    function showDiv( id ) { 
      document.all.textBox01.style.visibility = 'hidden'; 
      document.all.textBox02.style.visibility = 'hidden'; 
      document.all.textBox01.value = ''; 
      document.all.textBox02.value = ''; 
      document.all[ id ].style.visibility = 'visible'; 
      document.all[ id ].focus(); 
    }
    Place in the body:

    Code:
    Add your e-mail address here: <input type=radio name=radioBtn onClick="showDiv( 'textBox01' );"> 
    <input type=text  name=textBox01 size=30 style="visibility:hidden"> 
    <br>
    Give us your FAX number: <input type=radio name=radioBtn onClick="showDiv( 'textBox02' );"> 
    <input type=text  name=textBox02 size=20 style="visibility:hidden">
    Greetings!

    I used this code in a registration form and it works fine in Safari and Explorer on both the Mac and PC but it won't work in Firefox. I know the example does so I was wondering what I may have missed or if there could be a conflict with other scripts in my php page?

    This is my code in the head:

    <script language="JavaScript">
    function showDiv( id ) {
    document.all.textBox01.style.visibility = 'hidden';
    document.all.textBox01.value = '';
    document.all[ id ].style.visibility = 'visible';
    document.all[ id ].focus();
    -->
    </script>}

    And the code in the body. I added an onBlur line that works great too - but removing it does not make it work in Firefox.

    <td>Click here to enter special code: <input type=radio id=RegistrationFee name=RegistrationFee onClick="showDiv( 'textBox01' );">
    <input type=text name=textBox01 size=5 style="visibility:hidden" onBlur="form.Amount.value = value" /> </td>

    I was wondering if anyone may have some thoughts. I've been trying different things but can't find the error.

    Thanks so much!

  9. #9
    Join Date
    May 2008
    Posts
    2
    Quote Originally Posted by rockymtnhi
    Greetings!

    I used this code in a registration form and it works fine in Safari and Explorer on both the Mac and PC but it won't work in Firefox. I know the example does so I was wondering what I may have missed or if there could be a conflict with other scripts in my php page?

    This is my code in the head:

    <script language="JavaScript">
    function showDiv( id ) {
    document.all.textBox01.style.visibility = 'hidden';
    document.all.textBox01.value = '';
    document.all[ id ].style.visibility = 'visible';
    document.all[ id ].focus();
    -->
    </script>}

    And the code in the body. I added an onBlur line that works great too - but removing it does not make it work in Firefox.

    <td>Click here to enter special code: <input type=radio id=RegistrationFee name=RegistrationFee onClick="showDiv( 'textBox01' );">
    <input type=text name=textBox01 size=5 style="visibility:hidden" onBlur="form.Amount.value = value" /> </td>

    I was wondering if anyone may have some thoughts. I've been trying different things but can't find the error.

    Thanks so much!
    Noticed the } was out of place but it didn't help putting it back in.

    Thank you.

  10. #10
    Join Date
    Dec 2002
    Posts
    23

    Need the Element to be more specific

    The code works great...the one from Fang, however, I need it to be more specific. I have several 'input' tags on the page and this allows the text box to show on every one of them. I want it to be on the ones that are only referring to checkboxes. I've tried everything I can think of and can't get it to refer just to checkboxes. Any suggestions?

    function addElement() {
    var aInput=document.getElementById('myspan').getElementsByTagName('input');Need this to refer to Checkboxes only
    for(var i=0; i<aInput.length; i++) {
    aInput[i].onclick=new Function('addDelete(this)');
    }
    }
    function addDelete(obj) {
    var parentSpan=document.getElementById('myspan');
    if(obj.nextSibling.nodeName!='INPUT') { // add
    var oInputText=document.createElement('input');
    oInputText.setAttribute('type', 'textarea');
    parentSpan.insertBefore(oInputText, obj.nextSibling);
    }
    else { // delete
    parentSpan.removeChild(obj.nextSibling);
    }
    }
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }

    addLoadEvent(function() {
    addElement();
    });

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function addElement() {
    var aInput=document.getElementById('myspan').getElementsByTagName('input');Need this to refer to Checkboxes only
    for(var i=0; i<aInput.length; i++) {
    if(aInput[i].getAttribute('type')=='checkbox') {aInput[i].onclick=new Function('addDelete(this)');}
    }
    }

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