Creating <option> with javascript

[Mort]

Hey all
Am trying to make a script to dynamically create a form. All is going good except for creating the select section.

I am using a select box to select the field type (text, password, radio, checkbox, select etc), which will then write to a DIV that will contain the field input.

The specific problem I am facing is the SELECT seems to automatically close the tag before I can put any options.

document.getElementById('field1').innerHTML = "<select name=\""+document.formaform.field_name.value+"\">";
for (i=0; i < document.formaform.field_options.value; i++) {
document.getElementById('field1').innerHTML += "<option>a</option>";
}
document.getElementById('field1').innerHTML += "</select>";

This outputs the HTML as follows

<div id="field1"><select name="gggg"></select>aaaa</div>

So it loops the option bit the correct amount of times, it just seems to be ignoring the tags

any help? also i have prob explained it rubbishly so pls say and i will reiterate my point

 

[marc2003]

use a variable and assign all the html to that.

var text = '<option....
text += 'gdkgkdgkdfgkdfg

only use innerHTML line of code once to write the complete variable out

document.getElementById('field1').innerHTML = text;

 

[Mort]

worked a treat, cheers dude!

 

[Mort]

ok next bit (sorry am a PHP dev, only been getting into useful javascript / ajax bits recently)

now I want another bit where you select how many options you want for the select / radio / checkbox, and it brings up an array of inputs so you can specify the title and value of each option.

my new problem is how do I pass a dynamic field name to the script so I get the value of another input? Ie.

for (i=0; i < document.formaform.field_options.value; i++) {
	document.getElementById('num_options').innerHTML += "Title - <input type=\"input\" name=\"option_title_"+i+"\"> Value - <input type=\"input\" name=\"option_value_"+i+"\"><br>\n";
}

This loops out however many inputs are needed, and names the fields using the i counter.

Then when it creates the actual element, I want it to put the titles and values next to / in the corresponding option

for (i=0; i < document.formaform.field_options.value; i++) {
	var title_name = document.getElementById('option_title_'+i).value;
	var value_name = document.getElementById('option_value_'+i).value;
	document.getElementById('field1').innerHTML += "<input type=\"radio\" name=\""+document.formaform.field_name.value+"\" value=\""+document.formaform.value_name.value+"\">"+document.formaform.title_name.value+"<br>\n";
}

I know this is wrong because its looking for a field named "title_name", so how do I get it to put the proper field name in fron that variable?

any help is much appreciated. also any good resources for people learning javascript? as i said i am a php dev so am used to the great support and examples of php.net. I am looking about on w3schools but anything else would be appreciated.

 

[Mort]

figured it out, the input i was trying to extract a value from had no id, and i was using getElementById.... lol

quite impressed i figured it out though as have about as much javascript experience as a piece of cheese

suprisingly easy to pickup though with decent knowledge of another coding language

 

[Sic]

suprisingly easy to pickup though with decent knowledge of another coding language

In my experience, most languages are. Having said that, it's only applied to PHP, Javascript and Java with me so far, but it went well all the same!

 

[ringo747]

figured it out, the input i was trying to extract a value from had no id, and i was using getElementById.... lol

quite impressed i figured it out though as have about as much javascript experience as a piece of cheese

suprisingly easy to pickup though with decent knowledge of another coding language

just out of interest mate, was there a requirement to code this in javascript?

I'm just thinking what happens if people have scripting disabled in their browser.

Sorry to hijack thread but just curious to see what the pros say on this

 

[Mort]

just out of interest mate, was there a requirement to code this in javascript?

I'm just thinking what happens if people have scripting disabled in their browser.

Sorry to hijack thread but just curious to see what the pros say on this

not really a requirement, but just fancied it, as it can update on the fly without reloading the whole page. gonna add some ajax as well as i may as well make use of my php knowledge

i am building it as a timer saver for myself, and when its advanced enough it will go into the CMS I am building for the company i work for

 

[ringo747]

good stuff - was just curious to know as i've been playing about with php/ajax/javascript for the past while but have been trying to stay away from javascript stuff for sites on the public internet as you must cater for everyone but i guess if using it internally then you can say that javascript is required for full functionality. Sorry for hijacking the thread!

 

[Sic]

my advice would be to develop your sites so that they operate entirely without javascript first. This may mean an increased amount of submit buttons for funky forms like the op is after, but it's all to make it work entirely javascript-less. Then, pick a javascript library - prototype, mootools, jquery, whatever you fancy (jquery!) and begin to make each page easier/more fun/seamless/intuitive using javascript. So far, this is the most foolproof way I've found of making sites with javascript that degrades gracefully

 

[RobH]

Don't forget YUI either, that's also a good javascript library and tested with a huge number of browsers.