Value check in javascript op pulldown menu

[tonndejong]

Heren,
In een formulier heb ik een aantal verplichte velden. Een er van "afstand" is een dropdown menu. Met keuze uit 30km 60km en 120km
De andere 3 zijn normale invulvelden.
Hoe kan ik het dropdown veld testen dat hier een keuze is gemaakt uit een van de bovenstaand afstanden?
ik heb een test pagina online http://www.tct93.nl/abdijentocht/inschrijvenNew0.html
Bijgaande de code die ik gebruik.

<script language="JavaScript">
<!--

function CheckData(f){
var message=""
if (f.naam.value == ""){
message += "U bent vergeten uw naam te vermelden.\n";
}
if (f.plaats.value == ""){
message += "U bent vergeten uw woonplaats te vermelden.\n";
}
if (f.email.value == ""){
message += "U bent vergeten uw email-adres te vermelden\n"
} else {
if (!/\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(f.email.value)){
message += "U heeft geen geldig e-mail adres ingevuld.\n";
}
}
if (f.afstand.value == ""){
message += "U bent vergeten uw woonplaats te vermelden.\n";
}
if (message==""){
document.Abdijentocht_form.submit()
} else {
alert(message)
}
}

// -->
</script>


Bijvoorbaad dank voor de hulp,
Tonn

 

[That Guy]

Ik neem aan dat je naast de Javascript ook een server-side script hebt dat de waardes test? Zo niet is dat een belangrijkere issue.


Nu, over het Javascript: 'tegenwoordig' (met quotes, zie hierbeneden) is het verstandiger om de nieuwe HTML5 atributen required en types te gebruiken. Het idee is dit:

<input type='email' required='required' ... />

Dit scheelt een boel geklooi met code (zoals die verschrikkelijke regexp) en het werkt altijd, ook als Javascript uit staat. Nadeel is dat het kan zijn dat het niet werkt op oudere browsers; zie hier een overzichtje.


Over je select-vraag:

via de property .value van een select-element kan je de waarde opvragen:

[js]document.getElementById('afstand').value;[/js]

deze komt in string terug; je kan dan checken of het gelijk is aan de streepjes:

[js]var afstand = document.getElementById('afstand').value;

if(afstand === "-----------")
{
alert('oh noes, wel een afstand selecteren!');
}[/js]


't mooie is nu dat je ook voor de select tag een required kan inbouwen (weer minder Javascript!); zie hier.

 

[tonndejong]

De onderstaande code heb ik in inschrijbvenNew0.html gecopieerd.
var afstand = document.getElementById('afstand').value;

if(afstand === "-----------")
{
alert('oh noes, wel een afstand selecteren!');
}

Ik heb geen idee waar ik document.getElementById('afstand').value; deze code moet plaatsen. Op de server draait een PhP script. Moet deze code daar in gecopieerd worden? Waar maar?

 

[That Guy]

Eh... nee, zo werkt dat (helaas) niet.



Hier, dit is het nieuwe script:

[js]
function CheckData(f){
var message=""
if (f.naam.value == ""){
message += "U bent vergeten uw naam te vermelden.\n";
}
if (f.plaats.value == ""){
message += "U bent vergeten uw woonplaats te vermelden.\n";
}
if (f.email.value == ""){
message += "U bent vergeten uw email-adres te vermelden\n"
} else {
if (!/\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(f.email.value)){
message += "U heeft geen geldig e-mail adres ingevuld.\n";
}
}
if (f.afstand.value == "-----------"){
message += "U bent vergeten uw afstand te vermelden.\n";
}
if (message==""){
document.Abdijentocht_form.submit();
} else {
alert(message)
}
}[/js]

dat zou moeten werken; verwissel dit met 't oude (uit je 1e post).

 

[tonndejong]

Ik heb deze code met de oude verwisseld en de pagina geupload.
Als ik nu op de knop Zenden druk, krijg ik toch maar 3 waarschuwingen ipv van 4.

 

[tonndejong]

Ik ben nog aan het verder zoeken, ik heb de ----------- vervangen door Maak_uw_keuze.
en dit in uw code vervangen maar dit werkt niet.
Daarna heb ik de code betreft de controle van de geldigheid van het E-mail adres gekopieerd en wat aangepast.

if (!/\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(f.afstand.value)){
message += "U hebt bij afstand geen keuze gemaakt.\n";

Ik krijg nu 4 fout regels.

daarna de code aangepast naar:

if ("Maak_uw_keuze".test(f.afstand.value)){
message += "U hebt bij afstand geen keuze gemaakt.\n";

Nu komt er geen testregel meer.

 

[tonndejong]

Ik heb de oplossing gevonden.
Een dropdown list kun je niet controleren met value maar met selectedIndex.
De eerste regel in de dropdownlist = 0 en bevat de tekst Maak uw keuze

if (f.afstand.selectedIndex == 0 )
{
message += "U hebt bij afstand geen keuze gemaakt.\n";
}

Toch bedankt voor uw hulp