GingerRobot Posted July 4, 2009 Share Posted July 4, 2009 Ok, so i'm very new with jQuery and my javascript's a bit rusty. In an attempt to learn how to use jQuery a bit, i thought i'd try and create a form where new text fields are added once the others have already been used. Here's the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.listen.js"></script> <script type="text/javascript" src="form.js"></script> </head> <body> <form id="theform"> <input type="button" value="Add" name="add" id="add" /> <br /> <input type="password" name="password" id="password" /> <br /> <div id ="container[]">Input 1: <input type="text" name="input[]"/></div> <div id ="container[]">Input 2: <input type="text" name="input[]"/></div> <div id ="container[]">Input 3: <input type="text" name="input[]"/></div> </form> </body> </html> (The button and password field were just there to practice with selectors) And my first attempt at the jQuery/Javascript: jQuery(document).ready(function(){ $("#theform input[type=text]").keypress(function(){ var n = $("#theform input[type=text]").size(); n++; var m = $("#theform input[type=text][value='']").size(); if(m==0){ $("#theform").append("<div id =\"container[]\">Input "+ n +": <input type=\"text\" name=\"input[]\" /></div>"); } }); }); Now, the problem is that the keypress event isn't added for the dynamically added text fields. That is, once the first 3 text fields have something in them, a 4th is added. When you type something into the 4th, nothing happens -- until you type something in one of the first 3 fields, at which point a 5th text field is added. After a bit of Googling, a suggestion was the listen/intercept plugins. So i gave this a go: jQuery(document).ready(function(){ $("#theform input[type=text]").listen('keypress','', function(){ var n = $("#theform input[type=text]").size() + 1; var m = $("#theform input[type=text][value='']").size(); if(m==0){ $("#theform").append("<div id =\"container[]\">Input "+ n +": <input type=\"text\" name=\"input[]\" /></div>"); } }); }); But the result is the same. Any help would be much appreciated. Link to comment https://forums.phpfreaks.com/topic/164763-solved-jquery-adding-event-to-dymanically-added-element/ Share on other sites More sharing options...
RichardRotterdam Posted July 4, 2009 Share Posted July 4, 2009 All you needed is the live() function read the comments for explanation <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script> <script type="text/javascript" > jQuery(document).ready(function(){ // add listener to text input elements (even new created ones using live()) $("#theform input[type=text]").live('keyup',function(){ // fetch all the text input elements var inputElements=$("#theform input[type=text]"); // boolean to see if all elements have values var allElementsFilled=true; jQuery.each(inputElements, function() { console.log(this.value); if(this.value==""){ allElementsFilled=false; } }); // count the amount of input elements var elementCount=inputElements.length; // add a new text input when all are filled if(allElementsFilled){ $("#theform").append("<div id =\"container[]\">Input "+elementCount+": <input type=\"text\" name=\"input[]\" /></div>"); } }); }); </script> </head> <body> <form id="theform"> <div id ="container[]">Input 1: <input type="text" name="input[]"/></div> <div id ="container[]">Input 2: <input type="text" name="input[]"/></div> <div id ="container[]">Input 3: <input type="text" name="input[]"/></div> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/164763-solved-jquery-adding-event-to-dymanically-added-element/#findComment-868809 Share on other sites More sharing options...
GingerRobot Posted July 4, 2009 Author Share Posted July 4, 2009 Looks perfect, i'll try that when I get back home. Thanks for the help. Link to comment https://forums.phpfreaks.com/topic/164763-solved-jquery-adding-event-to-dymanically-added-element/#findComment-868843 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.