Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts

    problem in adding div element (DOM)

    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?

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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"....
    Last edited by mrhoo; 06-07-2010 at 10:26 PM.

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by dark0s; 06-07-2010 at 10:58 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Posts
    163
    Thanks
    3
    Thanked 25 Times in 25 Posts
    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.)

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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.

    Code:
    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
    Code:
    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')}
    Last edited by mrhoo; 06-08-2010 at 05:25 AM. Reason: reduces var statements

  • #6
    New Coder
    Join Date
    Jan 2010
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    but I want create div element only when I click on radio button and not at load html page.

  • #7
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    radiobutton.onclick= function(){addPrivate('registration')}

  • #8
    New Coder
    Join Date
    Jan 2010
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    the first function it doesn't work both at onclick event and at onload event.

  • #9
    New Coder
    Join Date
    Jan 2010
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

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