Can't use my array items to pre-populate my form inputs using JQuery

user_3194213 0
Viewed 58

I am using JQuery to build my array so I can pre-pop my form inputs when clicking a button in the table tr

This is my table ![enter image description here

And this is my code I have when clicking the 'Update' button

var updateRowData = [];

$('button').click((e) => {
  var btnClassClicked = e.target.className;

  if (btnClassClicked.includes('btn-warning')) {
    $('#existingTrunkTable').on('click', 'tbody tr', function() {
      updateRowData.push({
        "trunkNo": $(this).find($("td[name=trunkNo]")).text(),
        "username": $(this).find($("td[name=username]")).text(),
        "password": $(this).find($("td[name=password]")).text(),
        "registrar": $(this).find($("td[name=registrar]")).text(),
        "voiceChannels": $(this).find($("td[name=voiceChannels]")).text(),
        "type": $(this).find($("td[name=type]")).text(),
        "group": $(this).find($("td[name=group]")).text()
      });
    });

    console.log('updateRowData', updateRowData)
    console.log('updateRowData[0]', updateRowData[0].trunkNo)

    $('#selectedTrunkNo').text(updateRowData[0].trunkNo);
    $('#password').val(updateRowData[0].password);
    $('#edit_voiceChan').val(updateRowData[0].voiceChannels);
    $('#edit_typeDd').val(updateRowData[0].type);
    $('#edit_existingGroupTrunks').val(updateRowData[0].group);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<table id="exitingTrunkTable" class="table table-striped table-condensed">
  <thead>
    <tr>
      <th>Trunk No.</th>
      <th>Username</th>
      <th>Password</th>
      <th>Registrar</th>
      <th>Voice Channels</th>
      <th>Type</th>
      <th>Group</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="existTableBody">
    <tr>
      <td name="trunkNo">635</td>
      <td name="username">TEST635</td>
      <td name="password">wT+-S~RD,Ag9HO\7</td>
      <td name="registrar">Bob</td>
      <td name="voiceChannels">70</td>
      <td name="type">Standard</td>
      <td name="group">Group88</td>
      <td>
        <button id="635_EditBtn" class="btn btn-warning">
          Update
        </button>
        <button id="635_DelBtn" class="btn btn-danger">
          Delete
        </button>
      </td>
    </tr>
    <tr>
      <td name="trunkNo">452</td>
      <td name="username">TEST452</td>
      <td name="password">|?]V5Jq^8!m]H=c,&gt;2_</td>
      <td name="registrar">sip.dev.mymetis.co.uk</td>
      <td name="voiceChannels">97</td>
      <td name="type">Standard</td>
      <td name="group">Group34</td>
      <td>
        <button id="452_EditBtn" class="btn btn-warning">
          Update
        </button>
        <button id="452_DelBtn" class="btn btn-danger">
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

This is what I get:

enter image description here

All data above is test data.

It also doesn't like the eq. What I need is to do is get the 'trunkNo' value and pre-pop the relevant input when the form is displayed.

for the

console.log('1', updateRowData[0].length)

I get

enter image description here

arrays html jquery javascript
1 Answers

Several things

  • No $(this) in arrow function
  • Use .closest to get the row you are on
  • Too many wrappings of event handlers
  • Don't test className when you have hasClass
  • use data-attributes instead of name

var updateRowData = [];

$('button').on("click", function() {
  if ($(this).hasClass('btn-warning')) {
    const $row = $(this).closest("tr")
    updateRowData.push({
      "trunkNo": $row.find($("[data-name=trunkNo]")).text(),
      "username": $row.find($("[data-name=username]")).text(),
      "password": $row.find($("[data-name=password]")).text(),
      "registrar": $row.find($("[data-name=registrar]")).text(),
      "voiceChannels": $row.find($("[data-name=voiceChannels]")).text(),
      "type": $row.find($("[data-name=type]")).text(),
      "group": $row.find($("[data-name=group]")).text()
    });
console.log(updateRowData)
    $('#selectedTrunkNo').text(updateRowData[0].trunkNo);
    $('#password').val(updateRowData[0].password);
    $('#edit_voiceChan').val(updateRowData[0].voiceChannels);
    $('#edit_typeDd').val(updateRowData[0].type);
    $('#edit_existingGroupTrunks').val(updateRowData[0].group);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<table id="exitingTrunkTable" class="table table-striped table-condensed">
  <thead>
    <tr>
      <th>Trunk No.</th>
      <th>Username</th>
      <th>Password</th>
      <th>Registrar</th>
      <th>Voice Channels</th>
      <th>Type</th>
      <th>Group</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="existTableBody">
    <tr>
      <td data-name="trunkNo">635</td>
      <td data-name="username">TEST635</td>
      <td data-name="password">wT+-S~RD,Ag9HO\7</td>
      <td data-name="registrar">Bob</td>
      <td data-name="voiceChannels">70</td>
      <td data-name="type">Standard</td>
      <td data-name="group">Group88</td>
      <td>
        <button id="635_EditBtn" class="btn btn-warning">
                  Update
              </button>
        <button id="635_DelBtn" class="btn btn-danger">
                  Delete
              </button>
      </td>
    </tr>
    <tr>
      <td name="trunkNo">452</td>
      <td name="username">TEST452</td>
      <td name="password">|?]V5Jq^8!m]H=c,&gt;2_</td>
      <td name="registrar">sip.dev.mymetis.co.uk</td>
      <td name="voiceChannels">97</td>
      <td name="type">Standard</td>
      <td name="group">Group34</td>
      <td>
        <button id="452_EditBtn" class="btn btn-warning">
                Update
            </button>
        <button id="452_DelBtn" class="btn btn-danger">
                Delete
            </button>
      </td>
    </tr>
  </tbody>
</table>

user_2957830
Related