Una funzioncina facile facile in JavaScript per controllare che l’utente abbia riempito tutti i campi di una form.
function controlform(){
var f = document.forms[0];
var n = f.elements.length;
for(var i = 0; i < n; i++){
if(f.elements[i].value == ”){
return alert(‘Error: value ‘+f.elements[i].name+ ‘ is empty’);
return false;
}
}
}
Niente di più semplice, ma ricordate che per come scritta, può essere usata solo se tutti i campi di una form si rendono obbligatori. Ottimo da integrare con applicativi AJAX per evitare che lo scripting lato server diventi troppo pesante.
Grazie!! 🙂
Non so se puoi aiutarmi:
ho una pagina jsp che genera, in base al risultato di una query, una serie di form con, all'interno, dei campi modificabili. Di questi campi tre devono essere modificati insieme, cioè se viene modificato un campo devono essere modificati anche gli altri due. Ho fatto un javascript che mi gestisce appunto questa azione, ma non riesco a prendere i valori dei campi all'interno dei form.
La funzione è fatta pressappoco così:
function ctrModificaRiga(indice) {
var ind_cod = (indice * 13) + 1;
var cod = Trim(document.forms[indice].elements[ind_cod].value);
}
prende in ingresso l'indice per selezionare il form, ma all'esecuzione mi da errore. Cosa sbaglio? Come devo fare per recuperare i valori all'interno dei vari form?
Ti ringrazio anticipatamente.
Ciao alsa.
Non so se ho ben capito. Prova questo codice e dimmi se è più o meno quello che cerchi.
<html>
<head>
<script>
function change(name,q){
var f = document.forms[name];
var val = f.elements['ciao-'+q].value;
f.elements['pippo-'+q].value = val;
f.elements['marco-'+q].value = val;
}
</script>
</head>
<body>
<form name="prova" action="javascript:void(0)">
<input name="ciao-1" type="text" onchange="change('prova',1)" />
<input name="pippo-1" type="text" />
<input name="marco-1" type="text" />
<hr />
<input name="ciao-2" type="text" onchange="change('prova',2)" />
<input name="pippo-2" type="text" />
<input name="marco-2" type="text" />
</form>
</body>
</html>
Il tuo codice funziona solo se scritto così:
function controlform(){
var f = document.forms[0];
var n = f.elements.length;
for(var i = 0; i < n; i++){
if(f.elements[i].value == ''){
alert('Error: value '+f.elements[i].name+ ' is empty');
return false;
}
}
}
Ciao Jess,
Con che browser hai avuto il mal funzionamento dato al retur alert?
non so' se puoi aiutarmi ma non riesco a farlo funzionare! Grazie in anticipo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<script language="JavaScript">
function controllo(){
with(document.modulo) {
if(cognome.value=="") {
alert("Errore: compilare il campo Cognome");
cognome.focus();
return false;
}
if(nome.value=="") {
alert("Errore: compilare il campo Nome");
nome.focus();
return false;
}
if(citta.value=="") {
alert("Errore: compilare il campo Città");
citta.focus();
return false;
}
if(telefono.value=="") {
alert("Errore: compilare il campo Telefono");
telefono.focus();
return false;
}
if(e-mail.value=="") {
alert("Errore: compilare il campo E-Mail");
e-mail.focus();
return false;
}
}
alert("Controllo effettuato con successo. Il modulo sarà inviato.");
return true;
}
</script>
<style type="text/css">
<!–
.Stile1 {color: #FF0000}
.Stile2 {font-size: 24px}
–>
</style>
</head>
<body>
<table width="1023" border="0" cellpadding="0" cellspacing="0">
<!–DWLayoutTable–>
<tr>
<td width="232" height="32"> </td>
<td width="10"> </td>
<td width="95"> </td>
<td width="30"> </td>
<td width="83"> </td>
<td width="57"> </td>
<td width="4"> </td>
<td width="17"> </td>
<td width="495"> </td>
</tr>
<tr>
<td height="22"> </td>
<td> </td>
<td valign="top"><div align="center">Cognome: </div></td>
<td valign="top"><div align="center" class="Stile1">*</div></td>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="textfield" />
</label>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="15"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="22"></td>
<td></td>
<td valign="top"><div align="center">Nome: </div></td>
<td valign="top"><div align="center" class="Stile1">*</div></td>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><input type="text" name="textfield2" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="20"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="22"></td>
<td></td>
<td valign="top"><div align="center">Città:</div></td>
<td valign="top"><div align="center" class="Stile1">*</div></td>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><input type="text" name="textfield3" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="21"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="22"></td>
<td></td>
<td valign="top"><div align="center">Telefono:</div></td>
<td valign="top"><div align="center" class="Stile1">*</div></td>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><input type="text" name="textfield4" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="19"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="22"></td>
<td></td>
<td valign="top"><div align="center">E-Mail:</div></td>
<td valign="top"><div align="center" class="Stile1">*</div></td>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><input name="textfield5" type="text" id="textfield5" value="" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="23"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="22"></td>
<td></td>
<td valign="top"><div align="center">Oggetto:</div></td>
<td> </td>
<td colspan="4" rowspan="4" valign="top" bgcolor="#FFFFFF"><form id="form2" name="form2" method="post" action="">
<label></label>
<textarea name="textarea" rows="9"></textarea>
</form></td>
<td> </td>
</tr>
<tr>
<td height="14"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="19"></td>
<td colspan="3" valign="top"><div align="center"><span class="Stile1"> * campi obbligatori </span></div></td>
<td></td>
</tr>
<tr>
<td height="92"></td>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="25"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="30"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td valign="top"><div align="center" class="Stile2">
<input type="submit" name="Submit" value="Invia" />
</div> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="225"></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>