...

View Full Version : problem in adding div element (DOM)



dark0s
06-07-2010, 09:41 PM
I have the following HTML code:


<form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()">
<fieldset>
<legend>Fill up this module</legend>
Private <input id="private" type="radio" name="type" value="private" onclick="return addPrivate()"/><br/>
Community/Organization <input id="organization" type="radio" name="type" onclick="alert('Organization')"/><br/>
<br/>


and the following javascript code:


function addPrivate() {
var root = document.getElementById('registration');
var label1 = document.getElementById('label');
label1.appendChild(document.createTextNode('First Name: '));
var label2 = document.getElementById('label');
label2.appendChild(document.createTextNode('Last Name: '));
var label3 = document.getElementById('label');
label3.appendChild(document.createTextNode('Address*: '));
var label4 = document.getElementById('label');
label4.appendChild(document.createTextNode('Profession: '));
var div = document.createElement('div');
div.appendChild(label1);
div.appendChild(label2);
div.appendChild(label3);
div.appendChild(label4);
root.appendChild(div);
}


but div tag is not added.
Where is the problem?

mrhoo
06-07-2010, 10:24 PM
document.getElementById('label');

do you want to create a label element here?

You can't have 4 elements with the same id.

If you have more than one, the append won't know which one to append.

Show the code where you define the elelement with id="label"....

dark0s
06-07-2010, 10:27 PM
Excuse me, in fact. now my javascript code is the following, but doesn't work:



function addPrivate() {

var root = document.getElementById('registration');
var label1 = document.createElement('label');
label1.appendChild(document.createTextNode('First Name: '));
var label2 = document.createElement('label');
label2.appendChild(document.createTextNode('Last Name: '));
var label3 = document.createElement('label');
label3.appendChild(document.createTextNode('Address*: '));
var label4 = document.createElement('label');
label4.appendChild(document.createTextNode('Profession: '));

var div = document.createElement('div');

var input1 = createElement('input');
input1.type='text';
input1.name='fname';
var input2 = createElement('input');
input2.type='text';
input2.name='lname';
var input3 = createElement('input');
input3.type='text';
input3.name='address';
var input4 = createElement('input');
input4.type='text';
input4.name='profession';

var br1 = document.createElement('br');
var br2 = document.createElement('br');
var br3 = document.createElement('br');
var br4 = document.createElement('br');

div.appendChild(label1);
div.appendChild(input1);
div.appendChild(br1)
div.appendChild(label2);
div.appendChild(input2);
div.appendChild(br2)
div.appendChild(label3);
div.appendChild(input3);
div.appendChild(br3)
div.appendChild(label4);
div.appendChild(input4);
div.appendChild(br4)
root.appendChild(div);

}


The HTML code is the same of previous post.

gizmo1650
06-08-2010, 04:06 AM
how are you viewing the html, in most browsers view-source just gives you the original file, try using the developer's tools. (F12 in IE8 and maybe earlier versions.)

mrhoo
06-08-2010, 04:21 AM
It would work in most browsers if you created the input elements with
document.createElement('input') instead of createElement('input').

You do have to call the function from somewhere,
after the element with the id 'registration' has loaded.


function addPrivate(id){
var root= document.getElementById(id);
if(!root)throw 'No element #'+id;

var label1= document.createElement('label');
label1.appendChild(document.createTextNode('First Name: '));
var label2= document.createElement('label');
label2.appendChild(document.createTextNode('Last Name: '));
var label3= document.createElement('label');
label3.appendChild(document.createTextNode('Address*: '));
var label4= document.createElement('label');
label4.appendChild(document.createTextNode('Profession: '));
var div= document.createElement('div');
var input1= document.createElement('input');
input1.type= 'text';
input1.name= 'fname';
var input2= document.createElement('input');
input2.type= 'text';
input2.name= 'lname';
var input3= document.createElement('input');
input3.type= 'text';
input3.name= 'address';
var input4= document.createElement('input');
input4.type= 'text';
input4.name= 'profession';
var br1= document.createElement('br');
var br2= document.createElement('br');
var br3= document.createElement('br');
var br4= document.createElement('br');
div.appendChild(label1);
div.appendChild(input1);
div.appendChild(br1)
div.appendChild(label2);
div.appendChild(input2);
div.appendChild(br2)
div.appendChild(label3);
div.appendChild(input3);
div.appendChild(br3)
div.appendChild(label4);
div.appendChild(input4);
div.appendChild(br4)
root.appendChild(div);
}
onload= function(){addPrivate('registration')}


Or condense it a little

function make(tag, atts, text, pa){
tag= document.createElement(tag);
if(atts){
for(var p in atts) tag[p]= atts[p];
}
if(text) tag.appendChild(document.createTextNode(text));
if(pa && pa.nodeType== 1) pa.appendChild(tag);
return tag;
}
function addPrivate(id){
var root= document.getElementById(id), div= make('div');
make('label','','First Name: ', div);
make('input',{type:'text',name:'fname'},'',div);
make('br','','',div);
make('label','','Last Name: ', div);
make('input',{type:'text',name:'lname'},'',div);
make('br','','',div);
make('label','','Address*: ', div);
make('input',{type:'text',name:'address'},'',div);
make('br','','',div);
make('label','','Profession: ', div);
make('input',{type:'text',name:'profession'},'',div);
make('br','','',div);
root.appendChild(div);
return div;
}
onload=function(){addPrivate('registration')}

dark0s
06-08-2010, 05:23 AM
but I want create div element only when I click on radio button and not at load html page.

mrhoo
06-08-2010, 05:30 AM
radiobutton.onclick= function(){addPrivate('registration')}

dark0s
06-08-2010, 05:34 AM
the first function it doesn't work both at onclick event and at onload event.

dark0s
06-08-2010, 06:44 AM
How can solve this problem?
I notice that Javascript doesn't work in any case. You think that JQuery library manage better DOM than simple Javascript?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum