How to call input id in javascript

Question

I'm trying to do some javascript work on this example:

var str= '<td><input id="product" type="checkbox" name="product' + i + '" value="Yes" />&nbsp; new product?</td>';
str = str+'<td><input type="text"class="form-control" id="number ' + i + '" name="number' + i + '" placeholder="GTIN"</td>'


<script>
 $(document).ready(function () {
    var ckbox = $('#product');

    $('input').on('click', function () {
        if (ckbox.is(':checked')) {
            document.getElementById("number").readOnly = true;
            document.getElementById("number").value = "";
        } else {
            document.getElementById("number").readOnly = false;            
        }
    });
});
</script>

This seems to work only if my input checkbox is outside the string builder

Possible duplicate of Event binding on dynamically created elements? — fdomn-m
– fdomn-m, Commented Nov 7, 2016 at 14:06
See linked. Your $('input').on runs before you add it to the DOM — fdomn-m
– fdomn-m, Commented Nov 7, 2016 at 14:07
document.getElementById calls for an element with the id given, from inside the DOM, — Kevin Kloet
– Kevin Kloet, Commented Nov 7, 2016 at 14:07

Sebastian Kaczmarek · Accepted Answer · 2016-11-07 16:49:55Z

2

If I understood your question correctly you are trying to check if input created as string is checked or not. To do so, you can try something like this:

HTML

<div id="number">
  <table id='mytable'>

  </table>

</div>

JS

var str;
for(var i = 0; i < 4; i++){
    str = '<td><input id="product'+i+'" type="checkbox" checked name="product' + i + '" value="Yes" />new product?';
  str = str+'<td><input type="text"class="form-control" id="number ' + i + '" name="number' + i + '" placeholder="GTIN" data-checkbox-id="product'+i+'"></td>'
    $("#mytable").append(str);
}

$("[id*='product']").on("click", function(){
    var this_id = $(this).attr("id");

    if( $(this).is(":checked") )
      $("input[data-checkbox-id='"+this_id+"']").removeAttr("disabled");
    else
      $("input[data-checkbox-id='"+this_id+"']").attr("disabled", "disabled");
 });

Check the Fiddle: https://jsfiddle.net/koky7zj1/11/
Is that what you are looking for?

Edit
See updated code. I'm glad I could help! :)

edited Nov 7, 2016 at 16:49

answered Nov 7, 2016 at 14:25

Sebastian Kaczmarek

8,5254 gold badges25 silver badges44 bronze badges

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

9 Comments

pancake Over a year ago

Hi Sebastian, what I'm trying to do is simply deactivate the textbox by clicking on the checkbox. It's not working since it's created like the example above

pancake Over a year ago

The reason i didnt post the whole code, it's because it might be to long, would u mind it?

Sebastian Kaczmarek Over a year ago

Ok, I understand. Check the code in my previous comment and let me know if this is what you was looking for

pancake Over a year ago

Yes that's exactly what im looking for, but the input has to be in the (var str). Since it's a table that keeps adding data. So imagine for each line you will have to be able to do this function

Sebastian Kaczmarek Over a year ago

Something like this? jsfiddle.net/koky7zj1/6 It isn't too hard to make it working for many elements

|

Collectives™ on Stack Overflow

How to call input id in javascript

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related