dynamically add input fields with different id

Question

I've to add in my page -dynamically- a input range like this:

<div id="input_div">
<input type="button" value="-"  onclick="minus()">
<input name="order" type="number" min="0" max="30" size="10" range="1" value="1" id="count1">
<input type="button" value="+" onclick="plus()">
</div>
<div id="wrapper"></div>
<a href="#" id="add-inputs">ADD</a>

And i've to add and remove numbers of that input.

For example the first input has id=count1, if I click on the "plus" button it has to increment its value. But if i had another input with id=count2 and i click on the "plus" button it has to increment the value of the second input with id=count2 and it shouldn't change the first input with id=count1. And then I don't know how to add and remove inputs. So two questions:

How to add many inputs (the inputs held in the div with id=input_div) with different ids;
How to do with the first question done, to increment and de-increment (with the button plus and minus) the value of the current input with its id generated automatically (different from the others)... and how to remove it.

Thank you

Teo · Accepted Answer · 2014-02-01 12:56:21Z

1

EDIT: I have add the input type number... And I hope that it's what do you want..

here you are an example: http://jsfiddle.net/ryGqZ/

$('#addScnt').click(function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);

I don't know why you want add two buttons: "+" and "-". I obtain this with input type number and safari: enter image description here

edited Feb 1, 2014 at 12:56

answered Feb 1, 2014 at 10:32

Teo

3,2112 gold badges31 silver badges59 bronze badges

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

3 Comments

N4pst3r Over a year ago

and how to do the function with plus and minus? in my input with type number?

N4pst3r Over a year ago

It si forse a mobile device

N4pst3r Over a year ago

I cannot see difference. This should be corrected but it is what I want: jsfiddle.net/Pk4eQ/1

Suganthan Madhavan Pillai · Accepted Answer · 2014-02-01 10:43:50Z

0

You need create your html with java script or JQuery. For example the following code create 10 input element in input_div container.:

    $(document).ready(function () {
        for (i = 1; i <= 10; i++) {
            $("#input_div").append('<input  id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
        }
    });

edited Feb 1, 2014 at 10:43

Suganthan Madhavan Pillai

5,64510 gold badges59 silver badges86 bronze badges

answered Feb 1, 2014 at 10:39

H.Gh

3062 silver badges16 bronze badges

3 Comments

Barmar Over a year ago

There's no need to call toString() explicitly. JS automatically converts numbers to strings when they're concatenated.

N4pst3r Over a year ago

This is not what i need, i need as written over here, to add with a click one input on times, and i need to add also the plus and minus button which increments the input with id=count.... Every input has to be independent from the parent. With different id and if i click its minus or plus button the CURRENT number in the input (with name="order") has to increment or de-increment.

N4pst3r Over a year ago

here i've tried but with no success. link

H.Gh · Accepted Answer · 2014-02-01 11:02:12Z

0

You need add an attribute to minus & plus inputs like as "btnId". and access to it's number with this attribute. See code:

$(document).ready(function () {
    for (i = 1; i <= 10; i++) {
        $("#input_div").append('<input btnId="count' + i.toString() + '" type="button" value="-"  onclick="minus()">');
        $("#input_div").append('<input  id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
    }
});

function minus() {
    var btnName = $(this).attr("btnId");
    var btn = $("#" + btnName);
    ...
}

answered Feb 1, 2014 at 11:02

H.Gh

3062 silver badges16 bronze badges

1 Comment

N4pst3r Over a year ago

i've done this: jsfiddle.net/Pk4eQ/1 but as you can see, it doesn't run, and plus and minus either.

Collectives™ on Stack Overflow

dynamically add input fields with different id

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related