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
– Dev, Commented Jul 23, 2018 at 2:06

Demon Spear · Accepted Answer · 2018-07-23 02:07:22Z

0

you can do it by angular text() function

$('#id').text()

answered Jul 23, 2018 at 2:07

Demon Spear

1044 bronze badges

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

2 Comments

NJKannur Over a year ago

by using this i only get first value

Demon Spear Over a year ago

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+"");

Dev · Accepted Answer · 2018-07-23 02:56:20Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related