CODEWITHSUNDEEP
javascriptjquery
Lesly Revenge
Lesly Revenge

Reputation: 922

For loop using jQuery and JavaScript

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>

Upvotes: 0

Views: 88

Answers (4)

Roy M J
Roy M J

Reputation: 6938

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
        }

    });

});

Upvotes: 2

Satish Sharma
Satish Sharma

Reputation: 9635

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;
            }

        });

});

Upvotes: 0

Bishnu Paudel
Bishnu Paudel

Reputation: 2079

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)

        })

});

Upvotes: 2

Andrew
Andrew

Reputation: 5340

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++));
    });

});

Upvotes: 0

Related Questions