Professional Documents
Culture Documents
html
Recorrer campos de un formulario con JQuery Este pequeo 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>
Demostracin
Input 1 Input 2 Input 3 Input 4 (Oculto) Input 5 Publicado por Aleduc en 11:27 Enviar por correo electrnicoEscribe un blogCompartir con TwitterCompartir con Facebook
Let's say youre having issues with your event handlers not firing or that they present some issue during their executions. How do you go about debugging such a scenario? Well, there are several techniques you can try, and Ill examine some of them in the following examples.
The first step you might take is to find out whether your event handler is registered with the event that you expected. If you used either the bind method or one of the jQuery event helpers (click, hover, keypress, and so on) to register your event handler, you can see which events are attached to the actual DOM element by using the jQuery data method. The following code snippet (see jsbin.com/asili/edit), modified from Cody Lindsey's jQuery Enlightenment eBook, displays all the events attached to a particular DOM element using the Firebug console.
1. <script type="text/javascript"> 2. $(function() { 3. $('p').bind('click mouseleave', function(event){ 4. console.log(event.type); 5. }); 6. 7. //Open Firebug and look at the console to see the attached event s 8. console.dir($('p').data('events')); 9. });
10. </script> 11. 12. <p>Hover over this to reveal attached events...</p>
First, the click and mouseleave events are attached to the paragraph tag. The console.dir Firebug method is then used to get the event information stored in the paragraph DOM element and display it in the console window. Take a look at Figure 6 (jsbin.com/asili) for the results of the executed code. You might also notice that when you click or mouseover the paragraph, the event name is displayed in the console.