-5

I have a table in my page and i have input type text in each row, one of them is for srno I want to get the value of srno text box from the last row of the table using JavaScript.

Here's a code snippet with my HTML:

<table id="vattable" class="table table-sm table-striped">
  <thead class="thead-light">
    <tr>
      <th style="width:50px">SRNo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="text-control input-sm" readonly name="srno[]" id="srno" value=1 style="text-align:right;max-width:40px;" maxlength="13" /></td>
    </tr>
  </tbody>
</table>

Actually I am adding rows on button click event in JavaScript, I want to get the last value of srno column and give the next srno with +1 each time the row is created in the table. when the page is loaded I am selecting data from database and fetching in this table so sometime this table may have few rows already and when I click button to create row it should take the last srno and add +1 to the new row srno.

Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
MAK
  • 161
  • 1
  • 13
  • Could you please post snippet so it will help to understand the issue? – Pramod Kharade Dec 04 '19 at 05:05
  • I don't think we have sufficient information to help you solve your issue. Please provide your code so we can better assist. – EGC Dec 04 '19 at 05:14
  • SRNo – MAK Dec 04 '19 at 05:36
  • actually i am adding rows on button click even in JavaScript, i want to get the last value of srno column and give the next srno with +1 each time the row is created in the table. when page is loaded i am selecting data from database and fetching in this table so sometime this table may have few rows already and when i click button to create row it should take the last srno and add +1 to the new row srno. – MAK Dec 04 '19 at 05:40

1 Answers1

0

I think that this should work for you if you have a similar HTML structure.

What it basically does is:

  1. Scanning the table structure for all inputs with name=srno.
  2. Getting the last input and logging in the javascript console.
  3. You can get its value with lastInput.value.

function getLastInput() {
  //get all inputs with name srno in an array
  const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
  //get the last input from the array by referring the highest index of the array
  const lastInput = allInputs[allInputs.length - 1];
  return lastInput;
}



$(document).ready(function() {
  var rowcnt = $('#vattable tr').length;
  var count = rowcnt;
  $(document).on('click', '#addrow', function() {
    count = count + 1;
    var html_code = '';
    html_code += '<tr id="row_id_' + count + '">';
    html_code += '<td><input type="text" class="text-control input-sm" name="srno[]" id="srno" readonly style="text-align:right;width:40px" value="' + count + '"/></td>';
    html_code += '</tr>';
    $('#vattable').append(html_code);
    console.log(getLastInput());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="vattable">
  <tr>
    <td>
      <input type="text" name="srno[]" value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="srno[]" value="2" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="srno[]" value="3" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="srno[]" value="4" />
    </td>
  </tr>
</table>

<button id="addrow">Add row</button>

EDIT:

Use this if your input name is srno[].

//get all inputs with name srno[] in an array
const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
//get the last input from the array by referring the highest index of the array
const lastInput = allInputs[allInputs.length - 1];
console.log(lastInput);
Goran Stoyanov
  • 2,311
  • 1
  • 21
  • 31
  • with this solution it is giving me undefined. – MAK Dec 04 '19 at 05:29
  • that's because I don't know your actual html structure. Please share row contents and I'll help you with it :) – Goran Stoyanov Dec 04 '19 at 05:31
  • use this `const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');` instead of `const allInputs = document.querySelectorAll('table tr input[name="srno"]');` – Goran Stoyanov Dec 04 '19 at 05:43
  • SRNo – MAK Dec 04 '19 at 05:44
  • actually i am adding rows on button click even in JavaScript, i want to get the last value of srno column and give the next srno with +1 each time the row is created in the table. when page is loaded i am selecting data from database and fetching in this table so sometime this table may have few rows already and when i click button to create row it should take the last srno and add +1 to the new row srno. – MAK Dec 04 '19 at 05:45
  • put the last code I've posted in the edit in your function that is executed after button click and in the `lastInput` you'll have a reference to the last input of the table no matter if it was loaded via Js or on page load. – Goran Stoyanov Dec 04 '19 at 05:49
  • – MAK Dec 04 '19 at 05:55
  • with edited code i am getting output as [object HTMLInputElement] – MAK Dec 04 '19 at 05:59
  • See the edited code snippet in my answer. to get the value of the htmlinput element just use the `.value` property – Goran Stoyanov Dec 04 '19 at 06:01
  • by adding .value i am getting the value of the last row but when i am using this value to add next row it is concatenating the 1 to the existing value. for example if the value of last row is 2 then next row is getting the value as 21 then 211 then 2111 and so on. – MAK Dec 04 '19 at 06:33
  • that's because value returns string not an integer.. try with `count + parseInt(value)` and read about parseInt – Goran Stoyanov Dec 04 '19 at 06:35
  • I have another problem, when i am pressing enter key in any input item one of my submit button gets fired, i want to stop that behavior in all my pages. how can i do that? – MAK Dec 04 '19 at 07:38
  • read about it here https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter – Goran Stoyanov Dec 04 '19 at 08:00