Javescript der tjekker tjekbbokse

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.

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

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.

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.

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;

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.

"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;

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;

#7: Ja, sorry: Alert'en skulle self. først have været efter loopet.

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.

"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.

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.

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>

Det kode vi viser dig skal stå i din validate-funktion.

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.

I konsollen står der:
Uncaught SyntaxError: Illegal return statement
om denne linje:
let found = false;

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[]".

Hvis jeg forstår det rigtigt, skal jeg droppe return false i tjekkene af de andre inputfelter?

Nej, du ikke fjerne "return false" andre steder. Du skal netop, som skrevet, sige "return false", når der er konstateret en fejl.

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

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å.

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?

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.

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

Den besked har ikke noget med din kode at gøre. Prøv at genstarte alt så du begynder på en frisk.

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.

Din PHP skal nu kigge efter navnet "forening" - gør den det?

Ja.

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.

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.

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.

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

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

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 :)

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;-)