show/hide function onclick probleem

[RowanP]

Ik heb een probleem met mijn show/hide function door het gebruik van onclick.
Opzich is dit waarschijnlijk de beste manier om dingen op te lossen, maar ik wil graag dat de instellingen van het formulier behouden worden als er een fout gemaakt wordt. Zodat niet alles opnieuw ingevuld moet worden.

Nou heb je bijvoorbeeld op een checkbox geklikt en daarna is er een selectmenu erachter zichtbaar geworden (hide -> show). Nou moet daar in dat selectmenu ook nog wat geselecteerd worden. Allemaal leuk en aardig, en de herinnerfunctie werkt ook.

Maar nou zit ik met een probleem. Mocht de persoon toch de checkbox weer uit willen schakelen, dan blijft na de uitschakeling de select staan. De persoon denkt; huh? En checkt de checkbox weer. Nu verdwijnt het select vanwege onclick. Nu blijven ze tegengesteld werken. gechecked -> hide, ongecheckt -> show.

Zou iemand mij kunnen helpen om dit probleem te voorkomen?

mijn js en php code:
[JS]function showHide(id){
el = document.getElementById(id);
el.style.display = (el.style.display != 'block')? 'block' : 'none';
}[/JS]

	<tr>
		<td colspan="2"><input type="checkbox" name="check1" value="1" <?php if($_POST['check1'] == '1'){ echo "checked";} ?> onclick="showHide('check2')"> check1</td>
		<td align="right" style="padding-right:10px;">
			<select name="check2" size="1" id="check2" <?php if($_POST['check1'] == '1'){}else{echo'style="display:none"';}?>>
				<option value="">Kies optie</option>
				<option value="optie1" <?php if ($_POST['check2'] == 'optie1'){echo " selected";} ?>>optie 1</option>
				<option value="optie2" <?php if ($_POST['check2'] == 'optie2'){echo " selected";} ?>>optie 2</option>
			</select>
		</td>
		<td><?php echo $fout_check; ?></td>	
	</tr>

alvast bedankt! mvg Rowan

 

[That Guy]

ik volg je vraag niet helemaal, maar mischien is dit wat.

Mocht de persoon toch de checkbox weer uit willen schakelen, dan blijft na de uitschakeling de select staan.

je kan er een check in bouwen: als het selectievakje aanstaat, dan moet je m niet toggle'n. Zoiets:
[JS]function toggle(me,elem)
{
var obj = document.getElementById(elem).style;

if(me.selected === true)
{
//het is aangevinkt
obj.display = 'block';
}else{
//het is niet aangevinkt
obj.display = 'none';
}
}
[/JS]
je aanroep:

<input type='checkbox' onclick='toggle(this,"check2");' />

:thumb:

 

[RowanP]

ik volg je vraag niet helemaal, maar mischien is dit wat.

Ik zal even mijn vraag proberen opnieuw te formuleren, maar dan schematisch. Waarschijnlijk is dat begrijpelijker

- checkbox onclick -> toggle hidden select (door checkbox aan te vinken wordt select aangeroepen en zichtbaar)
- select option (men kiest een optie in de select en gaat verder)
- submit (de persoon submit het formulier)
- fout (de persoon heeft een fout gemaakt; veld vergeten of foutief ingevuld)
- foutmelding (er wordt een foutmelding gegeven, de rest van de ingevulde gegevens blijven staan, zo ook de checkbox (aangevinkt) en de select (option geselecteerd of niet)

tot zover gaat alles goed. Alle value's blijven zichtbaar door:

<input value="<?php echo $_POST['value_naam']; ?>">

Nu is er een mogelijkheid dat na de fout de persoon de checkbox wil de-selecteren. Volgend schema:
- checkbox onclick -> ... (het vinkje in de checkbox verdwijnt, maar de select blijft staan. waarschijnlijk omdat hij "wederom zichtbaar wordt". Maar dat was hij dus al)
- checkbox onclick -> toggle hidden select (checkbox; vinkje. select; hidden)

- checkbox onlick -> toggle hidden select (checkbox; leeg. select; zichbaar)
- checkbox onlick -> toggle hidden select (checkbox; vinkje. select; hidden)
... enz

Het probleem is dus dat na de foutmelding de selectstatement wel zichbaar moet blijven, maar "1 toggle achterloopt" mocht er weer op de checkbox gedrukt worden.

-------------

Ik hoop dat deze uitleg van mijn vraag duidelijker is! Alvast bedankt voor je inzet!

 

[That Guy]

Nou, errr, nu ik je uitleg weer heb gelezen, vat ik nogsteeds hetzelfde. Dit:

door het back-en (teruggaan naar vorrige pagina na fout form invullen) komt het voor dat de checkbox (genaamd X) aangeklikt is, en de select (genaamd S) niet zichtbaar is; of andersom​

in dat geval, check nog eens mn code. Dat zou het moeten verhelpen. Het kan ook zo zijn dat je een call moet maken on-load; dit omdat er niet geklikt is:

[JS]window.onload = function()
{
var x = document.getElementById('checkbox-ding');
var s = document.getElementById('select-ding').style;

if(x.selected === true)
{
//het is aangevinkt
s.display = 'block';
}else{
//het is niet aangevinkt
s.display = 'none';
}
}[/JS]
of iets in deze richting.

 

[RowanP]

Het werkt niet. Ik stuur je anders wel even een link naar het werkende geheel. Dan kan je daar zien wat er precies misgaat.

 

[That Guy]

valsspeler!

Fout: document.getElementById("bou2") is null
Bronbestand: *URL *
Regel: 23

wel even de namen goed doen, hea?

 

[RowanP]

valsspeler!

wel even de namen goed doen, hea?

ai ik had hem al gespot maar ben hem vergeten opnieuw te uploaden.
Zou je er nog eens naar de goede versie willen kijken ?

 

[That Guy]

[JS]document.getElementById('bouw');[/JS]
het pakt het element, via het ID. Je html geeft geen id:

<input type="checkbox" name="bouw" value="1" checked onclick="showHide('bouw2')">

, alleen een naam. Even

id='bouw'

erbijzetten

 

[RowanP]

heeft helaas niet geholpen. Na de foutmelding verdwijnt de select zelfs.
Ik vrees eigenlijk dat het ook onbegonnen werk is, omdat je de select toggelt.
Na een foutmelding, begint de toggle opnieuw. Dus als je de checkbox uncheckt dan toggle je de select opnieuw aan. Terwijl hij al aan stond (of weggevallen was in dit geval).
Vandaar dat je daarna constant tegengesteld blijft werken.

Dus de enige oplossing is denk ik;
De eerste toggle uitschakelen na een foutmelding. Zo blijven de toggle en show synchroon, of gewoon altijd de select laten zien... niet de mooiste oplossing maar wel de makkelijkste.

Wat denk jij?

 

[That Guy]

iets meer geduld hebben.

Als ik nu zo je bron bekijk, gebruik je nogsteeds de showHide functie, niet de toggle die ik had gemaakt. Probeer het daarmee eens.


[edit]oh my, ik ben weer lekker fout bezig vandaag. Het moet checked zijn, niet selected...


[js]
window.onload = function()
{
var x = document.getElementById('checkbox-ding');
var s = document.getElementById('select-ding').style;

if(x.checked=== true)
{
//het is aangevinkt
s.display = 'block';
}else{
//het is niet aangevinkt
s.display = 'none';
}
}[/js]
dus. Verander ook ff de onload.
[/edit]

 

[RowanP]

oh my, ik ben weer lekker fout bezig vandaag. Het moet checked zijn, niet selected...

moet ik bij toggle ook even selected veranderen in checked?
[JS]function toggle(me,elem)
{
var obj = document.getElementById(elem).style;

if(me.checked === true)
{
//het is aangevinkt
obj.display = 'block';
}else{
//het is niet aangevinkt
obj.display = 'none';
}
}[/JS]

ik heb dit ook even in de checkbox gegooid dan:

onclick="toggle(this,'bouw2')"

[EDIT]Het werkt nu, probeer het zelf maar! Super bedankt.
Ik zal de status even veranderen.[/EDIT]