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. Quote Link to comment 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> Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.