Menu
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.
723
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
