Recorrer campos de un formulario con JQuery

mayo 25, 2012

Documento sin título

Recorrer campos de un formulario con JQuery

Este pequeño ejemplo ilustra la manera de recorrer los campos de un formulario con JQuery.

<!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=utf-8" />
  <title>Ejemplo</title>
  <script language="JavaScript" type="text/javascript" src="jquery.js" charset="utf-8"></script>
  <script>
       $(document).ready(function(){
        $("#frmDatos").find(':input').each(function() {
         var elemento= this;
         alert("elemento.id="+ elemento.id + ", elemento.value=" + elemento.value); 
        });
       });
  </script>
 </head>
 <body>
  <form id="frmDatos">
   <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
     <td>Input 1</td>
     <td><input name="txtinp1" id="txtinp1" type="text" value="Hola Mundo" /></td>
    </tr>
    <tr>
     <td>Input 2</td>
     <td><input name="chkInp2" type="checkbox" id="chkInp2" value="valor del check" checked /></td>
    </tr>
    <tr>
     <td>Input 3</td>
     <td><input name="optInp3" type="radio" id="optInp3" value="valor 123" checked /></td>
    </tr>
    <tr>
     <td>Input 4 (Oculto)</td>
     <td><input name="hidden_inp4" type="hidden" id="hidden_inp4" value="valor oculto" /></td>
    </tr>
<tr>
     <td>Input 5 </td>
     <td><select id="cboLista" name="cboLista"><option value="1">1</option><option value="2">2</option></select></td>
    </tr>
</table>
   </table>
  </form>
 </body>
</html>