For loop using jQuery and JavaScript

Question

I'm trying to do a simple for loop in JavaScript/jQuery every time I click NEXT, I want the I to increment once.

But it is not working. When I press next, nothing happens.

<script>

//function to show form
function show_form_field(product_field){
    $(product_field).show("slow");
}
$(document).ready(function(){
    //start increment with 0, until it is reach 5, and increment by 1
    for (var i=0; i < 5 ;i++)
    {
        //when I click next field, run this function
        $("#next_field").click(function(){
            // fields are equial to field with id that are incrementing
            var fields_box = '#field_'+[i];
            show_form_field(fields_box)

        })
    }
});

</script>

$("#next_field").click in the loop means bind the click function 5 times.. — Andrew
– Andrew, Commented Jan 16, 2014 at 4:59

Roy M J · Accepted Answer · 2014-01-16 05:12:10Z

2

You do not need the for loop. Just declare var i outside click function and increment it inside the function.

//function to show form
function show_form_field(product_field) {
    $(product_field).show("slow");
}

$(document).ready(function () {

    var i = 0; // declaring i
    $("#next_field").click(function () {

        if (i <= 5) { // Checking whether i has reached value 5
            var fields_box = '#field_' + i;
            show_form_field(fields_box);
            i++; // incrementing value of i
        }else{
            return false; // do what you want if i has reached 5
        }

    });

});

answered Jan 16, 2014 at 5:12

Roy M J

6,9367 gold badges54 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bishnu Paudel · Accepted Answer · 2014-01-16 05:04:19Z

2

You should declare variable i document wide, not inside the click handler.

//function to show form
function show_form_field(product_field){
    $(product_field).show("slow");
}
$(document).ready(function(){
   var i=0;

        $("#next_field").click(function(){

            var fields_box = '#field_'+ i++ ;
            show_form_field(fields_box)

        })

});

answered Jan 16, 2014 at 5:04

Bishnu Paudel

2,0891 gold badge22 silver badges39 bronze badges

1 Comment

Roy M J Over a year ago

Actually what you've done is right.. im not sure of the downvote.. +1

Andrew · Accepted Answer · 2014-01-16 05:02:50Z

0

Call $("#next_field").click just one time, and in the click function, increase i every time.

$(document).ready(function() {

    var i = 0;

    $("#next_field").click(function() {

        if (i >= 5) {
            //the last one, no more next
            return;
        }

        show_form_field('#field_' + (i++));
    });

});

answered Jan 16, 2014 at 5:02

Andrew

5,3601 gold badge22 silver badges22 bronze badges

Comments

Satish Sharma · Accepted Answer · 2014-01-16 05:07:08Z

0

try this

$(document).ready(function(){
    //start increment with 0, untill it is reach 5, and increment by 1
   var i = 0;
    $("#next_field").click(function(){
            // fields are equial to field with id that are incrementing
            if(i<5)
            {
              var fields_box = '#field_'+i;
              show_form_field(fields_box);
              i+=1;
            }
            else
            {
              return;
            }

        });

});

answered Jan 16, 2014 at 5:07

Satish Sharma

9,6356 gold badges31 silver badges52 bronze badges

Collectives™ on Stack Overflow

For loop using jQuery and JavaScript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related