javascript - how to get dynamic id of dynamically created textbox in jquery - Stack Overflow

admin管理员组

文章数量:1327488

i want to perform keyup event via textbox id, and all textbox are dynamically created with onclick button event. for this i have to make 20 keyup function. if i use 20 keyup function then my code will bee too lengthy and plex. instead of this i want to use a mon function for all textbox. can anybody suggest me how to do it..thanks

here is what i am doing to solve it:

<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button></div>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
    </div>
    </div>

<script src=".11.2/jquery.min.js"></script> 
<script>
$(document).ready(function() {
    var counter = 2;
    $(".add_field_button").click(function() {
        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
            '<input type="text" name="textbox' + counter +
            '" id="firsttextbox' + counter + '" value="" >&nbsp;&nbsp;<input type="text" name="textbox' + counter +
            '" id="secondtextbox' + counter + '" value="" >  <a href="#" id="remove_field">Remove</a><input type="text" id="box' + counter + '" value="">sum</div>');
        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;

    });

    function check(a, b) {
        var first = a;
        var second = b;
        var temp = temp;
        var novalue = "";
        result = parseInt(first) + parseInt(second);
        if (!isNaN(result)) {
            return result;
        } else {
            return novalue;
        }
    }


    $(this).on("keyup", "#firsttextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;
        var number = 2;
        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#firsttextbox3", function(e) {
        var number = 3;
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);
        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#firsttextbox4", function(e) {
        var number = 4;
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);
        final = document.getElementById('box4').value = result;
    });

    $(this).on("keyup", "#secondtextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;

        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#secondtextbox3", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);

        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#secondtextbox4", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);

        document.getElementById('box4').value = result;
    });


    $(this).on("click", "#remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('#target').remove();
        counter--;

    });


});
</script>

i want to perform keyup event via textbox id, and all textbox are dynamically created with onclick button event. for this i have to make 20 keyup function. if i use 20 keyup function then my code will bee too lengthy and plex. instead of this i want to use a mon function for all textbox. can anybody suggest me how to do it..thanks

here is what i am doing to solve it:

<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button></div>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
    </div>
    </div>

<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script>
$(document).ready(function() {
    var counter = 2;
    $(".add_field_button").click(function() {
        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
            '<input type="text" name="textbox' + counter +
            '" id="firsttextbox' + counter + '" value="" >&nbsp;&nbsp;<input type="text" name="textbox' + counter +
            '" id="secondtextbox' + counter + '" value="" >  <a href="#" id="remove_field">Remove</a><input type="text" id="box' + counter + '" value="">sum</div>');
        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;

    });

    function check(a, b) {
        var first = a;
        var second = b;
        var temp = temp;
        var novalue = "";
        result = parseInt(first) + parseInt(second);
        if (!isNaN(result)) {
            return result;
        } else {
            return novalue;
        }
    }


    $(this).on("keyup", "#firsttextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;
        var number = 2;
        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#firsttextbox3", function(e) {
        var number = 3;
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);
        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#firsttextbox4", function(e) {
        var number = 4;
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);
        final = document.getElementById('box4').value = result;
    });

    $(this).on("keyup", "#secondtextbox2", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox2').value;
        var b = document.getElementById('secondtextbox2').value;

        result = check(a, b);
        document.getElementById('box2').value = result;

    });

    $(this).on("keyup", "#secondtextbox3", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox3').value;
        var b = document.getElementById('secondtextbox3').value;
        result = check(a, b);

        document.getElementById('box3').value = result;
    });

    $(this).on("keyup", "#secondtextbox4", function(e) {
        e.preventDefault();
        var a = document.getElementById('firsttextbox4').value;
        var b = document.getElementById('secondtextbox4').value;
        result = check(a, b);

        document.getElementById('box4').value = result;
    });


    $(this).on("click", "#remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('#target').remove();
        counter--;

    });


});
</script>

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 8, 2015 at 10:57 user1636522 asked Jun 8, 2015 at 10:31 NitishNitish 10911 gold badge22 silver badges1111 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

See the snippet below to see how you can make this implementation more modular and useable. The trick is to think: what do I want to do? I want to be able to add multiple inputs and add their value, printing the result in another input.

It es down to using classes - since we are going to use the same kind of thing for every row. Then apply something that works for all classes. No IDs whatsoever! You can even use the name property of the input that contains the value you want to save. Using the [] in that property will even pass you back a nice array when POSTING!

I know this looks like a daunting lot, but remove my ments and the number of lines reduces dramatically and this kind of code is almost infinitely extendable and reusable.

But have a look, this works and its simple and - most of all - it's DRY (don't repeat yourself 0 once you do, re-evaluate as there should be a better way!)!

Update

You could also use a <ol>as a wrapper and then add an <li> to this every time, so you get automatic counting of boxes in the front end without any effort from your end! Actually, thats so nice for this that I have changed my implementation.

var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;

add.click(function(event){
    
    // create a limit
    if($(".box").length >= maximumBoxes){
        alert("You cannot have more than 10 boxes!");
        return;
    }
        
    var listItem = $('<li class="box"></li>');
    // we will add 2 boxes here, but we can modify this in the amountOfBoxes value
    for(var i = 0; i < amountOfInputs; i++){
        listItem.append('<input type="text" class="input" />');
    }
    listItem.append('<input type="text" class="output" name="value" />');
    // Lets add a link to remove this group as well, with a removeGroup class
    listItem.append('<input type="button" value="Remove" class="removeGroup" />')
    listItem.appendTo(all);
});

// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event){
    // Get the group
    var group = $(this).parent();
    // Get the children (all that arent the .output input)
    var children = group.children("input:not(.output)");
    // Get the input where you want to print the output
    var output = group.children(".output");
    // Set a value
    var value = 0;
    // Here we will run through every input and add its value
    children.each(function(){
        // Add the value of every box. If parseInt fails, add 0.
        value += parseInt(this.value) || 0;
    });
    // Print the output value
    output.val(value);
});

// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event){
    event.preventDefault();
    $(this).parent(".box").remove();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />

You can target all your textboxes, present or future, whatever their number, with a simple function like this :

$(document).on("keyup", "input[type=text]", function(){
   var $textbox = $(this);
   console.log($textbox.val());
})

$("button").click(function(){
   $("#container").append('<input type="text" /><br>');
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="text" /><br>
  <input type="text" /><br>
  <input type="text" /><br>
</div>
<button>Create one more</button>

You don't need plicated generated IDs, not necessarily a class (except if you have other input[type=text] you don't want to conflict with). And you don't need to duplicate your code and write 20 times the same function. Ever. If you're duplicating code, you're doing wrong.

Add classes "a" and "b" to the textboxes and "box" to the box. Then add data-idx attribute with the index (unused!?). Finally register the event handlers:

 $('.a').on('keyup', function(e){
    e.preventDefault();
    var $this = $(this)
    var $p = $this.parent()
    var a= this.value; 
    var b= $p.find('.b').val()
    var number =$this.data('idx') //unused!?
    var result = check(a,b)
    $p.find('.box').val(result)
 })
 $('.b').on('keyup', function(e){
    e.preventDefault();
    var $this = $(this)
    var $p = $this.parent()
    var a= $p.find('.a').val()  
    var b= this.value
    var result = check(a,b)
    $p.find('.box').val(result)
 })

Or a general one:

 $('.a,.b').on('keyup', function(e){
    e.preventDefault();
    var $p = $(this).parent()
    var a= $p.find('.a').val()  
    var b= $p.find('.b').val()
    var result = check(a,b)
    $p.find('.box').val(result)
 })

You can assign a class to all textboxes on which you want to perform keyup event and than using this class you can attach the event on elements which have that class. Here is an example

var html="";
for (var i = 0; i < 20; i++)
 {
   html += "<input type='text' id='txt" + i + "' class='someClass' />";
 }
 $("#testDiv").html(html);

Attach keyup event on elements which have class someClass.

 $(".someClass").keyup(function () {
  alert($(this).attr("id"));
 });

A little helper to bine with your favorite answer:

var uid = function () {
    var id = 0;
    return function () {
        return ++id;
    };
}();

Usage:

uid(); // 1
uid(); // 2
uid(); // 3

Providing a code-snippet which may give you some hint:

$(".add_field_button").click(function () 
{
    if (counter > 10) 
    {
        alert("Only 10 textboxes allow");
        return false;
    }
    var txtBoxDiv = $("<div id='TextBoxDiv"+counter+"' style='float:left;width:10%; position:relative; margin-left:5px;' align='center'></div>");

     //creating the risk weight
     var txtBox1 = $('<input />', 
                           {
                            'id'     : 'fst_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                            'onClick' : 'txtBoxFun(this,'+counter+')'
                          });
     var txtBox2 = $('<input />', 
                           {
                            'id'     : 'sec_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                            'onClick' : 'txtBoxFun(this,'+counter+')'
                          });

    var txtBox3 = $('<input />', 
                           {
                            'id'     : 'sum_textbox_' + counter,
                            'name'   : 'textbox'+counter,
                            'type'   : 'text',
                            'class'  : 'input_field',
                          });

 $(txtBoxDiv).append(txtBox1).append(txtBox2);
 $(txtBoxDiv).append(txtBox3);
});

function txtBoxFun(obj, count)
{
   var idGet = $(obj).attr('id');
   var idArr = new Array();
   idArr = idGet.split("_");
   if(idArr[0] == "fst")
   {
      var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#sec_textbox_"+count).val()));
   }
   else if(idArr[0] == "sec")
   {
      var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#fst_textbox_"+count).val()));
   }
   $("#sum_textbox_"+count).val(sumTxt);

}

本文标签： javascripthow to get dynamic id of dynamically created textbox in jqueryStack Overflow