jQuery variable increment help

JonnySnip3r · 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!

jimmyt1988 · 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/

logicslab · 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 ::)

haku · 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.

Sign In

jQuery variable increment help

Recommended Posts

JonnySnip3r

Link to comment

Share on other sites

jimmyt1988

Link to comment

Share on other sites

logicslab

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information