create select element [Archive]

Click to See Complete Forum and Search --> : create select element

doug777

10-28-2004, 06:20 AM

Can anyone help?

I am trying to create a select element and populate it with the same options that are in the select element in the html code.

The user may click the 'More' button to add the line shown in the html as many times as required. The name of the elements is updated each time by adding the number in the global variable rmblocks. The line is added to the displayed page correctly and the input elements pass the correct data forward, but inspecting the Form array on the subsequent page shows that the select elements BlkSeason1 etc from the javascript are not present. The html select element is correct and contains the options shown.

On the displayed page, the select elements from the javascript appear but have no options, presumably because the select element has not been created correctly or not added to the form correctly, even though it has been added to the document correctly.

I can't see what's wrong, can anyone help?

Doug - code follows:-

<body>
<script language="JavaScript" type="text/javascript">

</script>
<form name="addcontract" method="post" action="test_processor.cfm">
<p>Up to
<input name="MaxRms" type="text" id="MaxRms" value="10" size="4" maxlength="3" />
rooms may be blocked for up to
<input name="BlkMinusDays" type="text" id="BlkMinusDays" value="0" size="4" maxlength="2" />
days before check in during
<select name="BlkSeason" id="BlkSeason">
<option value="Regular">Regular</option>
<option value="High">High</option>
<option value="Peak">Peak</option>
</select>season.</p>
<p id="be" align="center"><input name="blockage" type="button" id="blockage" value="More" onclick="addRmBlocks()" /></p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>
</body>

Kor

10-28-2004, 06:49 AM

addcontract.appendChild(elem2);
...

I think it is not a proper reference. Sould have been
document.forms['addcontract']

But even so, it looks like you have mixed the classical forms reference with the DOM reference...

If you want to keep name as reference why not use:

document.getElementByName('addcontract')
or even
document.getElementsByTagName('form')[0]

as root to appent the childs at?

doug777

10-28-2004, 07:02 AM

It's odd that all the other elements work correctly.

What is different about the select element?

I couldn't find any reference to creating a select element in any book or anywhere on the web, though there are endless references to populating them with their options.

Anyway, I'll try rewriting as you suggest.

Thanks

Charles

10-28-2004, 07:03 AM

The second chapter of the DOM level 1 (http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html) spec. is specific to HTML and includes that old Netscape document object model. This has come to be know as DOM level 0. And while there's nothing really wrong with mixing DOM 0 and DOM 1 it is a little yucky.

Kor

10-28-2004, 07:20 AM

Anyway:
addcontract.appendChild(elem2);
addcontract.appendChild(elem3);
addcontract.appendChild(elem4);

Seems not to be a correct reference (maybe for IE only)

Shouldn't have been:
document.addcontract.appendChild(elem2);
document.addcontract.appendChild(elem3);
document.addcontract.appendChild(elem4);
?

perhaps it would have been simplier whit this as a direct reference passed as parameter:

function addRmBlocks(f){
//now f is the root
...
}

...

<input name="blockage" type="button" id="blockage" value="More" onclick="addRmBlocks(this.form)" />

doug777

10-28-2004, 08:57 PM

I originally had document.addcontract, but removed document because (although in ie it makes no difference to the text elements) if you put this into the line that (is supposed to) add the select element to the form, you get a strange effect in the browser:

The new select element appears in the correct poition, but the rest of the line appears about ten lines below with white space in between. When you click the 'More' button a second or more times, not only is this effect duplicated, but a blank option box pops up on the previous select element which cannot be closed.

(This has reminded me that the line setting the size of the select element should be deleted - this was something I tried when I had this problem before.)

This strange effect must be a clue to what's wrong, but it sure baffles me.

Thanks for your idea about passing this.form to the function, this makes things simpler, but makes the problem above occur.

There is no other change. The text elements work correctly, but the select elements in the function are not added to the form.

Has anyone else ever tried to create a select element dynamically? There does seem to be something odd about this element.

Doug

javaNoobie

10-28-2004, 09:05 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
function addSelect(f){
var txt, op;
var selectEle = document.createElement('select');
for(var i=0;i<4;i++){
op = document.createElement('option');
txt = document.createTextNode('Some Text');
op.setAttribute('value',i);
op.appendChild(txt);
selectEle.appendChild(op);
}
f.appendChild(selectEle);
}
</script>
</head>
<body>
<form>
<button onclick="addSelect(this.form)">Add</button>
</form>
</body>
</html>

doug777

10-28-2004, 09:26 PM

Have tried JavaNoobie's suggestion and it functions exactly as before:

Select element is not added to form and is displaced on the browser page.

doug777

10-28-2004, 09:52 PM

Many apologies to JavaNoobie.

This does work.

The key is that the options elements must be filled before the select element is added to the form.

Thanks very much !!!

javaNoobie

10-28-2004, 10:26 PM

No problem :)