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?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Nov 07 '16 at 14:06
See linked. Your `$('input').on` runs before you add it to the DOM — freedomn-m, Nov 07 '16 at 14:07
`document.getElementById` calls for an element with the id given, from inside the DOM, — Kevin Kloet, Nov 07 '16 at 14:07

Sebastian Kaczmarek · Accepted Answer · 2016-11-07T16:49:55.403

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 07 '16 at 16:49

answered Nov 07 '16 at 14:25

Sebastian Kaczmarek

8,120
4
20
38

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 Nov 07 '16 at 14:32
The reason i didnt post the whole code, it's because it might be to long, would u mind it? – pancake Nov 07 '16 at 14:41
Ok, I understand. Check the code in my previous comment and let me know if this is what you was looking for – Sebastian Kaczmarek Nov 07 '16 at 14:43
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 – pancake Nov 07 '16 at 14:45
Something like this? https://jsfiddle.net/koky7zj1/6/ It isn't too hard to make it working for many elements – Sebastian Kaczmarek Nov 07 '16 at 14:51
Very close! But the textfield is actually next to the checkbox, i updated it here: https://jsfiddle.net/koky7zj1/8/ So basically deactivate number instead I will add it in my qustion – pancake Nov 07 '16 at 14:59
Now? https://jsfiddle.net/koky7zj1/11/ BTW Is there any reason why you put input and checkbox in two different columns? Whouldn't it be better to place them in one? – Sebastian Kaczmarek Nov 07 '16 at 15:11
Yes it's supposed some sort of basket where customers add products for each line. This is why they are seperate. Thank you very much. If you add you answer on top i will set it as correct answer! Where can I read more about this btw? Working with javascript and elements outside DOM – pancake Nov 07 '16 at 16:40
Just updated my answer! :) There are many sites about this. Look here maybe: http://www.w3schools.com/js/js_htmldom.asp – Sebastian Kaczmarek Nov 07 '16 at 16:52

How to call input id in javascript

1 Answers1