Javascript: Show / hide
Ik ben bezig met een javascriptje die vanuit een selectbox een extra invulveld weergeeft.
Werkt opzich prima, in Firefox echter alleen, hoet moet eigenlijk ook in IE7 werken. Weet iemand wat ik moet aanpassen om het werkend te krijgen ik heb het volgende:
De code in de head:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script language="javascript">
function showField( id )
{
document.all.insertedEmail.style.visibility = 'hidden';
document.all.insertedEmail.value = '';
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
function hideField( id )
{
document.all.insertedEmail.style.visibility = 'visible'; document.all.insertedEmail.value = '';
document.all[ id ].style.visibility = 'hidden';
}
</script>
function showField( id )
{
document.all.insertedEmail.style.visibility = 'hidden';
document.all.insertedEmail.value = '';
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
function hideField( id )
{
document.all.insertedEmail.style.visibility = 'visible'; document.all.insertedEmail.value = '';
document.all[ id ].style.visibility = 'hidden';
}
</script>
En dit in de body:
Code (php)
1
2
3
4
5
2
3
4
5
<select name="sendOption">
<option value="" selected="selected" onclick="hideField('insertedEmail' )">Kies een type..</option>
<option value="email" onClick="showField( 'insertedEmail' );">Versturen naar mijn e-mail</option>
<option value="opscherm" onclick="hideField('insertedEmail' )">Weergave op het scherm</option>
</select>
<option value="" selected="selected" onclick="hideField('insertedEmail' )">Kies een type..</option>
<option value="email" onClick="showField( 'insertedEmail' );">Versturen naar mijn e-mail</option>
<option value="opscherm" onclick="hideField('insertedEmail' )">Weergave op het scherm</option>
</select>
Hoop dat iemand me kan helpen.
Doreen
<input type="text" name="bla" > etc etc
zet daar ook id="bla" bij in.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="javascript">
function showField( id )
{
document.all[ id ].style.visibility = 'hidden';
document.all[ id ].value = '';
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
function hideField( id )
{
document.all[ id ].style.visibility = 'visible';
document.all[ id ].value = '';
document.all[ id ].style.visibility = 'hidden';
}
</script>
function showField( id )
{
document.all[ id ].style.visibility = 'hidden';
document.all[ id ].value = '';
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
function hideField( id )
{
document.all[ id ].style.visibility = 'visible';
document.all[ id ].value = '';
document.all[ id ].style.visibility = 'hidden';
}
</script>
En dit:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<form>
<select id="sendOption" name="sendOption">
<option id="sendOption" value="" selected="selected" onChange="hideField('insertedEmail' );">Kies een type..</option>
<option id="sendOption" value="email" onChange="showField( 'insertedEmail' );">Versturen naar mijn e-mail</option>
<option id="sendOption" value="opscherm" onChange="hideField('insertedEmail' );">Weergave op het scherm</option>
</select>
<input id="insertedEmail" type="text" name="insertedEmail" style="visibility:hidden" />
</form>
<select id="sendOption" name="sendOption">
<option id="sendOption" value="" selected="selected" onChange="hideField('insertedEmail' );">Kies een type..</option>
<option id="sendOption" value="email" onChange="showField( 'insertedEmail' );">Versturen naar mijn e-mail</option>
<option id="sendOption" value="opscherm" onChange="hideField('insertedEmail' );">Weergave op het scherm</option>
</select>
<input id="insertedEmail" type="text" name="insertedEmail" style="visibility:hidden" />
</form>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<form>
<select id="sendOption" name="sendOption">
<optgroup label="Kies een type...">
<option id="sendOption" value="email" onChange="showField( 'insertedEmail' );">Versturen naar mijn e-mail</option>
<option id="sendOption" value="opscherm" onChange="hideField('insertedEmail' );">Weergave op het scherm</option>
</optgroup>
</select>
<input id="insertedEmail" type="text" name="insertedEmail" style="display: none;" />
</form>
<select id="sendOption" name="sendOption">
<optgroup label="Kies een type...">
<option id="sendOption" value="email" onChange="showField( 'insertedEmail' );">Versturen naar mijn e-mail</option>
<option id="sendOption" value="opscherm" onChange="hideField('insertedEmail' );">Weergave op het scherm</option>
</optgroup>
</select>
<input id="insertedEmail" type="text" name="insertedEmail" style="display: none;" />
</form>