adding a dynamically created element

**black_lotus** · 03-27-2008, 02:16 PM

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

**gil davis** · 03-27-2008, 02:47 PM

http://javascript.internet.com/snipp...sertafter.html

**black_lotus** · 03-27-2008, 03:35 PM

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

**LeeU** · 03-27-2008, 03:48 PM

You can check this also.

**Fang** · 03-27-2008, 04:19 PM

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>

**LeeU** · 03-28-2008, 10:07 AM

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">

**black_lotus** · 03-28-2008, 01:51 PM

Thanks!!

**rockymtnhi** · 05-05-2008, 06:23 PM

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!

**rockymtnhi** · 05-05-2008, 08:18 PM

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.

**angeliamy** · 12-07-2009, 11:15 AM

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();
});

**Fang** · 12-07-2009, 12:45 PM

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: adding a dynamically created element

Thread Tools

Display

adding a dynamically created element

Need the Element to be more specific

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions