javascript to determine which form element is displayed

[mantrid]

Hello

Im trying to find the correct syntax to use to determine whether which form
element is visible on changing the value in a dropdown list
I need something in the onChange of the dropdown list that will cause the
appropriate element on another part of the page to be displayed

pseudo code below

var mydropdownlist =
document.questform.typeid.options[document.questform.typeid.selectedIndex].v
alue;
if(mydropdownlist<6)
then display <input name="ans1" type="text" >
else
display <textarea name="ans1" rows="1" ></textarea>

any help appreciated
ian

[Evertjan.]

mantrid wrote on 12 nov 2006 in comp.lang.javascript:

Hello

Im trying to find the correct syntax to use to determine whether which
form element is visible on changing the value in a dropdown list
I need something in the onChange of the dropdown list that will cause
the appropriate element on another part of the page to be displayed

pseudo code below

var mydropdownlist =
document.questform.typeid.options[document.questform.typeid.selectedInd
ex].v alue;
if(mydropdownlist<6)
then display <input name="ans1" type="text" >
else
display <textarea name="ans1" rows="1" ></textarea>

<script type='text/javascript'>
function change(x){
var mydropdownlist = x.options[x.selectedIndex].value;
var droparea = document.getElementById('droparea');

droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';
}
</script>

<form>
<select onclick='change(this)'>
<option value='1'1
<option value='2'2
<option value='8'8
</select>
<br><br><br><br><br><br><br><br>
<div id='droparea'></div>
</form>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[mantrid]

"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

mantrid wrote on 12 nov 2006 in comp.lang.javascript:

Hello

Im trying to find the correct syntax to use to determine whether which
form element is visible on changing the value in a dropdown list
I need something in the onChange of the dropdown list that will cause
the appropriate element on another part of the page to be displayed

pseudo code below

var mydropdownlist =
document.questform.typeid.options[document.questform.typeid.selectedInd
ex].v alue;
if(mydropdownlist<6)
then display <input name="ans1" type="text" >
else
display <textarea name="ans1" rows="1" ></textarea>

<script type='text/javascript'>
function change(x){
var mydropdownlist = x.options[x.selectedIndex].value;
var droparea = document.getElementById('droparea');

droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';
}
</script>

<form>
<select onclick='change(this)'>
<option value='1'1
<option value='2'2
<option value='8'8
</select>
<br><br><br><br><br><br><br><br>
<div id='droparea'></div>
</form>

thanks Evertjan
that look like what i need

[mantrid]

"Evertjan." <ex**************@interxnl.netwrote in message
news:Xn********************@194.109.133.242...

mantrid wrote on 12 nov 2006 in comp.lang.javascript:

Hello

Im trying to find the correct syntax to use to determine whether which
form element is visible on changing the value in a dropdown list
I need something in the onChange of the dropdown list that will cause
the appropriate element on another part of the page to be displayed

pseudo code below

var mydropdownlist =
document.questform.typeid.options[document.questform.typeid.selectedInd
ex].v alue;
if(mydropdownlist<6)
then display <input name="ans1" type="text" >
else
display <textarea name="ans1" rows="1" ></textarea>

<script type='text/javascript'>
function change(x){
var mydropdownlist = x.options[x.selectedIndex].value;
var droparea = document.getElementById('droparea');

droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';
}
</script>

<form>
<select onclick='change(this)'>
<option value='1'1
<option value='2'2
<option value='8'8
</select>
<br><br><br><br><br><br><br><br>
<div id='droparea'></div>
</form>

--

Evertjan.
that work a treat. can i trouble you for an explanation of how the code is
working. ie what is each of the items below doing? particularly the
innerHTML = (mydropdownlist<6)
the '?'
and the ':'

is it the same as an if...else....? im trying to get my head around it.
droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';

sorry to be a nuisance. at the moment one of the elements will only display
on clicking the dropdown list. what would be the best approach to have one
as the default which is present when the page loads?

thanks again
ian

[Evertjan.]

mantrid wrote on 13 nov 2006 in comp.lang.javascript:

Evertjan.
that work a treat. can i trouble you for an explanation of how the
code is working. ie what is each of the items below doing?
particularly the innerHTML = (mydropdownlist<6)
the '?'
and the ':'

is it the same as an if...else....? im trying to get my head around
it.

Yes, it is called a ternary operator.

It pays off to read the NG FAQ and the Jscript specs:

<http://www.jibbering.com/faq/>

<http://msdn.microsoft.com/library/en...7399ac32-9324-
4a9a-ae76-be9c0f9df81c.asp>

droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';

sorry to be a nuisance. at the moment one of the elements will only
display on clicking the dropdown list. what would be the best approach
to have one as the default which is present when the page loads?

==========================================
<script type='text/javascript'>
function change(x){
var mydropdownlist = x.options[x.selectedIndex].value;
var droparea = document.getElementById('droparea');

droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';
}
</script>

<form>
<select onclick='change(this)'>
<option value='1'1
<option value='2'2
<option value='8'8
</select>
<br><br><br><br><br><br><br><br>
<div id='droparea'>
<input name="ans1" type="text">
</div>
</form>
=============================================

Simple, isn't it??

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[mantrid]

>
It pays off to read the NG FAQ and the Jscript specs:

<http://www.jibbering.com/faq/>

<http://msdn.microsoft.com/library/en...7399ac32-9324-
4a9a-ae76-be9c0f9df81c.asp>

thanks,will take a look at it. trouble with me is i havnt used javascript
much and i didnt really learn the proper way. i should have really looked at
the basics but i find myself just concentrating on finding solutions for
what i need at the moment. the wrong way around i know

==========================================
<script type='text/javascript'>
function change(x){
var mydropdownlist = x.options[x.selectedIndex].value;
var droparea = document.getElementById('droparea');

droparea.innerHTML = (mydropdownlist<6)
? '<input name="ans1" type="text">'
: '<textarea name="ans1" rows="1"></textarea>';
}
</script>

<form>
<select onclick='change(this)'>
<option value='1'1
<option value='2'2
<option value='8'8
</select>
<br><br><br><br><br><br><br><br>
<div id='droparea'>
<input name="ans1" type="text">
</div>
</form>
=============================================

Simple, isn't it??

it is. infact that occurd to me to, straight away. but i ruled it out almost
as quickly because i thought that
<div id='droparea'>
<input name="ans1" type="text">

would generate two elements when the dropdown list was clicked instead of
just the one. can understand why it doesnt

ian