[JS] Value uit dropdown halen in IE* - Softwareontwikkeling

donderdag 12 november 2009 11:18

Acties:

0 Henk 'm!

Creature of the web

Topicstarter

Greetings tweakers,

ik heb een functie in js dat afhangkelijk van een waarde in een bepaald veld de ene of de andere span laat zien.
Deze functie werkt perfect in FF maar niet in IE en ik heb geen idee hoe je dit moet oplossen.

JavaScript:

function wissel(){
    var wat = document.forms['myform'].elements['AankoopWat'].value;
    obj4 = document.getElementById("span1");
    obj5 = document.getElementById("span2");
    if (wat == ''){
        obj4.style.display = "none";
        obj5.style.display = "none";
    }
    if (wat == 'iets'){
        obj4.style.display = "";
        obj5.style.display = "none";
    }
    if (wat == 'iets anders'){
        obj5.style.display = "";
        obj4.style.display = "none";
    }
}

thx

Just me

donderdag 12 november 2009 11:22

Acties:

0 Henk 'm!

Verwijderd

Waarom verander je:

var wat = document.forms['myform'].elements['AankoopWat'].value;

niet in:

var wat = document.getElementById('AankoopWat').value;

donderdag 12 november 2009 11:22

Acties:

0 Henk 'm!

Manuel

Heb je zelf al gekeken van waar het misschien aan kan liggen? Een enige test-case misschien en/of de foutmelding die IE onderaan in het scherm geeft?

Graag heel wat meer informatie..

donderdag 12 november 2009 11:23

Acties:

0 Henk 'm!

iBasch

Probeer ipv display "" eens "block" of "inline".
Verder zou het handig als je wat meer informatie zou geven, het liefst even een simpele testcase online zetten.

donderdag 12 november 2009 11:25

Acties:

0 Henk 'm!

vbmot

Verwijderd schreef op donderdag 12 november 2009 @ 11:22:
Waarom verander je:

var wat = document.forms['myform'].elements['AankoopWat'].value;

niet in:

var wat = document.getElementById('AankoopWat').value;

Dat is inderdaad netter tegenwoordig.

En verder zou ik op een aantal plaatsen (w.o. elke conditional en na het verkrijgen van 'wat') wat alert() statements zetten.

JavaScript:

function wissel(){
    var wat = document.forms['myform'].elements['AankoopWat'].value;
            alert("wat: " + wat);
    obj4 = document.getElementById("span1");
    obj5 = document.getElementById("span2");
    if (wat == ''){
                        alert("blok 1");
        obj4.style.display = "none";
        obj5.style.display = "none";
    }
    if (wat == 'iets'){
                        alert("blok 2");
        obj4.style.display = "";
        obj5.style.display = "none";
    }
    if (wat == 'iets anders'){
                        alert("blok 3");
        obj5.style.display = "";
        obj4.style.display = "none";
    }
}

Gewoon even kijken waar het fout gaat.

[ Voor 42% gewijzigd door vbmot op 12-11-2009 11:27 ]

Ook maar dat ik dat weet!

donderdag 12 november 2009 11:28

Acties:

0 Henk 'm!

Crayne

Have face, will travel

IE 7.0.5730.13 doet het prima met de volgende test:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<script type="text/javascript">

function wissel(){
    var wat = document.forms['myform'].elements['AankoopWat'].value;
    
    alert(wat);
    
    obj4 = document.getElementById("span1");
    obj5 = document.getElementById("span2");
    if (wat == ''){
        obj4.style.display = "none";
        obj5.style.display = "none";
    }
    if (wat == 'iets'){
        obj4.style.display = "";
        obj5.style.display = "none";
    }
    if (wat == 'iets anders'){
        obj5.style.display = "";
        obj4.style.display = "none";
    }
}

</script>
</head>

<body onLoad="wissel();">

<div id="span1">Hoi.</div>

<div id="span2">Hoihoi.</div>

<form name="myform">

<input type="text" name="AankoopWat" size="25" value="iets anders">

</form>
</body>
</html>

In alledrie de gevallen (leeg, 'iets' en 'iets anders') als waarde voor het tekstveld, wordt de functie netjes uitgevoerd zoals verwacht.

[ Voor 6% gewijzigd door Crayne op 12-11-2009 11:28 ]

Mijn Library Thing catalogus

donderdag 12 november 2009 11:30

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

vbmot schreef op donderdag 12 november 2009 @ 11:25:
[...]

Dat is inderdaad netter tegenwoordig.

En waarom zou dat netter zijn... Het is volgens mij nog steeds logischer om je form elementen via de forms collection op te vragen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 12 november 2009 11:34

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

vbmot schreef op donderdag 12 november 2009 @ 11:25:
En verder zou ik op een aantal plaatsen (w.o. elke conditional en na het verkrijgen van 'wat') wat alert() statements zetten.

JavaScript:

function wissel(){
    var wat = document.forms['myform'].elements['AankoopWat'].value;
            alert("wat: " + wat);
    obj4 = document.getElementById("span1");
    obj5 = document.getElementById("span2");
    if (wat == ''){
                        alert("blok 1");
        obj4.style.display = "none";
        obj5.style.display = "none";
    }
    if (wat == 'iets'){
                        alert("blok 2");
        obj4.style.display = "";
        obj5.style.display = "none";
    }
    if (wat == 'iets anders'){
                        alert("blok 3");
        obj5.style.display = "";
        obj4.style.display = "none";
    }
}

Gewoon even kijken waar het fout gaat.

Als ik dat doe krijg ik bij de eerste alert "Wat: " dus die waarde word niet ingelezen

Just me

donderdag 12 november 2009 11:38

Acties:

0 Henk 'm!

André

Analytics dude

Wat is die AankoopWat voor element?

donderdag 12 november 2009 11:42

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

André schreef op donderdag 12 november 2009 @ 11:38:
Wat is die AankoopWat voor element?

een dropdownbox

Just me

donderdag 12 november 2009 11:58

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Die hebben dan ook niet een standaard .value. De options in de select hebben dat dan weer wel. Je zult nog even moeten inlezen op javascript en dropdowns.

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 12 november 2009 12:22

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

MueR schreef op donderdag 12 november 2009 @ 11:58:
Die hebben dan ook niet een standaard .value. De options in de select hebben dat dan weer wel. Je zult nog even moeten inlezen op javascript en dropdowns.

iig in IE7 en IE8 hebben select-elementen gewoon een value property (zoals gedefinieerd in DOM level 1), dus dit werkt prima:

HTML:

<select onchange="alert(this.value)">
    <option>
    <option value="wat">wat
    <option value="wat anders">wat anders
    <option value="huh?">huh?
</select>

wat echter niet goed werkt in IE is dit:

HTML:

<select onchange="alert(this.value)">
    <option>
    <option>wat
    <option>wat anders
    <option>huh?
</select>

volgens mij is het werken met selectedIndex om de geselecteerde waarde van een select-element op te halen tegenwoordig helemaal niet meer nodig.

Intentionally left blank

donderdag 12 november 2009 12:23

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

volgens mij is het werken met selectedIndex om de geselecteerde waarde van een select-element op te halen tegenwoordig helemaal niet meer nodig.

Klopt

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 12 november 2009 12:27

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

BtM909 schreef op donderdag 12 november 2009 @ 12:23:
[...]

Klopt

Nou ja, behalve als je je options niet expliciet een value-attribuut geeft en dus tegen dit probleem in IE aanloopt; dan moet je dus select.options[select.selectedIndex].text gaan opvragen

Ongelovelijk dat dat zelfs in IE8 nog niet gefixed is...

[ Voor 8% gewijzigd door crisp op 12-11-2009 12:28 ]

Intentionally left blank

donderdag 12 november 2009 12:46

Acties:

0 Henk 'm!

Sebazzz

3dp

crisp schreef op donderdag 12 november 2009 @ 12:27:
[...]

Ongelovelijk dat dat zelfs in IE8 nog niet gefixed is...

Microsoft zal er wel een goede reden voor hebben, ze weten het niet, het was niet belangrijk genoeg of ze vonden het belangrijker om kritiek over de CSS fouten in hun browser kwijt te raken.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 12 november 2009 13:05

Acties:

0 Henk 'm!

Bosmonster

*zucht*

crisp schreef op donderdag 12 november 2009 @ 12:27:
[...]

Nou ja, behalve als je je options niet expliciet een value-attribuut geeft en dus tegen dit probleem in IE aanloopt; dan moet je dus select.options[select.selectedIndex].text gaan opvragen Ongelovelijk dat dat zelfs in IE8 nog niet gefixed is...

Persoonlijk zou ik het nogal raar vinden als die zomaar de display-text zou pakken als je geen value opgeeft.

Ik weet niet of dat standaard gedrag zou moeten zijn, maar logisch zou ik het niet vinden.

donderdag 12 november 2009 13:45

Acties:

0 Henk 'm!

R4gnax

crisp schreef op donderdag 12 november 2009 @ 12:27:
[...]

Nou ja, behalve als je je options niet expliciet een value-attribuut geeft en dus tegen dit probleem in IE aanloopt; dan moet je dus select.options[select.selectedIndex].text gaan opvragen Ongelovelijk dat dat zelfs in IE8 nog niet gefixed is...

De select tag heeft -- of in elk geval, had, wel meer curiositeiten icm javascript.

Heeft MS in IE8 bijvoorbeeld al wel het gedrag gefixed wanneer je dynamisch option tags toevoegt en verwijdert? Laatste keer dat ik het probeerde is al een tijdje geleden, maar ik kan me nog allerlei vage problemen met het ophalen van een geselecteerde, dynamisch toegevoegde option herinneren.

donderdag 12 november 2009 13:54

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Webkit heeft ook een leuke bug die al jaren openstaat. Je kunt option-elementen niet onzichtbaar maken, wat prima werkt in alle andere browsers.

[ Voor 16% gewijzigd door Bosmonster op 12-11-2009 13:54 ]

donderdag 12 november 2009 14:14

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Bosmonster schreef op donderdag 12 november 2009 @ 13:05:
[...]

Persoonlijk zou ik het nogal raar vinden als die zomaar de display-text zou pakken als je geen value opgeeft.

Ik weet niet of dat standaard gedrag zou moeten zijn, maar logisch zou ik het niet vinden.

Dat is standaard gedrag. Het volgt uit de definitie van wat de initial value is van een option-element, en dat is de text-content van het element indien er geen value-attribuut is opgegeven.

Intentionally left blank

donderdag 12 november 2009 14:22

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

ik heb het opgelost,
ik moest inderdaad in mijn dropdown een value waarde geven.

PHP:

<SELECT tabindex="36" NAME="AankoopWat" id="AankoopWat" onchange="wissel()">
<OPTION></OPTION>
<?
foreach ($ar_wat as $value){
    if ($rij['AankoopWat'] ==  $value){
        print '<OPTION SELECTED value="'.$value.'">';
    }
    else{
        print '<OPTION value="'.$value.'">';
    }
    print $value . "</OPTION>";
}
?>
</SELECT>

Just me

donderdag 12 november 2009 16:38

Acties:

0 Henk 'm!

iBasch

Galen schreef op donderdag 12 november 2009 @ 14:22:
ik heb het opgelost,
ik moest inderdaad in mijn dropdown een value waarde geven.
PHP:
1
//code

Beetje mierenneuken misschien, maar als je correct XHTML wilt schrijven moet je kleine letters voor je tags gebruiken, en het is niet 'selected' maar selected="selected".

donderdag 12 november 2009 16:44

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Waar zie je XHTML dan?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 12 november 2009 16:47

Acties:

0 Henk 'm!

Sebazzz

3dp

BtM909 schreef op donderdag 12 november 2009 @ 16:44:
Waar zie je XHTML dan?

Niet, dat klopt. Maar dat neemt niet weg dat die html met CAPITALIZED TAGS en halve attributen een beetje web 1.0 aandoen. Persoonlijk vind ik het netter om HTML zoveel mogelijk de XHTML manier te schijven, hiermee bedoel ik dus lowercase tags, afsluiten als het kan (meta niet, maar een option wel). Dit vermakkelijkt volgens mij ook de migratie naar bijvoorbeeld HTML5 en ik vind het duidelijker.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 12 november 2009 16:57

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Voor HTML5 boeit dat allemaal niet hoor, en boolean attributes hebben ook wel wat, net als het weglaten van optionele tags

eigenlijk had ik bij de value="wat" de quotes ook weg moeten laten

[ Voor 17% gewijzigd door crisp op 12-11-2009 16:58 ]

Intentionally left blank