Question

I’m currently learning about HTML,PHP,JavaScript and other fun web stuff. At this point, I managed to create a nice web form all with HTML,CSS and PHP.

Some days ago I wanted to add some dynamic options with JavaScript but now I’m hitting a wall. Instead of having my form written into a html file, I decided to put it into a .js file and have it built by javascript. Here’s how I’m doing it :

<!-- Insert the form into <div id=field> -->
...
document.getElementById(field).innerHTML +=
'<label>Name'
   +'<span class="small">ex: stg_testdb1</span>'
+'</label>'
+'<input type="text" name="name" id="name" />';

document.getElementById(field).innerHTML +=
'<label>Layer</layer>'
 +'<span class="small">ex: stg_testdb1</span>'
 +'<select name="layer" id="layer"/>'
   +'<option value="Development">D</option>'
   +'<option value="QA">A</option>'
   +'<option value="Staging">S</option>'
   +'<option value="Production">P</option>';
 +'</select>';
....

And here is my CSS code for the “select”, “input” and “label” tags

#stylized select{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:145px;
float:left;
}

When I write my form in pure HTML, everything works perfectly. Here is a picture of a part of the form :

But when I write it in javascript using innetHTML += everything seems to work fine except for drop box (the select field) :

I’m a bit confused since the css stay exactly the same. Also, if I try to add another text field under the first one, everything will be fine and well formated.

Since I’m new into web development, I guess I’m missing something big? Also, I’m pretty sure that inserting code as I am doing is not the right thing to do, but for now it’s almost working well 😉

Answer 1

I don’t know if it’s the solution, but in your JS, there is:

<label>Layer</layer>

I think you meant

<label>Layer</label>