CODEWITHSUNDEEP
jqueryformsfunctionloopsbutton
user701510
user701510

Reputation: 5763

creating jquery click functions with for loop

I am trying to create a function that adds an additional text field when the user clicks a button. The way it works is that there are actually four text fields and three buttons. Three of the four text fields are hidden using "display:none" and two of the three buttons are hidden. When you click button 1, text field 2 and button 2 shows and when you click button 2, text field 3 and button 3 shows and so on. This is manageable by putting in the code manually but becomes a burden when many text fields must be created. So far, I've used this code:

<html>
<head>
<style type="text/css">
.hide {display:none;}
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">


$(document).ready(function(){


$("#add"+2 ).click(function(){
$("#add"+2).hide();
$("#text"+2).show();
$("#add"+3).show();
  });
$("#add"+3 ).click(function(){
$("#add"+3).hide();
$("#text"+3).show();
$("#add"+4).show();
  });

$("#add"+4 ).click(function(){
$("#add"+4).hide();
$("#text"+4).show();

  });


});

</script>

</head>
<body><div id="border">
<form action="" method="post">

<table>
<tr>
<td>
<input type="text" id="text1" name="text1" />
</td>
<td>
<input type="button" id="add2"  name="add" value="add another field" />
<input type="button" id="add3" class="hide" name="add" value="add another field" />
<input type="button" id="add4" class="hide" name="add" value="add another field" />
</td>
</tr>
<tr>
<td>
<input type="text" id="text2" class="hide" name="text2" /><br>
<input type="text" id="text3" class="hide" name="text3" /><br>
<input type="text" id="text4" class="hide" name="text4" />
<td>
</tr>
</table>

</form>
</div>
</body>
</html>

I then replaced 

    $("#add"+2 ).click(function(){
    $("#add"+2).hide();
    $("#text"+2).show();
    $("#add"+3).show();
      });
    $("#add"+3 ).click(function(){
    $("#add"+3).hide();
    $("#text"+3).show();
    $("#add"+4).show();
      });

with a for loop to try to do the same thing

var i = 2;
for (i=2; i<=3; i++)
{
 $("#add"+i ).click(function(){
        $("#add"+i).hide();
        $("#text"+i).show();
        $("#add"+(i+1)).show();
          });
}

after replacing with the for loop, only the fourth text field displays after clicking the first button. Is there some logic I'm not understanding here? Thanks in advance.

Upvotes: 4

Views: 5845

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

You may test this:

$(':button').click(function(e) {
    var index = $(e.target).index();
    $('.add:eq(' + index + ')').hide();
    $('input:text:eq(' + (index + 1) + ')').show();
    $('.add:eq(' + (index + 1) + ')').show();
});

Upvotes: 0

alex
alex

Reputation: 490313

Your inner function has a closure to the outer i, so when it accesses i, it accesses the variable itself, not its value.

You can break this with a self executing function and passing the value to a new local variable.

var i = 2;
for (i = 2; i <= 3; i++) {

    (function(j) {
        $("#add" + j).click(function() {

            $("#add" + j).hide();
            $("#text" + j).show();
            $("#add" + (j + 1)).show();
        });

    })(i);
}

Upvotes: 13

Related Questions