[FF] onchange event via dropdown werkt niet

[Soul_]

Mijn bedoeling is via een dropdown box kan gekozen worden tussen verschillende verzendkosten en dat dan die worden aangepast en ook bij totale bedrag gerekend worden enzo.
alles werkt in IE maar de code doet niks in FF

dit is mijn dropdown menu:

code:

Betalingsmethode: 
<form name="form1" method="post">
<select name="verzendkost" onChange="document.getElementById('form1').submit();">
    <option>Overschrijving België</option>
    <option>Onder rembours</option>
    <option>Overschrijving EU</option>
</select>
</form>

en dit is PHP code

code:

if($_POST['verzendkost'] == "Overschrijving België")
{
    $verzendkosten = 4.50;
}
elseif($_POST['verzendkost'] == "Onder rembours")
{
    $verzendkosten = 10.00;
}
elseif($_POST['verzendkost'] == "Overschrijving EU")
{
    $verzendkosten = 15.00;
}

weet iemand hoe het komt dat dit niet werkt in FF ?

bedankt

[NMe]

Probeer dit eens?

HTML:

<select name="verzendkost" onchange="document.forms.form1.submit();">

Het attribuut onChange bestaat niet, onchange wel.

Waarom hebben je options trouwens niet een bijbehorende value?

[ Voor 16% gewijzigd door NMe op 02-06-2008 01:06 ]

[Soul_]

Heb het verandert, werkt nog steeds niet.
ze hebben geen value omdat ik soms wat lui ben
maar heb er nu bijgezet en heeft ook geen effect in FF

De pagina reload niet in firefox, dus hij submit het blijkbaar niet eens?

[crisp]

Je form heeft ook geen ID (getElementById geeft het al aan). Dat IE ook elementen met enkel een name-attribuut selecteert dmv getElementById is een bug in IE.

Overigens kan je ook naar de form-property van het element zelf verwijzen zodat je form helemaal geen ID of name nodig heeft:

HTML:

<select name="verzendkost" onChange="this.form.submit();">

-NMe-: HTML is case-insensitive mbt attribuut-namen hoor

[ Voor 12% gewijzigd door crisp op 02-06-2008 01:23 ]

[NMe]

crisp schreef op maandag 02 juni 2008 @ 01:22:
-NMe-: HTML is case-insensitive mbt attribuut-namen hoor

Hmm, dan ben ik wat in de war blijkbaar. Overigens zou mijn oplossing dan toch alsnog horen te werken? document.forms.xx gebruikt op de plaats van xx toch het "name" attribuut?

[Soul_]

crisp schreef op maandag 02 juni 2008 @ 01:22:
Je form heeft ook geen ID (getElementById geeft het al aan). Dat IE ook elementen met enkel een name-attribuut selecteert dmv getElementById is een bug in IE.

Overigens kan je ook naar de form-property van het element zelf verwijzen zodat je form helemaal geen ID of name nodig heeft:

HTML:

<select name="verzendkost" onChange="this.form.submit();">

Heb id="form1" bijgezet en dit werkt uitstekend, eigenlijk stom dat ik daar zelf niet aan gedacht heb want inderdaad de naam geeft het al aan

bedankt voor de hulp

[crisp]

-NMe- schreef op maandag 02 juni 2008 @ 01:28:
[...]

Hmm, dan ben ik wat in de war blijkbaar. Overigens zou mijn oplossing dan toch alsnog horen te werken? document.forms.xx gebruikt op de plaats van xx toch het "name" attribuut?

inderdaad, zowel forms met een id als met een name worden in de forms-collection opgenomen

[_Thanatos_]

-NMe-: HTML is case-insensitive mbt attribuut-namen hoor

XHTML niet

@TS:
Als ik jou was zou ik hetzelfde event ook aan onkeydown en onkeyup koppelen, zodat het ook wordt uitgevoerd als de gebruiker een waarde met het toetsenbord selecteert.

[ Voor 49% gewijzigd door _Thanatos_ op 02-06-2008 21:24 ]

[Soul_]

Ik heb nog een vraag ivm dropdownbox

als je nu een waarde eruit kiest wat is de gemakkelijkste manier om er voor te zorgen dat deze selected blijft als de pagina opnieuw load ?

Ik doe dit met php zoals volgt:

code:

if($_SESSION['verzendkosten'] == 4.50)
{
    $sel1 = "selected=\"selected\"";
    $sel2 = "";
    $sel3 = "";
}

dan bij mijn select box zet ik

code:

    <option <?php echo $sel1 ?> value="Overschrijving België">Overschrijving België</option>
    <option <?php echo $sel2 ?> value="Onder rembours België">Onder rembours België</option>
    <option <?php echo $sel3 ?> value="Overschrijving EU">Overschrijving EU</option>

Bestaat er hier geen makkelijkere/mooiere manier voor ? bedankt

[Borizz]

_Thanatos_ schreef op maandag 02 juni 2008 @ 21:23:
[...]

XHTML niet

@TS:
Als ik jou was zou ik hetzelfde event ook aan onkeydown en onkeyup koppelen, zodat het ook wordt uitgevoerd als de gebruiker een waarde met het toetsenbord selecteert.

Ehm en dat is goed voor? Ik neem aan (en dit is naar mijn weten ook zo) dat als je met je toetsenbord een andere optie kiest in een select box dat er dan ook een onchange event wordt afgeschoten.

[_Thanatos_]

Borizz schreef op zondag 29 juni 2008 @ 20:20:
[...]

Ehm en dat is goed voor? Ik neem aan (en dit is naar mijn weten ook zo) dat als je met je toetsenbord een andere optie kiest in een select box dat er dan ook een onchange event wordt afgeschoten.

Vziw alleen als je met alt+down de selectbox eerst hebt opengetrokken. Zonder dat werkt onchange als gevolg van toetsenbord niet op alle browsers.

[Borizz]

_Thanatos_ schreef op zondag 29 juni 2008 @ 21:03:
[...]

Vziw alleen als je met alt+down de selectbox eerst hebt opengetrokken. Zonder dat werkt onchange als gevolg van toetsenbord niet op alle browsers.

Ik kan het nu alleen maar testen op FF3 en IE6, maar daar werkt het in ieder geval prima op.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
    <head>
        <title>test dropdown</title>
    </head>
    <body>
        <form>
                <div>
                    <select onchange="alert(1);"><option>1</option><option>2</option><option>3</option></select>
                </div>
        </form>
    </body>
</html>

[Bosmonster]

_Thanatos_ schreef op zondag 29 juni 2008 @ 21:03:
[...]

Vziw alleen als je met alt+down de selectbox eerst hebt opengetrokken. Zonder dat werkt onchange als gevolg van toetsenbord niet op alle browsers.

Dat zou ik erg vreemd vinden en zou op zn minst een flinke bug zijn in die browser. Het onchange event zou compleet los moeten staan van de input events natuurlijk.

[Soul_]

in IE7 werkt dit ook perfect met toetsenbord.

FF2 heb ik even getest en daar kan je het veranderen zonder dat er iets gebeurd als je via tab ernaar toe gaat en dan met up en down op je toetsenbord waarde verandert zonder dropdown te openen gebeurt er niks, dus ergens heeft hij wel gelijk.
maar zodra dropdown niet meer "focus" is (dus je klikt ergens anders of gaat naar andere knop met tab) dan schiet onchange in actie wat je in de situatie van mijn site zoiezo moet doen (op nog een andere knop drukken dus).


iemand die betere manier weet voor selected te kiezen zoals beetje hierboven stond of word dit algemeen zo gedaan?

[ Voor 63% gewijzigd door Soul_ op 30-06-2008 01:18 ]

[funkwurm]

Soul_ schreef op maandag 30 juni 2008 @ 01:00:
in IE7 werkt dit ook perfect met toetsenbord.

FF2 heb ik even getest en daar kan je het veranderen zonder dat er iets gebeurd als je via tab ernaar toe gaat en dan met up en down op je toetsenbord waarde verandert zonder dropdown te openen gebeurt er niks, dus ergens heeft hij wel gelijk.
maar zodra dropdown niet meer "focus" is (dus je klikt ergens anders of gaat naar andere knop met tab) dan schiet onchange in actie wat je in de situatie van mijn site zoiezo moet doen (op nog een andere knop drukken dus).

Dit lijkt me ook 10x gebruiksvriendelijker, want stel de select staat default op de 1e waarde en je wil de 3e waarde en je gebruikt liever het toetsenbord. Je zult dan 2x op pijltje naar beneden willen klikken, maar na de 1e wordt het form al gesubmit()...

iemand die betere manier weet voor selected te kiezen zoals beetje hierboven stond of word dit algemeen zo gedaan?

Ik neem aan dat er ook condities zijn waaronder de andere options selected moeten worden? Ik zou er denk ik de inline condition constructie voor gebruiken ipv een opsomming van if'jes:

code:

<option <?=($_SESSION['verzendkosten'] == 4.50)?'selected="selected"':'';?> value="Overschrijving België">Overschrijving België</option>
<option <?=($_SESSION['verzendkosten'] == 5.80)?'selected="selected"':'';?> value="Onder rembours België">Onder rembours België</option>
<option <?=($_SESSION['verzendkosten'] == 6.30)?'selected="selected"':'';?> value="Overschrijving EU">Overschrijving EU</option>

Maar ligt aan wat je leesbare code vindt. Bij het gebruik van $sel# vars is het denk ik harder nodig er een uitleg bij te commenten zodat je weet wat het is als je het veel later nog eens terug leest.

[_Thanatos_]

Bosmonster schreef op zondag 29 juni 2008 @ 23:10:
[...]
Dat zou ik erg vreemd vinden en zou op zn minst een flinke bug zijn in die browser. Het onchange event zou compleet los moeten staan van de input events natuurlijk.

Een browserbug heeft ons frontend-developers er nog nooit van weerhouden om een workaround te verzinnen, toch?