Home/ Questions/Q 6011213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:13:39+00:00

I am trying to create a function that adds an additional text field when

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
}
    • 0