Problem changing innherHTML - Please help! 2

[casabella]

I am having problem with a list box. Here is the JS

		var sa = '<SELECT NAME="title" id="titleID" onMouseOver="CheckEntityType()" onFocus="CheckEntityType()">';
		var sb = '<OPTION VALUE="&nbsp;">&nbsp;</OPTION>';
		var sb = '<option value="HEAD OF CORP./ENTITY">HEAD OF CORP./ENTITY</OPTION>';
		var sc = '<option value="VICE PRESIDENT OF CORP./ENTITY">VICE PRESIDENT OF CORP./ENTITY</OPTION>';
		var sd = '<option value="SECRETARY OF CORP./ENTITY">SECRETARY OF CORP./ENTITY</OPTION>';
		var se = '<option value="ASSISTANT SECRETARY">ASSISTANT SECRETARY</OPTION>';
		var sf = '<option value="TREASURER">TREASURER</OPTION>';
		var sg = '<option value="ASSISTANT TREASURER">ASSISTANT TREASURER</OPTION>';
		var sh = '<option value="GENERAL MANAGER">GENERAL MANAGER</OPTION>';
		var si = '<option value="REGISTERED AGENT FOR SERVICE OF PROCESS">REGISTERED AGENT FOR SERVICE OF PROCESS</OPTION>';
		var sj = '</SELECT>'; 
		document.getElementById('p2sbox').innerHTML = sa + sb + sc + sd + se + sf + sg + sh + si  + sj;
		}

Notice variable sa is set to a blank option and yet, this option is does not show. The first option is "HEAD OF CORP./ENTITY" ...

I need that blank option ... I have spent all day trying to solve this one and cannot come up with a solution.

Please help, I am going crazy!

Thanks,


Jose

 

[trollacious]

The error is in the second and third lines of your code. It is doing exactly what you told it to.

Lee

 

[j4606]

        var sa = '<SELECT NAME="title" id="titleID" onMouseOver="CheckEntityType()" onFocus="CheckEntityType()">';
        var [COLOR=red]sb = '<OPTION VALUE="&nbsp;">&nbsp;</OPTION>';[/color]
        var [COLOR=green]sb = '<option value="HEAD OF CORP./ENTITY">HEAD OF CORP./ENTITY</OPTION>';[/color]
        var sc = '<option value="VICE PRESIDENT OF CORP./ENTITY">VICE PRESIDENT OF CORP./ENTITY</OPTION>';
        var sd = '<option value="SECRETARY OF CORP./ENTITY">SECRETARY OF CORP./ENTITY</OPTION>';
        var se = '<option value="ASSISTANT SECRETARY">ASSISTANT SECRETARY</OPTION>';
        var sf = '<option value="TREASURER">TREASURER</OPTION>';
        var sg = '<option value="ASSISTANT TREASURER">ASSISTANT TREASURER</OPTION>';
        var sh = '<option value="GENERAL MANAGER">GENERAL MANAGER</OPTION>';
        var si = '<option value="REGISTERED AGENT FOR SERVICE OF PROCESS">REGISTERED AGENT FOR SERVICE OF PROCESS</OPTION>';
        var sj = '</SELECT>';
        document.getElementById('p2sbox').innerHTML = sa + sb + sc + sd + se + sf + sg + sh + si  + sj;
        }

I don't see where you have the variable sa set to a blank option. You have a variable sb temporarily set to a blank option which is the red colored code. The green colored code will overwrite your sb variable, so you no longer have a blank option. Helping for you with javascripting I can!

 

[casabella]

Thank you guys!

I can't believe I spent all day looking at these lines of code and I did not pickup on that ...

Regards,


Jose

 

[feherke]

Hi

But why all those variables ?

        var sa = '<SELECT NAME="title" id="titleID" onMouseOver="CheckEntityType()" onFocus="CheckEntityType()">';
        s[red]a +[/red]= '<OPTION VALUE="&nbsp;">&nbsp;</OPTION>';
        s[red]a +[/red]= '<option value="HEAD OF CORP./ENTITY">HEAD OF CORP./ENTITY</OPTION>';
        s[red]a +[/red]= '<option value="VICE PRESIDENT OF CORP./ENTITY">VICE PRESIDENT OF CORP./ENTITY</OPTION>';
        s[red]a +[/red]= '<option value="SECRETARY OF CORP./ENTITY">SECRETARY OF CORP./ENTITY</OPTION>';
        s[red]a +[/red]= '<option value="ASSISTANT SECRETARY">ASSISTANT SECRETARY</OPTION>';
        s[red]a +[/red]= '<option value="TREASURER">TREASURER</OPTION>';
        s[red]a +[/red]= '<option value="ASSISTANT TREASURER">ASSISTANT TREASURER</OPTION>';
        s[red]a +[/red]= '<option value="GENERAL MANAGER">GENERAL MANAGER</OPTION>';
        s[red]a +[/red]= '<option value="REGISTERED AGENT FOR SERVICE OF PROCESS">REGISTERED AGENT FOR SERVICE OF PROCESS</OPTION>';
        s[red]a +[/red]= '</SELECT>';
        document.getElementById('p2sbox').innerHTML = sa;
        }

Feherke.

http://rootshell.be/~feherke/

 

[Olavxxx]

I fail to se the purpose of using the variable at all?

<button onclick="document.getElementById('p2sbox').innerHTML = document.getElementById('selectbox').innerHTML">Get List</button>

<span id="p2sbox"></span>


<span id="selectbox" style="visibility:hidden;">
        <select name="title" id="titleID" onMouseOver="CheckEntityType()" onFocus="CheckEntityType()">
        <option VALUE="&nbsp;">&nbsp;</option>
        <option value="HEAD OF CORP./ENTITY">HEAD OF CORP./ENTITY</option>
        <option value="VICE PRESIDENT OF CORP./ENTITY">VICE PRESIDENT OF CORP./ENTITY</option>
        <option value="SECRETARY OF CORP./ENTITY">SECRETARY OF CORP./ENTITY</option>
        <option value="ASSISTANT SECRETARY">ASSISTANT SECRETARY</option>
        <option value="TREASURER">TREASURER</option>
        <option value="ASSISTANT TREASURER">ASSISTANT TREASURER</option>
        <option value="GENERAL MANAGER">GENERAL MANAGER</option>
        <option value="REGISTERED AGENT FOR SERVICE OF PROCESS">REGISTERED AGENT FOR SERVICE OF PROCESS</option>
        </select>

</span>

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[casabella]

DaButcher,

I had what you suggest until I ran into problems.

There are multiple things going on:
(a) Drop down list is inside a layer which is hidden and displayed based on field input

(b) Drop down list can also change to a simple text field (depending on selection made from a 2nd drop-down list).

(c) I have to have a field named title as part of the form. This can be a text field or a drop down

I tried what you suggest and ran into problem because as the form was submitted, the 'action' form found that the field named 'title' was blank. This, of course, was due to the fact that both the hidden (dummy) tag was named title as well as the dynamic field.

So, I figure that I could simply build the select list in JS and get it over with. I tried putting the whole string into a variable but kept getting terminating errors ... and so I decided to break down into lines, thus giving root to the problem to brought me here

feherke,

It was an OFF day for me yesterday ... To tell you the truth, it was no where near the radar ...

Thanks,


Jose

 

[j4606]

why not use dom?

<html>
	<script type="text/javascript">
		function createSelect(){
			var select_list = document.createElement("select");
			var options_var = new Array();
			options_var[0] = new Array('&nbsp','&nbsp');
			options_var[1] = new Array('HEAD OF CORP./ENTITY','HEAD OF CORP./ENTITY');
			options_var[2] = new Array('VICE PRESIDENT OF CORP./ENTITY','VICE PRESIDENT OF CORP./ENTITY');
			options_var[3] = new Array('SECRETARY OF CORP./ENTITY','SECRETARY OF CORP./ENTITY');
			options_var[4] = new Array('ASSISTANT SECRETARY','ASSISTANT SECRETARY');
			options_var[5] = new Array('TREASURER','TREASURER');
			for (var i=0; i<options_var.length;i++){
				select_list.options[i] = new Option(options_var[i][0],options_var[i][1]);
			}
			document.body.appendChild(select_list);
		}
	</script>
	<body>
		<button type="button" onclick="createSelect()">test</button>
	</body>
</html>

 

[kaht]

Hey j4606, why don't you address your OPSP email you undoubtedly got? We're waiting.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

 

[Olavxxx]

What if the hidden select div is outside of the form tag?
Ps. just throwing it out there, I dont actually know if it will work..

Creating the select with DOM might be an even better idea, but the question is if it's needed.. I would guess simply copying the contets from one div to another (or spans in this case) would be faster than all those JS contentation, variableparsing, etc?

I might be wrong though

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[trollacious]

Why would you have form elements outside of a form?

Since the <select> has an ID, you can access it with document.getElementById or you can pass the functions in the event handlers this to refer to that object.

Lee