How to add unique id's to dynamically added controls(Asp.net MVC)

Question

I'm pretty new to Javascript, and I was wondering how to add unique id's to my generated HTML textboxes. I'm currently using this script to create textboxes:

$(document).ready(function () {
    var tbId = 'expense';
    var chkId = 'Mastercard';


    $("#txt").click(function () {

        var br = document.createElement("br");
        var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId }).addClass("form-control tb_Id");
        var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId }).addClass("chk chk_Id");
        $("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br);
    });


});

And this is the HTML code to add and hold the textboxes:

<input type="button" id="txt" value="Add TextBox"/>
<div id="ExpenseBoxes">
</div>

I want the textbox id's to be named "expense1, expense2, expense3 ~" but I'm not sure how to go about it.

DontVoteMeDown · Accepted Answer · 2016-10-25 10:08:29Z

3

What about using a counter ?

$(document).ready(function () {
  var tbId = 'expense';
  var chkId = 'Mastercard';
  var elementCounter = 0;


  $("#txt").click(function () {
    var br = document.createElement("br");
    var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId + (++elementCounter) }).addClass("form-control tb_Id");
    var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId }).addClass("chk chk_Id");
    $("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="txt" value="Add TextBox"/>

<div id="ExpenseBoxes">
</div>

Just create this var elementCounter = 0;, concat it like id: tbId + (++elementCounter) and you will get incremental ids "expense1", "expense2", "expense3" and so on.

answered Oct 25, 2016 at 10:08

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

2 Comments

Andrew Z Over a year ago

Ahh, thank you! That is what I was looking for exactly!

DontVoteMeDown Over a year ago

@AndrewZ glad to help!

Midhun Mundayadan · Accepted Answer · 2016-10-25 10:09:46Z

0

This will work in your case

 var brInput = document.createElement("br");
    brInput.setAttribute("id", "uniqueIdentifier");

answered Oct 25, 2016 at 10:09

Midhun Mundayadan

3,1923 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to add unique id's to dynamically added controls(Asp.net MVC)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related