CODEWITHSUNDEEP
javascriptjqueryhtml
Solo
Solo

Reputation: 58

Getting and Setting Values for Dynamically Created HTML inputs using Javascript

I created "input" elements dynamically in Javascript and am appending and "insertAfter" to a "div" already created. These "inputs" show up but I am unable to get or change their values incrementally which I would need to be using later on.

"Input" elements are added for every file in the directory and "id"s are made in order to get and change the values of the input with plus and minus buttons but when I try to get the value I get this error.

Uncaught TypeError: Cannot read property 'value' of null

The basic code snippets used are shown below:

Javascript:

$.ajax({
    url: "http://localhost:8888/file",
    success: function(data){
    var filename = this.href.replace(window.location.host, "").replace("http://", "").replace("/","").replace(".csv", "");$(data).find("a:contains(" + fileextension + ")").each(function () {
    if(counter == 0){
    $('<div class="col-md-3 ' + counter + '"></div>').appendTo('#stock_types'); 
    $('<a href = "#" onclick="return false; onclick=removing();" class = "is_stock"> </a>').html(filename).appendTo('.'+ counter).attr('id', filename);
    $('<button type="button" onclick="adding()" class = "btn btn-default plus_"> + </button>').insertAfter($( "#" + filename )).attr('id','plus_'+filename);
    $('<input class = "stock_amount" name="input_' + filename + '" id = input_'+ filename +' value = "0" ">').insertAfter($( "#plus_" + filename ));
    $('<button type="button" onclick="subtracting()" class = "btn btn-default minus_"> - </button>').insertAfter($( '#input_' + filename)).attr('id','minus_'+filename);



function adding(){
  raw_id = '';
  raw_id = raw_id + $(this).attr('id');
  var new_id = raw_id.replace("plus", "input");
  console.log(new_id);

  current_val = document.getElementById(new_id).value;
  current_val = current_val + 1;

  console.log(current_val);

};

The ultimate goal for me is getting and incrementing the value of an input that is dynamically created. Thanks in advance.

Upvotes: 2

Views: 77

Answers (2)

kidwon
kidwon

Reputation: 4504

jQuery supports dynamic elements out of the box. There's no need for vanilla js with onclick attributes and etc...

var btn = $('<button>', {
  text: ' + ',
  'class':'btn btn-default plus'
});

function adding(event){
  // adding...
}

btn.on('click', adding).insertAfter($('.....whatever'));

Upvotes: 1

victor175
victor175

Reputation: 624

$(this).attr('id') This will not work since the function has not been attached to any object (So this will return undefined). You can pass the desired element as an argument to the function. You could do:

$('<button type="button" onclick="adding(document.querySelector('.stock_amount')[0])" class = "btn btn-default plus_"> + </button>').insertAfter($( "#" + filename )).attr('id','plus_'+filename);

and in the adding function:

function adding(input){
  raw_id = '';
  raw_id = raw_id + $(input).attr('id');
...
}

Upvotes: 1

Related Questions