Avatar billede frasa Juniormester
11. maj 2021 - 18:40 Der er 11 kommentarer og
1 løsning

Kun 1 ud af 2 select options må vælges

Hej

Jeg kan ikke lige knække koden. Er der en som kan vise mig rette vej?
Har en formular hvor der er 2 options vælgere, som man ikke må kunne vælge begge 2. Det skal ikke være muligt at vælge både DW og DW1. enten eller...
Derfor har jeg på min submit button sat ind at function ValidateDW() skal eksekveres inden formen bliver submittet.
I funktionen er min tanke at der skal testes på om værdien fra DW og DW1 er lig med 2. Er det tilfældet skal en alert komme.......
Men det vil ikke fungere ud fra det jeg har tænkt.
Er der en gravet Javascript haj som kan hjælpe mig lidt på vej?

<select id="DW" name="DW">
    <option selected value="0">o - Ingen</option>
    <option value="1">1</option>
</select>
<select id="DW1" name="DW1">
    <option selected value="0">o - Ingen</option>
    <option value="1">1</option>
</select>

<button type="submit" name="submit" onsubmit="validateDW()">Send </button>

<script>
function validateDW() {
  var x = document.getElementById("DW").value;
  var y = document.getElementById("DW1").value;
  if (x + y = 2) {
    alert("Du kan ikke vælge både DW og DW1");
    return false;
  }
}
</script>
Avatar billede ejvindh Ekspert
11. maj 2021 - 18:50 #1
Var det ikke mere oplagt at løse dette med radio buttons? De er jo netop lavet til enten-eller valg.
Avatar billede frasa Juniormester
11. maj 2021 - 19:22 #2
@ejvindh jo det ville være mere oplagt, men visuelt virker det ikke i den sammenhænge jeg skal bruge det.
Avatar billede claes57 Ekspert
11. maj 2021 - 19:48 #3
kan du ikke lave det, så en select i den ene bare nulstiller den anden - så undgår du validate, da der ikke kan være valg i begge på en gang.
Noget med OnChange() i begge. Er der valgt andet end 0, så sættes den anden til 0
Avatar billede ejvindh Ekspert
11. maj 2021 - 20:07 #4
#2: uden at have efterprøvet det, så tror jeg måske du skal have konverteret x og y til talværdier. Mon ikke de når frem som strenge, og derfor vel sagtens snarere giver "11" frem for 2 når de lægges sammen.
Avatar billede frasa Juniormester
11. maj 2021 - 20:08 #5
@claes57 det lyder som en god mulighed.
Der kommer jeg lidt til kort i hvordan jeg skifter value på den modsatte select optiion med en function.... kan du give et hint?
Avatar billede frasa Juniormester
11. maj 2021 - 20:22 #6
#4: umiddelbart hvad jeg har læst mig frem til giver .value en værdi.... men jeg er også nybegynder. Har prøvet at sætte  if (x = 1 &&  y = 1) ind, men det giver mig heller ikke det ønskede resultat. Er der noget i onsubmit der er forkert? Skal den ligge i <form onsubmit="validateDW()"> ??
Avatar billede frasa Juniormester
11. maj 2021 - 20:29 #7
if (x == 1 && y == 1) løste min udfordring....
Avatar billede claes57 Ekspert
11. maj 2021 - 20:39 #8
det var en idé - ikke noget, jeg har prøvet. Men jeg faldt over https://smallbusiness.chron.com/make-dropdown-list-change-depending-selection-different-list-microsoft-excel-75852.html som måske er svaret (det ligger ud over, hvad jeg lige kan gennemskue)
Avatar billede ejvindh Ekspert
11. maj 2021 - 21:55 #9
#1: Ja, det gør. Men det er lidt "held" for dig, at den gør det, fordi Javascript er så "tålmodig" med at man sammenblander variabeltyper.

Hvis du fx i stedet havde udskiftet...
if (x == 1 && y == 1)
...med...
if (x === 1 && y === 1)
...ville du kunne se, at det ikke virker længere. Og det er fordi html-formen ganske rigtigt videregiver select-værdierne som strings.

For at gøre det lidt mere korrekt, tænker jeg derfor du burde udskifte de to variabel tildelinger med:

  var x = parseInt(document.getElementById("DW").value);
  var y = parseInt(document.getElementById("DW1").value);

Så vil både din oprindelige og din nye udgave virke. Fordi x og y grundlæggende er talværdier.
Avatar billede ejvindh Ekspert
11. maj 2021 - 21:56 #10
....og ja, som du også skriver: onsubmit skal ikke være på knappen, men på formen.
Avatar billede ejvindh Ekspert
11. maj 2021 - 22:10 #11
En lidt mere automatiseret løsning kunne være nedenstående. Men den går lidt bagom ryggen på brugeren, og hvis ikke brugeren opdager, at et tidligere valg er blevet omgjort, kan det føre til frustration:

<select id="DW" name="DW" onchange="resetSelector('DW1');">
    <option selected value="0">o - Ingen</option>
    <option value="1">1</option>
</select>
<select id="DW1" name="DW1" onchange="resetSelector('DW');">
    <option selected value="0">o - Ingen</option>
    <option value="1">1</option>
</select>

<script>
function resetSelector(str) {
  document.getElementById(str).value = "0";
}
</script>
Avatar billede ejvindh Ekspert
11. maj 2021 - 22:19 #12
Udvidet til at realisere hele Claes57's ide:

<select id="DW" name="DW" onchange="resetSelector('DW1', this.value);">
    <option selected value="0">o - Ingen</option>
    <option value="1">1</option>
</select>
<select id="DW1" name="DW1" onchange="resetSelector('DW', this.value);">
    <option selected value="0">o - Ingen</option>
    <option value="1">1</option>
</select>


<script>
function resetSelector(str, value) {
  console.log(str + "---" + value);
  if (value !== "0" && document.getElementById(str).value !== "0") {
    document.getElementById(str).value = "0";
    alert("Du kan ikke vælge både DW og DW1. Den anden selector nulstilles.");
  }
}
</script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester