CODEWITHSUNDEEP
javascriptjquery
Alan Yong
Alan Yong

Reputation: 1033

Add one every time click ADD button

NEED HELP! How to add one every time I click "Add" button?

The number will increase every time I click.

It's start from 0, after I click it's will plus 1 become 1, then 2 and etc.

HTML:

<div id="add_form">

    <div class="form-field">

        <div class="field">

            <div class="no">0</div>

        </div>

    </div>

</div>

<a href="#" id="add_field" class="btn btn-default">Add </a>
<p><br /></p>

JQuery:

 $(document).ready(function() {

    var MaxInputs       = 8;
    var InputsWrapper   = $("#add_form");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=1;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

            FieldCount++;

            $(InputsWrapper).append('<div class="field"><div class="no">1</div></div>');
            x++;

        }

        return false;

    });

});

My JQuery quite poor, need some help from you guys.

Also, here is the jsfiddle link.

http://jsfiddle.net/fzs77/

Really appreciate your help.

Upvotes: 0

Views: 2278

Answers (4)

Standin.Wolf
Standin.Wolf

Reputation: 1234

Try this jsfiddle:
http://jsfiddle.net/fzs77/7/

<div id="add_form">


<div class="form-field">

        <div class="field">

            <div class="no">0</div>

        </div>

    </div>

</div>

<a href="#" id="add_field" class="btn btn-default">Add </a>
<p><br /></p>

JS file

$(document).ready(function() {

    var MaxInputs       = 8;
    var InputsWrapper   = $("#add_form");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=0;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

            FieldCount++;



   $(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>');



        }

        return false;

    });

});

Upvotes: 1

rahulroy9202
rahulroy9202

Reputation: 2848

Try this if you want to increment it while on the same line.

http://jsfiddle.net/sdMCH/

$(document).ready(function() {   
    $('#add_field').click(function (e) {
            var x=$(".no");            
            x[0].innerHTML = (parseInt(x[0].innerHTML,10)+1);
        }
    );
});

Upvotes: 0

Karl Johan
Karl Johan

Reputation: 4022

You have to out the variable that holds the number inside of the html that you append. Also move the increscent of the FieldCount variable to below the append function call to render the correct result. Like so:

$(AddButton).click(function (e) {

    if(x <= MaxInputs) {

        $(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>');
        x++;
        FieldCount++;

    }

    return false;

});

Upvotes: 2

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

You have 1 hardcoded, so it can't change. Do it like this:

$(InputsWrapper).append('<div class="field"><div class="no">' + x + '</div></div>');

Check this JSFiddle with working demo.

Upvotes: 4

Related Questions