Add one every time click ADD button

Question

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.

Pavel Štěrba · Accepted Answer · 2014-02-17 10:07:55Z

4

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.

answered Feb 17, 2014 at 10:07

Pavel Štěrba

2,9222 gold badges31 silver badges51 bronze badges

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

Comments

Karl Johan · Accepted Answer · 2014-02-17 10:12:52Z

2

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;

});

edited Feb 17, 2014 at 10:12

answered Feb 17, 2014 at 10:07

Karl Johan

4,0421 gold badge28 silver badges36 bronze badges

Comments

cmaster - reinstate monica · Accepted Answer · 2014-02-17 10:47:03Z

1

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;

    });

});

edited Feb 17, 2014 at 10:47

cmaster - reinstate monica

41.1k9 gold badges69 silver badges110 bronze badges

answered Feb 17, 2014 at 10:13

Standin.Wolf

1,2341 gold badge10 silver badges33 bronze badges

1 Comment

rahulroy9202 Over a year ago

sorry. it was by mistake. Can't revoke it untill the answer is edited. Now Solved. accept my +1 as an apology.

rahulroy9202 · Accepted Answer · 2014-02-17 10:41:33Z

0

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

edited Feb 17, 2014 at 10:41

answered Feb 17, 2014 at 10:32

rahulroy9202

2,8683 gold badges35 silver badges46 bronze badges

Collectives™ on Stack Overflow

Add one every time click ADD button

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related