Forums

sayedtaqui

Hi , I m learning jquery and I m stuck at a point. Im creating a form and I want the fields to appear when the user focus on the input fields. http://codepen.io/sayed2x2/pen/urkhp The function is working fine, which is very simple

$('#input1').focus(function(){
    $('#row2').show();
    });

but I dont want to repeat the same code over and over again, so I wanted to use 'for loop for it'. like this

 for(var j=1; j<=4; j++)  {
  var k=j+1;

  $('#input'+j).focus(function(){
    $('#row'+k).show();
    });
  }

But I have no idea why this isn't working. can sombody please explain the reason?

Thanks.

pixelgrid

do you want all the fields to appear once the user focuses on the first input or one by one?

sayedtaqui

I want fields to appear one by one.

pixelgrid

if you watch your code after focusing on the first input the field that appears is the fifth one.thats because of the k var at the time of the code being executed.

i came up with this which works

for(var i=2; i<=5; i++ ){ 
  $('#row'+i).hide();
  }



$('input').focus(function(){
    var num = $(this).attr('id').match(/\d+$/)[0];
    $('#row'+(+num+1)).show();
});

sayedtaqui

Thanks a lot, but if you could explain a little more, i have a hard time understanding the reason you mention above. and why use pattern match?

pixelgrid

the $('#input'+j).focus() function registers event listeners for all the inputs 1-5 and runs on page load after that the k value remains 5, but the function inside .focus() runs once the first input gets focus.At that time it only enables the fifth row because of the k value.

my code depends on getting the number after the #input to do that i used .match() that returns an array with each match. in our case is only one match so the first element is the number

sayedtaqui

Today I learned a very basic essential thing of jquery from you, which I m sure will help me a long way understanding the logic. Now I understand why my code wasn't working but im sorry for being dumb to understand your code. What I understand in $(this).attr('id').match(/\d+$/)[0] you are grabbing hold of the number which is coming under the attribute 'id' . but the regular expression (/\d$/)) was enough to match the number then why did you use match(/\d+$/)[0] and then why the first element of the array '[0]'. And then (+num+1). I m really sorry , im a beginner in jquery and it going from top of my head. I would be really thankfull to you if you explain it a little more. Again sorry for begin dumb.

pixelgrid

the .match() returns an array so to access the number we have to target it with brackets [] our match is the first so [0];

with the + in the regular expression we are targeting all the numbers at the end of the string .the /\d$/ on input45 would return 5.

the + before num is typecasting for int in javascript. with num = 1; num+1 would return 11 as a string

+num+1 would return the number 2

sayedtaqui

Thank you very much , after experiment with your code 10 times. now I completley understand how its working and why you used those things. Today I learned a lot from you. Thanks again.

pixelgrid

im glad i helped

sayedtaqui

just one last thing. I was experimenting and wrote this seprately

  k= 3;
  num= k+1;
  y= 'row'+(num+1);
  alert(y);
  //returns row5

So why in our case we are required to use (+num+1) or else it returns 11 as a string but doesn't add the value ?

pixelgrid

the num of the inputs is taken from the match function which returns a string, so you dont have 2 for example but '2' . with +'2' the string '2' becomes the number 2

sayedtaqui

ok got it thank you, now no more doubts

treehouse : what would you like to learn today?

Forums

Why this function doesn't work in 'for loop' ? [jquery]