CODEWITHSUNDEEP
javascriptjquery
aswathy
aswathy

Reputation: 395

how to create different data id for text box which is getting on click

i want add text-boxes on each click that work well but i need add id for each text-boxes which is added dynamical. i am struggling to give id for it below i give the code used for adding textbox on click 

$(function() {
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />//for clickbutton//
<div id="plusicondivbox" class="insidediv " style="margin-top:-53px;"></div>//div for adding txtbox//

Upvotes: 2

Views: 1536

Answers (5)

gavgrif
gavgrif

Reputation: 15509

I know this answer has already been accepted, but I dislike the option of using a global variable just to increment the count for the dynamically added id - when there is a cleaner way of doing it in the function using the length of the .textbox elements. Note that this will give a zero-indexed number for the id that is incremented each time the image is clicked, because each time a textbox is appended - the length of the .textbox class increases by 1. I have put a console.log in there to demonstrate the increasing count:

  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var textboxLength = $('.textbox').length;
    $('#plusicondivbox').append(textBox);  
    $('.textbox:last').attr('id', 'id_' + textboxLength);
  console.log('id_' + textboxLength);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />

<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>

Upvotes: 0

Kalidindi Prashanth
Kalidindi Prashanth

Reputation: 31

This code will work for you ,use global variable which will give dynamicid for your textboxes ie(different id for dynamic textboxes):

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </script>
    <script>
        var idCount=0;
        $(function() {
            $('p').on('click', function() {
            var textBox = '<input type="text" class="textbox"/>';
            var a = $('<input>').attr("id","textBox"+idCount);
                $(textBoxDiv).append(a);
                idCount++;
            });
        });
    </script>
    </head>
    <body>
        <p>Click !</p>
        <div id="textBoxDiv" style="width:50%;height:50%">
        </div>
    </body>
</html>

Upvotes: 0

Rayon
Rayon

Reputation: 36599

Have a global-variable and increment it after every click-event

$(function() {
  var count = 0;
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
    $('#' + a + "box input:last").attr('id', 'id_' + count);
    ++count;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>

Or assign inline attribute by concatenation:

$(function() {
  var count = 0;
  $('.plusicon').on('click', function() {
    var textBox = '<input type="text" id="id_' + count + '" class="textbox"/>';
    var a = $(this).attr("id");
    $('#' + a + "box").append(textBox);
    ++count;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>

Upvotes: 2

vijayP
vijayP

Reputation: 11502

Please have a look at below code. We can define global counter which will get incremented each time you press plus button so that you will get unique number each time. that number we can use to define unique textbox id as follows:

var textBoxCounter = 1;
$(function() {
  $('.plusicon').on('click', function() {


    var textBox = '<input type="text" class="textbox"/>';
    textBox = $(textBox);
    textBox.attr("id", "myTextBox_" + textBoxCounter);
    textBoxCounter++;
    var a = $(this).attr("id");

    $('#' + a + "box").append(textBox);

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />


<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>

Upvotes: 0

Gulmuhammad Akbari
Gulmuhammad Akbari

Reputation: 2036

Use instead of $(this) $(textbox)

$(function () {
 $('.plusicon').on('click', function () {


    var textBox = '<input type="text" class="textbox"/>';
    var a = $(textBox).attr("id","your_id");

    $('#'+a+"box").append(textBox);


   });

Upvotes: 0

Related Questions