How to get value of an input field with same id in Angular4

Question

This is my form

<button (click)="M_add()">Add</button>
<tbody id="_tbody">
</tbody>

When the add button is clicked, it will create an input field

var tbody = document.getElementById("_tbody");
var row = document.createElement("tr");
var col = document.createElement("td");
var col_index = document.createElement("input");
col_index.setAttribute("class", "index");
col_index.setAttribute("id", "index");
row.appendChild(col_index);
tbody.appendChild(row);

I need to retrieve value from each input field, how to get it?

You can only have 1 id per page. Append a number to your id instead like `'index_' + ctr`. — Dev, Jul 23 '18 at 02:06

score 0 · Accepted Answer · answered Jul 23 '18 at 02:07

0

you can do it by angular text() function

$('#id').text()

answered Jul 23 '18 at 02:07

Demon Spear

104
4

by using this i only get first value – NJKannur Jul 23 '18 at 02:30
you can use $scope to store count variable. $scope.count = 0; in M_add function, increase this by 1. $scope.count++; then add it in id of element col_index.setAttribute("id", "index_"+$scope.count+""); – Demon Spear Jul 23 '18 at 02:38

score 0 · Answer 2 · answered Jul 23 '18 at 02:56

I can only answer in AngularJS but I think the concept is still there.

$scope.table = [
  { value: 1 },
  { value: 2}
];
$scope.getRowValue = (row) => {
  $scope.selectedRow = row;
};
$scope.addTableRow = () => {
  $scope.table.push({
    value: $scope.table.length + 1
  });
};

This approach uses an array of the things that you want to display in the table. Every time you add a new row, it is appended to the array.

<table border="1" width="100%">
  <tbody>
    <tr ng-repeat="row in table">
      <td>
        <input type="text" value="{{row.value}}" ng-model="row.model" ng-init="row.model=row.value">
      </td>
      <td>
        <button ng-click="getRowValue(row.model)">Get Row Value</button>
      </td>
    </tr>
  </tbody>
</table>
<button ng-click="addTableRow()">Add Table Row</button>

In the HTML, the array is displayed in ng-repeat. Each instance of ng-model is a reference to an object in the array. Read more here

So basically what happens when user clicks on the button it will get the model of the input in that row and pass it to somewhere.

Check the working fiddle

How to get value of an input field with same id in Angular4

2 Answers2