Dynamic Form

[Nitestarz]

I have a button that when clicked uses the below funciton to add an input box to the page. How can I get it to show a label before the input box:

Name: input box goes here

function add_student(){

var StudentFirstnam e=document.crea teElement('inpu t');
StudentFirstnam e.type='text';
StudentFirstnam e.size='45';
StudentFirstnam e.name='Student 2_Firstname';

document.forms. Registration.ap pendChild(Stude ntFirstname);

}

[gits]

hi ...

i guess you always know how to do that ;) ...

1. create a span-Element
2. create a textNode with createTextNode( 'your_label')
3. appendChild the textnode to the span
4. create your input-Node
5. appendChild the input-node to the span
6. appendChild the span to your form

kind regards

[Nitestarz]

thank you very much! :-)

[gits]

your are always welcome ... ;) come back when you have more questions

kind regards

[Nitestarz]

I am trying to stylize a line. What did I do wrong? It doesnt want to work! I have:

var student_text = document.create TextNode("Stude nt Information");
student_text.st yle.color = "white";
student_text.st yle.backgroundC olor = "567297";
student_text.st yle.fontWeight = "bold" ;
student_text.st yle.padding = "2px";
student_text.st yle.width = "100";

document.forms. Registration.ap pendChild(stude nt_text);

[gits]

hmmm ... i think you cannot style a textnode ... only an html-element ... so you need to style the span ... probably you need a second span around your textNode

[Nitestarz]

how do you apply a span around a textnode?

[gits]

createElement one ;) and then appendChild the textnode to it ... you may imagine everything as a tree ... 'every document is a tree' ... so its always the same procedure to create and append nodes ... append makes a child of the node where the node is appended ...

[Nitestarz]

this is where my head starts to spin! :-)

var span_text = document.create Element('span') ;
var span_text.style .color = "white";
var span_text.style .backgroundColo r = "567297";
var span_text.style .fontWeight = "bold" ;
var span_text.style .padding = "2px";
var span_text.style .width = "100";

document.firstn ame_text.append Child(span_text );

is this right?

[gits]

i think thats right ... to that span-node you have to add the textnode ... when its not working please post the code for the entire creation of your nodes ... and add the code-tags to it ... it simplifies reading of the code ...

kind regrads

[gits]

this is where my head starts to spin! :-)

var span_text = document.create Element('span') ;
var span_text.style .color = "white";
var span_text.style .backgroundColo r = "567297";
var span_text.style .fontWeight = "bold" ;
var span_text.style .padding = "2px";
var span_text.style .width = "100";

document.firstn ame_text.append Child(span_text );

is this right?

aaarg ;)) ... no ... don't do the declaration in every line ... remove the var-keyword except of the first line ;)

[Nitestarz]

here is the javascript:

[CODE=javascript]function add_student(){

//// Create Line breaks ////
var linebreak0=docu ment.createElem ent("p");

//// Create text ////
var firstname_text = document.create TextNode("First Name: ");

//// Create input boxes ////
var StudentFirstnam e=document.crea teElement('inpu t') ;
StudentFirstnam e.type='text';
StudentFirstnam e.size='45';
StudentFirstnam e.name='Student 2_Firstname';

//// Create span ////
var span_text = document.create Element('span') ;
var span_text.style .color = "white";
var span_text.style .backgroundColo r = "567297";
var span_text.style .fontWeight = "bold" ;
var span_text.style .padding = "2px";
var span_text.style .width = "100";

//// Append ////

document.forms. Registration.ap pendChild(lineb reak0);
document.firstn ame_text.append Child(span_text );
document.forms. Registration.ap pendChild(first name_text);
document.forms. Registration.ap pendChild(Stude ntFirstname);

}
[/CODE]
here is the html:
[HTML]<input name="add_stude nts" type="button" class="submit" onClick="add_st udent()" value="Add More Students">[/HTML]

[gits]

notice the every-time redeclaration of var span_text ... remove it except of the first one ...

[Nitestarz]

still doesnt want to work!

[acoder]

still doesnt want to work!

Are you sure you have it like this:
[CODE=javascript]//// Create span ////
var span_text = document.create Element('span') ;
span_text.style .color = "white";
span_text.style .backgroundColo r = "#567297";
span_text.style .fontWeight = "bold" ;
span_text.style .padding = "2px";
span_text.style .width = "100px";[/CODE]