CODEWITHSUNDEEP
javascriptjqueryhtml
Dodsonnn
Dodsonnn

Reputation: 65

How to refer to dynamically created elements?

Im creating dynamically a few of elements and i want to operate on them, so my code is somewhere about this:

$(document).ready(function() {
  var a = 0;
  $('#generateInput').click(function() {
    $('#divArea').append('<div id="div' + (a) + '"><input name="Name' + (a) + '"></div>')
    $('#generateInput').hide()
  })

  $("#add").click(function addValue() {
    $('#inputValuesArea').append('<tr><td>' + '<input val="' + $('input[name="Name' + (a) + '"]').val() + '" readonly="readonly">' +
      '</td><td>' + '<button id="button' + (a) + '"type="button">Edit</button>' + '</td></tr>');
    $('#divArea').hide();
    $('#add').hide();
    $('#generateInput').show();
    a++;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="divArea">
</div><button id="generateInput">
    Generate
    </button>
<button id="add">
    Add
    </button>
<table id="inputValuesArea">
</table>

What im doing is: create input->hide it and append value to another input with button. What i want is: If i create multiple inputs i want to .show() specific one to edit its value. I dont know how to refer to this hidden input because i cant get his Id

Upvotes: 0

Views: 129

Answers (2)

kyleruss
kyleruss

Reputation: 497

If you're appending multiple inputs and trying to allow editing of each when you click the edit button then you could identify the selected input based on its position using eq rather than it's id attribute.

The following allows adding multiple inputs and editing the readonly property to demonstrate but you can use the currentInput object to do whatever you need with it.

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generateInput').click(function() {
    $('#divArea').append('<div id="div' + a + '"><input name="Name' + a + '"></div>')

    a++;
  });

  $("#add").click(function() {
    var nextInputVal = $('input[name="Name' + b + '"]').val();
    $('#inputValuesArea').append('<tr><td>' + '<input value="' + nextInputVal + '" readonly="readonly">' +
      '</td><td>' + '<button class="edit-button" id="button' + b + '"type="button">Edit</button>' + '</td></tr>');
    $('#divArea').hide();
    $('#generateInput').show();
    b++;
  });

  $('body').on('click', '.edit-button', function()
  {
    var pos = $('.edit-button').index($(this));
    var currentInput =  $('#inputValuesArea input').eq(pos);
    currentInput.removeAttr('readonly');
  });
});

https://jsfiddle.net/xqcfsojv/2/

Upvotes: 1

Hamza Dahmoun
Hamza Dahmoun

Reputation: 1304

In the following code:
- I keep the "Generate" button displayed for testing purposes,
- I created a function for you to console all the inputs newly created everytime you creates one,
- Note the new use and place of the variable 'a'
- Note that I am using the 'id' attribute to create a new input instead of using 'name' attribute, so that it becomes easier when trying to handle that new input
- Result, everytime you create new input it gets displayed in the console with all the previously created input, you can change that according to your needs

<!doctype html>
<html>

<head>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="divArea">
  </div><button id="generateInput">
                Generate
                </button>
  <button id="add">
                Add
                </button>
  <table id="inputValuesArea">
  </table>


  <script>
    $(document).ready(function() {
      var a = 0;
      $('#generateInput').click(function() {
        a = a + 1;
        $('#divArea').append('<div id="div' + (a) + '"><input id="elementID' + (a) + '"></div>')
        //$('#generateInput').hide()   ;    
        consoleCreatedElements();
      })

      function consoleCreatedElements() {
        for (let i = 1; i <= a; i++) {
          console.log($("#elementID" + i));
        }
      }

      $("#add").click(function addValue() {
        $('#inputValuesArea').append('<tr><td>' + '<input val="' + $('input[name="Name' + (a) + '"]').val() + '" readonly="readonly">' +
          '</td><td>' + '<button id="button' + (a) + '"type="button">Edit</button>' + '</td></tr>');
        $('#divArea').hide();
        $('#add').hide();
        $('#generateInput').show();
        a++;
      });
    });
  </script>
</body>

</html>

Upvotes: 1

Related Questions