Updating HTML Table Data using JavaScript function

Question

I have an HTML Table that I wish to update using a JavaScript function that analyses text within a submitted TextArea tag on another page. I'm calling the parts of the table I wish to update using the ID's of the TD's but onclick, the table doesn't seem to update with the intended data. I know the function is operational because the initial form validation to check for text does work. Here is JS code:

function textSubmit() {
var headers = document.getElementById("headers").value;
if (headers == "") {
    alert("Please submit email headers before proceeding.");
    return false;
} else {
    var a = document.getElementById("td1");
    var answer1 =  /Thread-Topic: (.+)/im.exec(headers)[1];
    a.innerHTML = answer1;

    var b = document.getElementById("td2");
    var answer2 =  /Date: (.+)/im.exec(headers)[1];
    b.innerHTML = answer2;

    var c = document.getElementById("td3");
    var answer3 =  /From: (.+)/im.exec(headers)[1];
    c.innerHTML = answer3;

    var d = document.getElementById("td4");
    var answer4 =  /To: (.+)/im.exec(headers)[1];
    d.innerHTML = answer4;

    var e = document.getElementById("td5");
    var answer5 =  /X-Ms-Has-Attach: (.+)/im.exec(headers)[1];
    e.innerHTML = answer5;
  }
}

And here's the HTML table I wish to update:

<table id="myTable">
    <tr>
      <th>Subject Header</th>
      <td id="td1"></td>
    </tr>
    <tr>
      <th>Actual Sender Address or Domain</th>
      <td id="td2"></td>
    </tr>
    <tr>
      <th>Sender IP Address</th>
      <td id="td3"></td>
    </tr>
    <tr>
      <th>Date/Time</th>
      <td id="td4"></td>
    </tr>
    <tr>
      <th>Attachments?</th>
      <td id="td5"></td>
    </tr>
  </table>

Any suggestions on where I may be going wrong here? Or why the text isn't updating? Thanks.

stacj · Accepted Answer · 2021-05-20 10:42:14Z

1

Is this what you're looking for?

function textSubmit() {
  var headers = document.getElementById("headers").value;
  if (headers == "") {
    alert("Please submit email headers before proceeding.");
    return false;
  } else {
    var a = document.getElementById("td1");
    var answer1 = (/Thread-Topic: ([^\ ]+)/im.exec(headers) ?? [])[1];
    a.innerHTML = answer1 ?? '';

    var b = document.getElementById("td2");
    var answer2 = (/Date: ([^\ ]+)/im.exec(headers) ?? [])[1];
    b.innerHTML = answer2 ?? '';

    var c = document.getElementById("td3");
    var answer3 = (/From: ([^\ ]+)/im.exec(headers) ?? [])[1];
    c.innerHTML = answer3 ?? '';

    var d = document.getElementById("td4");
    var answer4 = (/To: ([^\ ]+)/im.exec(headers) ?? [])[1];
    d.innerHTML = answer4 ?? '';

    var e = document.getElementById("td5");
    var answer5 = (/X-Ms-Has-Attach: ([^\ ]+)/im.exec(headers) ?? [])[1];
    e.innerHTML = answer5 ?? '';
  }
}

textSubmit()

<input type="text" id="headers" value="Thread-Topic: 44 Date: 22 etc" oninput="textSubmit()"/>
<table id="myTable">
  <tr>
    <th>Subject Header</th>
    <td id="td1"></td>
  </tr>
  <tr>
    <th>Actual Sender Address or Domain</th>
    <td id="td2"></td>
  </tr>
  <tr>
    <th>Sender IP Address</th>
    <td id="td3"></td>
  </tr>
  <tr>
    <th>Date/Time</th>
    <td id="td4"></td>
  </tr>
  <tr>
    <th>Attachments?</th>
    <td id="td5"></td>
  </tr>
</table>

answered May 20, 2021 at 10:42

stacj

1,1221 gold badge9 silver badges23 bronze badges

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

1 Comment

EarthlyBale11 Over a year ago

Thanks for your suggestion, but the modifications you've made (although helpful) do not resolve the issue - the table persists not to update. I don't think this is necessarily an issue with the regex code, but unsure what since no errors are returning, weird.

Collectives™ on Stack Overflow

Updating HTML Table Data using JavaScript function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related