How to dynamically add a value on a lebel

JavaScript
1

Hi this is my code

What i want is when I click on Add Another Button then value in the Label should be increment.?

I am unable to get it can any body help?

2

What do you mean the label should increment as there is nothing to increment for a label?

Do you mean you want to increment the ‘ID’ of the label or did you want to add some text value that increments? Why does the label have an id anyway if you are not associating it with the input.

It also looks like you should have this:

c.children('#clonedInput label')

Not

c.children('#clonedInput:label')

You are also using and duplicating the same id which is not allowed.

I guess you were looking for something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="clonedInput">
    <label id="newLabel">Label 0: </label><input type="text" />
    <input type="button" value="delete" class="btnDelete"/>
</div>
<input type="button" value="Add Another" id="btnAdd"/>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    var inputs=0;
    $("#btnAdd").click(function(){
        inputs=++inputs;
        var c=$(".clonedInput:first").clone(true);
        var theID = c.children('.clonedInput label').attr('id');
        c.children('.clonedInput label').attr('id', theID +(inputs)).text('Label ' + inputs);
        $(".clonedInput:last").after(c);
    });
    
    
    $(".btnDelete").click(function(){
        if(confirm("Continue Delete")){
            //--inputs; can't do this because an item may be deleted out of sequence
            $(this).closest('.clonedInput').remove();
           }
    });
        
});
</script>
</body>
</html>

However there is a problem with that approach in that if you delete an item in the middle then the sequence doesn’t make sense and you would then need to renumber all the ids in order.

You would be better off just deleting the last item entered so that you can easily keep track of everything. You would just need one delete button next to the add button in that case.

One of the JS experts around here will probably have a better way to do this anyway :smile:

3

One effective technique is to store all of the information in an array, so that each row is stored as:

{label: 'Label name', input: 'input value'}

When add/delete actions occur, update the array then destroy and rebuild the display of information, using the array information to rebuild it.

1 Like
4

can you give coding demonstration I am not much more expert in JavaScript an example on jsfiddle.net will be nice

5

Thanks for reply.I will try it

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.