Controllo cb spuntata

**navajo75** · 06-05-2012, 11:24

Salve,

voglio controllare che una checkbox venga selezionata, altrimenti mando a video un popup che avvisa di spuntarla.
Con il seguente codice, il popup esce fuori, ma quando lo chiudo, sebbene la cb non sia stata spuntata, vado comunque alla pagina successiva (quella settata nell'action del form).

codice:

<script type="text/javascript"> 
  function cbCheck(){   cbObj = document.getElementById('cb');   
  if (!cbObj.checked)     
    alert("Devi accettare le condizioni per procedere oltre");   
  } 
</script>  
<form id="form1" name="form1" method="post" action="manda.html">   
  <label>   
    <input type="checkbox" name="privacy" id="cb" />   
  </label>   
  <label>   
    <input type="submit" name="button" id="button" value="Controlla" onclick="cbCheck()" />    </label> 
</form>

Perchè???

**cavicchiandrea** · 06-05-2012, 13:31

Perché usi un tasto submit che processa comunque la action del form.
soluzione con submit:

codice:

<script type="text/javascript"> 
  function cbCheck(){   cbObj = document.getElementById('cb');   
  if (!cbObj.checked){     
    alert("Devi accettare le condizioni per procedere oltre");
return false; }
  } 
</script>  
<form id="form1" name="form1" method="post" action="manda.html" onsubmit="return cbCheck()">   
  <label>   
    <input type="checkbox" name="privacy" id="cb" />   
  </label>   
  <label>   
    <input type="submit" name="button" id="button" value="Controlla" />    </label> 
</form>

con button:

codice:

<script type="text/javascript"> 
  function cbCheck(){   cbObj = document.getElementById('cb');   
  if (!cbObj.checked){     
    alert("Devi accettare le condizioni per procedere oltre");
}else{
document.form1.submit()
}   
  } 
</script>  
<form id="form1" name="form1" method="post" action="manda.html">   
  <label>   
    <input type="checkbox" name="privacy" id="cb" />   
  </label>   
  <label>   
    <input type="button" name="button" id="button" value="Controlla" onclick="cbCheck()" />    </label> 
</form>

P.S. Sbaglio o lo studio non è il tuo forte?

**carlomarx** · 06-05-2012, 14:54

Originariamente inviato da cavicchiandrea
con button:

Occhio che mettendo un button invece di un submit e facendo il controllo solo su di esso, il navigante può bypassare il tutto semplicemente premendo invio su un campo del form. Per evitare questo inconveniente il controllo andrebbe fatto sempre sull'evento onsubmit e mai su un button. Magari aggiungendo un return true in caso di controllo positivo (e opzionalmente un focus sull'elemento in caso di esito negativo)...:

codice:

<script type="text/javascript"> 
  function cbCheck() {
    var oCb = document.getElementById("cb");
    if (!oCb.checked) {
      alert("Devi accettare le condizioni per procedere oltre.");
      oCb.focus();
      return false;
    }
    return true;
  } 
</script>

**navajo75** · 06-05-2012, 16:27

Grazie ad entrambe, ho risolto.

P.s.: hai ragione Andrea, posto molto e forse m'impegno poco. Devo però dirti che non è mancanza di volontà, bensì di tempo.

Saluti a tutti,
Marco

**cavicchiandrea** · 06-05-2012, 16:27

Originariamente inviato da carlomarx
Occhio che mettendo un button invece di un submit e facendo il controllo solo su di esso, il navigante può bypassare il tutto semplicemente premendo invio su un campo del form...

Non mi risulta sia attivo l'invio quando nel form mancano tasto submit o image (quando ho avuto necessità di "bloccare" il tasto invio toglievo il submit e mettevo il button)

**carlomarx** · 06-05-2012, 18:13

Originariamente inviato da cavicchiandrea
Non mi risulta sia attivo l'invio quando nel form mancano tasto submit o image (quando ho avuto necessità di "bloccare" il tasto invio toglievo il submit e mettevo il button)

No, no. Occhio che così facendo crei dei bugs di sicurezza. Premendo invio su questa pagina il form invia tranquillamente i dati a google:

codice:

<!doctype html>
<html>
<head></head>
<body>
<form action="http://www.google.com/" method="get">


Cerca con Google: <input type="text" name="q" /></p>
</form>
</body>
</html>

Agire sempre sull'onsubmit...

Discussione: Controllo cb spuntata

Strumenti discussione

Ricerca discussione

Visualizza

Controllo cb spuntata

Permessi di invio