Campi obbligatori se...

**wegawhite** · 09-09-2008, 09:04

Ciao a tutti.

Ho un problema con un form dati; il form di riferimento è questo:

codice:

<input type="checkbox" id="C1" name="C1" value="ON">

<select size="1" id="campo_select_1" name="campo_select_1">
  <option>Seleziona</option>
  <option value="AAA">AAA</option>
  <option value="BBB">BBB</option>
</select>

<input type="text" id="numerico_1" name="numerico_1" size="5">
<input type="text" id="numerico_2" name="numerico_2" size="5">

Il problema è che non so a priori di quanti campi sarà costituito questo form perchè è generato dinamicamente, quindi potrei avere una sola riga come nell'esempio di cui sopra, ma anche "n" righe tutte uguali ma con il numero finale diverso ad esempio:

codice:



<input type="checkbox" id="C1" name="C1" value="ON">

<select size="1" id="campo_select_1" name="campo_select_1">
  <option>Seleziona</option>
  <option value="AAA">AAA</option>
  <option value="BBB">BBB</option>
</select>

<input type="text" id="numerico_1" name="numerico_1" size="5">
<input type="text" id="numerico_1_1" name="numerico_1_1" size="5">





<input type="checkbox" id="C2" name="C2" value="ON">

<select size="1" id="campo_select_2" name="campo_select_2">
  <option>Seleziona</option>
  <option value="AAA">AAA</option>
  <option value="BBB">BBB</option>
</select>

<input type="text" id="numerico_2" name="numerico_2" size="5">
<input type="text" id="numerico_2_2" name="numerico_2_2" size="5">




....

Il problema è come faccio a rendere obbligatoria la compilazione di tutti i campi che formano la riga quando si mette il flag nel checkbox corrispondente ?

Ad esempio metto il flag in:

codice:

<input type="checkbox" id="C1" name="C1" value="ON">

le righe che corrispondono al checkbox C1, cioè:

codice:

<select size="1" id="campo_select_1" name="campo_select_1">
  <option>Seleziona</option>
  <option value="AAA">AAA</option>
  <option value="BBB">BBB</option>
</select>

<input type="text" id="numerico_1" name="numerico_1" size="5">
<input type="text" id="numerico_1_1" name="numerico_1_1" size="5">

Devono essere compilate obbligatorimente se si vuole inviare il form.
Nei campi del form con il prefisso "numerico" vanno inseriti solo numeri niente lettere o altri caratteri.

Spero sia un problema risolvibile.

Spero che l'esposizione del problema sia chiaro, altrimenti fatemi sapere.
Grazie x l'aiuto.
WW

**artorius** · 09-09-2008, 14:38

mmm allora...

fai così:

Codice PHP:


function checkForm()

{

   var checks = new Array();

   var els = document.getElementsByTagName('input');



   var ret = true;



   var num = 0;



   for(i = 0; i < els.length; i++)

   {

      if(els[i].type.toUpperCase() == "CHECKBOX")

         checks[num++] = els[i];

   }

   for(i = 0; i < checks.length; i++)

   {

      if(checks[i].checked)

      {

         var name = checks[i].name.substring(1);

         var select, input1, input2;

         select = document.getElementById("campo_select_"+name);

         input1 = document.getElementById("numerico_"+name);

         input2 = document.getElementById("numerico_"+name+"_"+name);

         if(select.selectedIndex <= 0 || input1.value == "" || input2.value == "")

             ret = false;

      }

   }



   return ret;

}

Metti questa funzione sull'evento onSubmit della form (<form onSubmit="return checkForm()" ... )

N.B. ci possono essere dei problemi se nella pagina sono presenti dei checkbox che non devi considerare

**wegawhite** · 09-09-2008, 15:01

Ti ringrazio davvero tanto, gentilissimo per aver risposto.

Ho però dei problemi ( e ti pareva ... )

1) Se nessun checkbox è selezionato nel form, il form parte e va bene ;

2) Se seleziono un checkbox di qualsiasi riga senza selezionare gli altri campi della stessa riga, il form si blocca e va bene ;

3) Se seleziono una riga intera del form ( checkbox, select e campi numerici ) il form non parte e NON va bene ;

4) Se seleziono tutte le righe intere del form ( checkbox, select e campi numerici ) il form non parte e NON va bene ;

Cosa è che non sta funzionando ?

Questa è la pagina completa:

Codice PHP:


<html>



<head>



<script>

function checkForm() 

{ 

   var checks = new Array(); 

   var els = document.getElementsByTagName('input'); 



   var ret = true; 



   var num = 0; 



   for(i = 0; i < els.length; i++) 

   { 

      if(els[i].type.toUpperCase() == "CHECKBOX") 

         checks[num++] = els[i]; 

   } 

   for(i = 0; i < checks.length; i++) 

   { 

      if(checks[i].checked) 

      { 

         var name = checks[i].name.substring(1); 

         var select, input1, input2; 

         select = document.getElementById("campo_select_"+name); 

         input1 = document.getElementById("numerico_"+name); 

         input2 = document.getElementById("numerico_"+name+"_"+name); 

         if(select.selectedIndex <= 0 || input1.value == "" || input2.value == "") 

         

             alert("KO")

             ret = false; 

      } 

   } 



   return ret; 

}



</script>



</head>



<body>



<form method="POST" action="page.asp" onSubmit="return checkForm()">



<input type="checkbox" id="C1" name="C1" value="ON">



<select size="1" id="campo_select_1" name="campo_select_1">

  <option>Seleziona</option>

  <option value="AAA">AAA</option>

  <option value="BBB">BBB</option>

</select>



<input type="text" id="numerico_1" name="numerico_1" size="5">

<input type="text" id="numerico_1_1" name="numerico_1_1" size="5">













<input type="checkbox" id="C2" name="C2" value="ON">



<select size="1" id="campo_select_2" name="campo_select_2">

  <option>Seleziona</option>

  <option value="AAA">AAA</option>

  <option value="BBB">BBB</option>

</select>



<input type="text" id="numerico_2" name="numerico_2" size="5">

<input type="text" id="numerico_2_2" name="numerico_2_2" size="5">









<input type="checkbox" id="C3" name="C3" value="ON">



<select size="1" id="campo_select_3" name="campo_select_3">

  <option>Seleziona</option>

  <option value="AAA">AAA</option>

  <option value="BBB">BBB</option>

</select>



<input type="text" id="numerico_3" name="numerico_3" size="5">

<input type="text" id="numerico_3_3" name="numerico_3_3" size="5">







<input type="submit" value="Invia" name="B1">



</form>

</body>



</html>

**artorius** · 09-09-2008, 15:09

scusa, ma che cavolo hai scritto a fare quell'alert("KO") ?!??!

E' chiaro che verrà l'alert se c'è l'errore ma poi in ogni caso il ret verrà settato a false (anche se supera il controllo).

Mettici le parentesi graffe ed andrà bene:

if(select.selectedIndex <= 0 || input1.value == "" || input2.value == ""){

alert("KO")
ret = false;

}

**wegawhite** · 09-09-2008, 15:29

Scusa è vero hai ragione... così funziona

Vorrei chiederti un'altra cosa se possibile: il form di cui stiamo parlando si apre in una pagina figlia all'interno di una finestra popup ed è generato da un form contenuto in una pagina madre.

Dovrei passare i valori selezionati nel form pagina figlia ( checkbox, select, etc) in un campo nascosto contenuto all'interno del form in pagina madre, in questa forma:

codice:

nome_checkbox , valore_select , valore_input_text_1 , valore_input_text_1_1

Ho modificato nelle parti in rosso la tua funzione, ma l'unico valore che passa al campo nascosto contenuto all'interno del form in pagina madre è solo il checkbox, perchè:

codice:

function checkForm() 
{ 
   var checks = new Array(); 
   var els = document.getElementsByTagName('input'); 

   var ret = true; 

   var num = 0; 
   
   var stringa='' 

   for(i = 0; i < els.length; i++) 
   { 
      if(els[i].type.toUpperCase() == "CHECKBOX") 
         checks[num++] = els[i]; 
   } 
   for(i = 0; i < checks.length; i++) 
   { 
      if(checks[i].checked) 
      { 
         var name = checks[i].name.substring(1); 
         var select, input1, input2; 
         select = document.getElementById("campo_select_"+name); 
         input1 = document.getElementById("numerico_"+name); 
         input2 = document.getElementById("numerico_"+name+"_"+name); 
        
         if(select.selectedIndex <= 0 || input1.value == "" || input2.value == ""){ 
         
             alert("KO")
             ret = false; 
      } 
      
      else {

      stringa+=els[i].value+',';
      
      window.opener.document.Zform.campo_form_pagina_madre.value = stringa
      alert("Dati memorizzati.");
      window.close();
  }  

  }
        
   } 

   return ret; 
}

...


Invia

**artorius** · 09-09-2008, 16:20

ma lo devi fare il submit della form?

**wegawhite** · 09-09-2008, 16:23

Originariamente inviato da artorius
ma lo devi fare il submit della form?

No, non dovrei farlo... pensavo tramite questo link:

codice:

Invia

di richiamare la funzione checkForm() e, se tutto è a posto, passo i dati nel campo nascosto contenuto all'interno del form in pagina madre.

In effetti i dati passano dal form aperto in popup al form principale, ma solo il valore del checkbox ON, se selezionato nel form in popup.

A meno che la logica che sto seguendo non è quella giusta e puoi propormi qualche altra possibilità.

**artorius** · 09-09-2008, 16:49

Bah, io lo avrei fatto in altro modo, ma magari è una questione che non ho capito a cosa serva, comunque cambia la parte finale con:

else {

stringa+=checks[i].value+','+select.options[select.selectedIndex].value+","+input1.value+","+input2.value+",";

}

}

}

window.opener.document.Zform.campo_form_pagina_mad re.value = stringa
alert("Dati memorizzati.");
window.close();

return false;
}

**wegawhite** · 09-09-2008, 17:26

Grazie, ma qualcosa non funziona... al selezionare il solo checkbox della prima riga e cliccando su invia, invia il form secondario alla pagina principale e chiude la finestra.

Per spiegare meglio il funzionamento ho pubblicato le pagine a questo indirizzo:

http://free.7host06.com/popigu/

Prova tu stesso, per favore.

Il codice modificato è il seguente:

codice:

<html> 

<head> 

<script> 

function checkForm() 
{ 
   var checks = new Array(); 
   var els = document.getElementsByTagName('input'); 

   var ret = true; 

   var num = 0; 
   
   var stringa='' 

   for(i = 0; i < els.length; i++) 
   { 
      if(els[i].type.toUpperCase() == "CHECKBOX") 
         checks[num++] = els[i]; 
   } 
   for(i = 0; i < checks.length; i++) 
   { 
      if(checks[i].checked) 
      { 
         var name = checks[i].name.substring(1); 
         var select, input1, input2; 
         select = document.getElementById("campo_select_"+name); 
         input1 = document.getElementById("numerico_"+name); 
         input2 = document.getElementById("numerico_"+name+"_"+name); 
        
         if(select.selectedIndex <= 0 || input1.value == "" || input2.value == ""){ 
         
             alert("KO")
             ret = false; 
      } 
      
      else {

stringa+=checks[i].value+','+select.options[select.selectedIndex].value+","+input1.value+","+input2.value+",";

} 

}

} 

window.opener.document.myform.campo_form_pagina_madre.value = stringa
alert("Dati memorizzati.");
window.close();

return false; 
}


</script> 

</head> 

<body> 

<input type="checkbox" id="C1" name="C1" value="ON"> 

<select size="1" id="campo_select_1" name="campo_select_1"> 
  <option>Seleziona</option> 
  <option value="AAA">AAA</option> 
  <option value="BBB">BBB</option> 
</select> 

<input type="text" id="numerico_1" name="numerico_1" size="5"> 
<input type="text" id="numerico_1_1" name="numerico_1_1" size="5">

 



 

<input type="checkbox" id="C2" name="C2" value="ON"> 

<select size="1" id="campo_select_2" name="campo_select_2"> 
  <option>Seleziona</option> 
  <option value="AAA">AAA</option> 
  <option value="BBB">BBB</option> 
</select> 

<input type="text" id="numerico_2" name="numerico_2" size="5"> 
<input type="text" id="numerico_2_2" name="numerico_2_2" size="5">

 

 

<input type="checkbox" id="C3" name="C3" value="ON"> 

<select size="1" id="campo_select_3" name="campo_select_3"> 
  <option>Seleziona</option> 
  <option value="AAA">AAA</option> 
  <option value="BBB">BBB</option> 
</select> 

<input type="text" id="numerico_3" name="numerico_3" size="5"> 
<input type="text" id="numerico_3_3" name="numerico_3_3" size="5">

 

Invia

</form> 
</body> 

</html>

**wegawhite** · 09-09-2008, 21:40

Ci sono quasi... posto il codice.

Quello che non riesco a fare:

1) controllare nei campi del form con il prefisso "numerico" che siano inseriti solo numeri niente lettere o altri caratteri;

2) avvisare con una alert che il form è stato debitamente compilato quando una o più righe sono state completate ( la alert prevista prima del return ret si attiva sempre... )

3) avvisare con una alert che il form non può essere inviato se nessuno dei checkbox è stato selezionato.

I punti di cui sopra si devono attivare quando si attiva l'evento onclick contenuto nel link:

codice:

Invia

Confido in un aiuto.

Codice PHP:




<script type="text/javascript">



function checkForm() 

{ 

   var checks = new Array(); 

   var els = document.getElementsByTagName('input'); 



   var ret = true; 



   var num = 0; 

   

   var stringa='' 



   for(i = 0; i < els.length; i++) 

   { 

      if(els[i].type.toUpperCase() == "CHECKBOX") 

         checks[num++] = els[i]; 

   } 

   

   for(i = 0; i < checks.length; i++) 

   { 

      if(checks[i].checked) 

      { 

         var name = checks[i].name.substring(1); 

         var select, input1, input2; 

         select = document.getElementById("campo_select_"+name); 

         input1 = document.getElementById("numerico_"+name); 

         input2 = document.getElementById("numerico_"+name+"_"+name); 

        

         if(select.selectedIndex <= 0 || input1.value == "" || input2.value == ""){ 

         

             alert("KO");

             ret = false;  

      } 

      

      else {





        stringa+=checks[i].value+','+select.options[select.selectedIndex].value+","+input1.value+","+input2.value+",";

        window.opener.document.myform.campo_form_pagina_madre.value = stringa

        window.close();

        ret = false;  



           }

      }

}



//alert("Dati memorizzati.");

return ret; 





}



</script> 



...



[url="#"]Invia[/url]

Discussione: Campi obbligatori se...

Strumenti discussione

Ricerca discussione

Visualizza

Campi obbligatori se...

Permessi di invio