JonnySnip3r Posted November 20, 2010 Share Posted November 20, 2010 Hey guys im new to jquery and just trying to do summin. i want it to count the amount of fields its adding and when it has reached a set number it will stop (Temp display an alert) here is what i have: $('#add').click(function(){ var i; if(i == 3){ alert("Max number of fields have been added!"); }else{ $('#clone-field').clone(true).insertBefore('#clone-field'); i++; return true; } }); what am i doing wrong guys ? hope someone can help. Thanks! Quote Link to comment Share on other sites More sharing options...
jimmyt1988 Posted November 22, 2010 Share Posted November 22, 2010 Well, I'm not sure what the context of your code is but here's a start on what I think you need to know: $(element name).each( function(index){ if(index==3){ //do something if the current iteration = 3 } } ); .each in jQuery is a way to iterate through all the elements that have the element name you have assigned in the selector: http://api.jquery.com/each/ Quote Link to comment Share on other sites More sharing options...
logicslab Posted November 23, 2010 Share Posted November 23, 2010 Hi Johny, In your case no need of "each". I answer Your Question Through an Example , pls Copy paste my Following Code and Run , You'll understand How to Increment Variable..... <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#addButton").click(function () { if(counter>10){ alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'); newTextBoxDiv.appendTo("#TextBoxesGroup"); counter++; alert("current Counter:"+counter); }); $("#removeButton").click(function () { if(counter==1){ alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv" + counter).remove(); }); $("#getButtonValue").click(function () { var msg = ''; for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); } alert(msg); }); }); </script> </head><body> <div id='TextBoxesGroup'> <div id="TextBoxDiv1"> <label>Textbox #1 : </label><input type='textbox' id='textbox1' > </div> </div> <input type='button' value='Add Button' id='addButton'> <input type='button' value='Remove Button' id='removeButton'> <input type='button' value='Get TextBox Value' id='getButtonValue'> </body> </html> Pls Include jQuery there !!! be happy and happy Coding.... Bye Anes Quote Link to comment Share on other sites More sharing options...
haku Posted November 24, 2010 Share Posted November 24, 2010 var myvar = 1; $('#add').click(function(){ if(myvar == 3){ alert("Max number of fields have been added!"); }else{ $('#clone-field').clone(true).insertBefore('#clone-field'); myvar++; return true; } }); You need to set the counter outside your function call, or it will be reset to zero each time the function is called. 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.