Avatar billede Asky Forsker
27. september 2023 - 20:04 Der er 34 kommentarer og
1 løsning

Javescript der tjekker tjekbbokse

Jeg har tre afkrydsningsfelter (checkbox) ved navn valg[] i en formular og jeg vil kontrollere. om de bliver udfyldt. Min kode ser sådan ud:

if (checkbox.valg.value==="") {
        alert("Husk også checkboxene.");
        checkbox.valg.focus();
        return false;
    }
Men det virker åbenbart ikke. Hvad er der forkert?
Avatar billede erikjacobsen Ekspert
27. september 2023 - 20:27 #1
sådan en name="..." er beregnet til at aflæse på serveren. I javascript er det meningen at din checkboxe skal have forskelligt id, og så kan du finde dem med document.getElementById.

Du kunne måske nok også "snyde" og bruge:

  let checkboxe = document.getElementsByName("valg[]");

og løbe listen igennem igennem og så om der er krydset af.
Avatar billede Asky Forsker
27. september 2023 - 20:37 #2
hvad er så forskellen, når dette tjek af felterne i formularen virker:
function validate(frm) {
       
    if (frm.navn.value==="") {
        alert("Alle felter med * skal udfyldes.");
        frm.navn.focus();
        return false;
    }
fortsætter med de andre felter i formularen
Avatar billede erikjacobsen Ekspert
27. september 2023 - 20:43 #3
Flere felter kan have samme navn, så generelt vil det ikke virke. Og slet ikke når navnet er:  valg[]  - altså med kantede parenteser.

De kantede parenteser typer på at du anvender PHP på serveren.

Bruger du unikke id-er på felterne er problemet løst.
Avatar billede Asky Forsker
28. september 2023 - 09:02 #4
Det er rigtigt, at jeg mest bruger PHP. Denne kode i PHP-en:

$avalg = (isset($_POST['valg']) ? $_POST['valg'] : "");
    if(empty($avalg)){ die ("Tryk tilbage og marker et af felterne medlem/ikke medlem."); }
        $N = count($avalg);
    echo " ";
 
    foreach($avalg as $valg) {
        $string_valg.= $valg." ";
        echo " ";
    }
og så en .$string_valg. i svaret.
Det giver en respons, hvis man ikke vælger et af felterne, men det er først når man har trykket på "submit". Javaschript på felterne gør, at man bliver på samme side, indtil formularen er korrekt udfyldt.
Med PHP-kode på alle felter, bliver det besværligt for brugeren.
Avatar billede ejvindh Ekspert
28. september 2023 - 12:14 #5
Ja, det er klart mere elegant at gøre det med javascript, men man er jo nødt til at gøre det i overensstemmelse med, hvordan javascript læser koden.

Fungerer dette bedre:

  let found = true;
  var checkboxes = document.getElementsByName("valg[]");
  for (i = 0; i < checkboxes.length; i++) {
    if (!checkboxes[i].checked) {
        alert("Husk også checkboxene.");
      found = false;
    }
  }
  return found;
Avatar billede Asky Forsker
28. september 2023 - 21:48 #6
Nu har jeg lige prøvet det af. Det virker desværre ikke, men efter "submit" virker PHP-koden stadigvæk, så brugeren må trykke tilbage, hvorefter email og telefonnummer også skal genskrives.
Avatar billede erikjacobsen Ekspert
29. september 2023 - 13:29 #7
"Virker ikke" er ikke til synderlig meget hjælp. Hvad sker der? Hvad skulle ske? Hvilken kode udføres - præcist hvilken kode?

Men koden fra eyvindh er vist heller ikke helt smart. Hvis første checkbox ikke er krydset af, vil beskeden komme. Men er det ikke en kontrol af at mindst en af checkboxene er krydset af?

Helt utestet:

  let found = false;
  var checkboxes = document.getElementsByName("valg[]");
  for (i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) { found=true; }
  }
  if (!found) {  alert("Husk også checkboxene."); }
  }
  return found;
Avatar billede erikjacobsen Ekspert
29. september 2023 - 13:30 #8
Syntaksfejl

  let found = false;
  var checkboxes = document.getElementsByName("valg[]");
  for (i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) { found=true; }
  }
  if (!found) {  alert("Husk også checkboxene."); }
  return found;
Avatar billede ejvindh Ekspert
29. september 2023 - 14:12 #9
#7: Ja, sorry: Alert'en skulle self. først have været efter loopet.
Avatar billede Asky Forsker
29. september 2023 - 14:22 #10
Det er jo en lille smule nørdet. da PHPen jo udfører arbejdet, men det smarte skulle være at blive på samme side, indtil formularen er korrekt udfyldt. Der får man en alert, hvis de andre felter ikke er udfyldt.
Angående "Virker ikke ". Der sker ingenting-ingen alerter eller fejlmeddelelser.
jeg prøver den reviderede udgave af.
Avatar billede Asky Forsker
29. september 2023 - 14:39 #11
"Men er det ikke en kontrol af at mindst en af checkboxene er krydset af?" JO, netop.
Har nu testet de nævnte eksempler. Der sker ikke andet andet end at PHP koden beder om at trykke tilbage og udfylde det manglende. Der er ingen fejlmeddelelser.
Avatar billede ejvindh Ekspert
29. september 2023 - 14:55 #12
Har du prøvet at kigge i konsollen (klik F12 for at åbne den) efter fejlmeddelelser? Hvis ikke der står noget i den, så tror jeg det bliver nødvendigt at se html-koden for siden for at se om du har fået javascript-koden sat rigtigt ind.
Avatar billede Asky Forsker
29. september 2023 - 17:24 #13
Jeg har delt de to javaschipts i to, da jeg ikke synes, de hører under samme kategori.
De er placeret i Head - delen af HTML-en (nederst lige før -body)

<script type="text/javascript">
let found = false;
  var checkboxes = document.getElementsByName("valg[]");
  for (i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) { found=true; }
  }
  if (!found) {  alert("Husk også checkboxene."); }
  }
  return found;
  </script>

<script type="text/javascript"> // alle af typen validate virker fint
function validate(frm) {
if (frm.navn.value==="") {
alert("Alle felter med * skal udfyldes.");
frm.navn.focus();
        return false;
    }   
if (frm.adresse.value==="") {
alert("Vi vil også gerne kende din adresse.");
frm.adresse.focus();
return false;
  }    osv osv
    return true;
}

</script>
Avatar billede erikjacobsen Ekspert
29. september 2023 - 18:19 #14
Det kode vi viser dig skal stå i din validate-funktion.
Avatar billede Asky Forsker
29. september 2023 - 19:54 #15
Så ser koden sådan ud:
<script type="text/javascript">
function validate(frm) {
let found = false;
  var checkboxes = document.getElementsByName("valg[]");
  for (i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) { found=true; }
  }
  if (!found) {  alert("Husk også checkboxene."); }
  }
  return found;
 
if (frm.navn.value==="") {
        alert("Alle felter med * skal udfyldes.");
        frm.navn.focus();
        return false;
    }       
if (frm.adresse.value==="") {
        alert("Vi vil også gerne kende din adresse.");
        frm.adresse.focus();
        return false;
    }
    if (frm.postnummer.value==="") {
        alert("Husk postnummer (4 cifre).");
        frm.postnummer.focus();
        return false;
    } // osv osv
    return true;
}
</script>
Men den virker stadigvæk ikke. Ingen fejlmeddelelser.
Avatar billede Asky Forsker
29. september 2023 - 20:13 #16
I konsollen står der:
Uncaught SyntaxError: Illegal return statement
om denne linje:
let found = false;
Avatar billede erikjacobsen Ekspert
29. september 2023 - 20:21 #17
Ja, der er fejl i konsollen, så lad være med at sige at der ikke er fejl.

Hvis du lægger mærke til forskellen mellem indlæg #7 og #8 så er der en ændring.

Men når din kode med den her angivne skal du lige tænke dig lidt om: Vi har sagt return, fordi vi ikke ved om du sætter koden først eller sidst. Hvis du kommer til den return i linje 13, så stopper efterfølgende kontrol.

Som du har at det op vil det være smart kun at sige return false, hvis der er fejl, og ellers fortsætte med resten af din kode.

Yderligere har du netop ikke et felt med navn "navn". Det hedder jo "navn[]".
Avatar billede Asky Forsker
29. september 2023 - 22:23 #18
Hvis jeg forstår det rigtigt, skal jeg droppe return false i tjekkene af de andre inputfelter?
Avatar billede erikjacobsen Ekspert
29. september 2023 - 22:34 #19
Nej, du ikke fjerne "return false" andre steder. Du skal netop, som skrevet, sige "return false", når der er konstateret en fejl.
Avatar billede Asky Forsker
30. september 2023 - 10:17 #20
I konsollen nævnes ukorrekt brug af navn på et formelement. Det må være navn[]..gætter jeg på.
Så hvis javascript skal bruges her, må afkrydsningsfelterne have individuelle navne, og det så må programmeres således at et felt skal være afkrydset
Avatar billede erikjacobsen Ekspert
30. september 2023 - 11:29 #21
Jeg går da ud fra at du har fjernet alt med

  if (frm.navn.value==="") {  ......

og ikke erstattet det med syntaktisk vrøvl som:  if (frm.navn[].value==="") {

Det er netop denne stump kode vi har givet dig en (formentlig) korrekt løsning på.
Avatar billede Asky Forsker
01. oktober 2023 - 09:06 #22
Nu har jeg lavet felterne om til en selectbox med 3 muligheder:

Medlem af foreningerne
<select name= "forening" multiple="false" >
<option selected>&nbsp;</option>
<option name="medlem[]"> Medlem_Skolebibliotekarer</option>
<option name="medlem[]"> Medlem_IT-vejlederforeningen</option>
<option name="medlem[]"> Medlem_Nej</option>
</select>
og Javascriptet:
<script type="text/javascript">

function afsendelse(form) {

foreningValg = form.forening.selectedIndex
  if(form.forening.options[foreningValg].value==""){
      alert("vælg en forening")
    return false   
    }
    return true
}
Men der er stadigvæk fejl. Konsollen siger der er brugt deprecated kode. Måske er der select boxen, der ikke bruges mere?
Avatar billede erikjacobsen Ekspert
01. oktober 2023 - 09:28 #23
Jeg kan ikke forstå hvor du har set et eksempel hvor "name" attributten står i <option>-tagget.  "name" skal stå i select.

Notationen med kantede parenteser, medlem[], er af hensyn til PHP, og kan ikke bare lige bruges i Javascript.

Du kan nøjes med at kigge på selectedIndex for at se om der er valgt noget.
Avatar billede Asky Forsker
01. oktober 2023 - 10:48 #24
Nu er selecten lavet om:
<label for="forening-select">Vælg medlemsskab i boksen:</label>
<select name="forening" id="forening-select" multiple="false">

<option selected>&nbsp;</option>
<option value="Medlem_Skolebibliotekarer"> Medlem_Skolebibliotekarer</option>
<option value="Medlem_IT-vejlederforeningen"> Medlem_IT-vejlederforeningen</option>
<option value="Medlem_Nej"> Medlem_Nej</option>
</select>

Konsollen siger stadigvæk
non-JS module files deprecated
Avatar billede erikjacobsen Ekspert
01. oktober 2023 - 12:23 #25
Den besked har ikke noget med din kode at gøre. Prøv at genstarte alt så du begynder på en frisk.
Avatar billede Asky Forsker
01. oktober 2023 - 19:19 #26
Nu virker selve formularfilen, men PHP-response.filen kan stadigvæk ikke læses.
Måske er det selve PHP-kodningen, der ikke lever op til PHP 8.2.
Desværre kunne jeg heller ikke kontrollere JavaScriptet på selectboxen, selvom det nu er lige efter bogen. Jeg starter en ny tråd i PHP-afdelingen.
Avatar billede erikjacobsen Ekspert
01. oktober 2023 - 20:19 #27
Din PHP skal nu kigge efter navnet "forening" - gør den det?
Avatar billede Asky Forsker
01. oktober 2023 - 21:06 #28
Ja.
Avatar billede erikjacobsen Ekspert
01. oktober 2023 - 21:19 #29
Som jeg lige skimmede dit andet spørgsmål, så tror du stadig at der afleveres et array af værdier:

    $I = count($aforening);

Det gør der jo kun hvis dit "name" er noget med kantede parenteser. Du få een værdi, en streng. Ikke andet.

Kommer der ikke en fejlbesked? Eventuelt i loggen på serveren? Uden fejlbeskeder kan man ingenting, og spilder sin tid.
Avatar billede Asky Forsker
01. oktober 2023 - 22:40 #30
Min oprindelige ide med checkbokse har jeg nu konverteret til radiobuttons. Når man grupperer dem med samme navn, nærmer man sig det, jeg oprindelig havde tænkt.
Her er min oprindelige php-kode stadig virksom ved tryk på submit, men ideen var at blive på samme side til alt er udfyldt.
På nettet er der mange forslag til Javascript på radiobuttons, jeg leder stadig efter et forslag, der tjekker om én af knapperne er aktiveret.
Avatar billede Asky Forsker
02. oktober 2023 - 13:29 #31
Har nu afprøvet flere forslag, men ingen af dem forhidrer at submit går i aktion, selvom ingen af radiobuttons er valgt. Der burde være en mulig kode, der forhindrer man forlader formularen, før en af knapperne er markeret.
Avatar billede ejvindh Ekspert
02. oktober 2023 - 14:03 #32
Jeg skal gerne indrømme, at jeg har ikke helt overblik over problematikken længere. Men hvis du er gået over til at bruge radiobuttons, var det måske en mulighed bare at indføje "required"-parameteren. Som fx her:

https://stackoverflow.com/a/8287947
Avatar billede Asky Forsker
02. oktober 2023 - 16:27 #33
Nu har jeg afprøvet flere Javascript -koder både på checkboxe og selectbox, og så er løsningen bare radiobuttons og at skrive ="required" Radio er perfekte og virker efter min hensigt at blive i formularen til den er korrekt udfyldt. Resten af felterne er jo i forvejen tjekket af JavaScript med focus, hvis de ikke udfyldes. Resultatet af radioknapperne samles op af PHP-koden og skrives med i den afsendte mail til brugeren og til firmaet.
Tak for ideen
Avatar billede ejvindh Ekspert
03. oktober 2023 - 07:52 #34
Løsningen er ofte simpel når man først har fundet den ;-)

Godt at du fandt den. Jeg er nu ret sikker på at erikjacobsens kode ovenfor også kunne have løst opgaven. Men så vidt jeg kan se, havde du fået lukket validate funktionen forkert (der er en "tuborg-luk"-parentes for mange), da du satte den ind på din side. Og derfor virkede koden ikke ordentligt :)
Avatar billede Asky Forsker
03. oktober 2023 - 11:14 #35
Der er ikke megen forskel på brugen af checkboxe og brugen af radiobuttons.
Der er dog den forskel, at radio har indbygget, at man kun kan vælge én ad gangen.
Måske kunne man også bruge requiret på checkboxe?
Selve php-koden er jo den samme.
Lige nu har jeg eksperimenteret med CSS på required, hvor man kan få de obligatoriske felter fremhævet på forskellig vis.
Måske skulle jeg også skifte mit billede, som er en sommerfugl af mølgruppen ved navn Neopalpa donaldtrumpii. Men det er jo en anden historie;-)
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