How to access HTML array object in javascript?

Question

sorry for asking simple question. I am really a beginner in Javascript. I need to access my HTML array form object in my javascript, but I don't know how to do it.

The goal is to trigger the alert in javascript so the browser will display message according to the condition in javascript. Here is my code :

checkScore = function()
 {
 //I don't know how to access array in HTML Form, so I just pretend it like this :
  
 var student = document.getElementByName('row[i][student]').value;
 var math = document.getElementByName('row[i][math]').value; 
 var physics = document.getElementByName('row[i][physics]').value; 

if (parseInt(math) >= 80 ) {
alert(student + " ,You are good at mathematic");
}

if (parseInt(physics) >= 80 ){
alert(student + " ,You are good at physics");
}
 
student_score.row[i][otherinfo].focus();
student_score.row[i][otherinfo].select();
}

<h2>HTML Forms</h2>

<form name="student_score" action="/action_page.php">

<table border=1>

<thead>

<td>Student</td>
<td>Math Score</td>
<td>Physics Score</td>
<td>Other info</td>
</thead>

<tbody>
<tr>
<td><input type="text" name="row[1][student]"></td>
<td><input type="number" name="row[1][math]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="number" name="row[1][physics]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="text" name="row[1][otherinfo]"></td>
</tr>

<tr>
<td><input type="text" name="row[2][student]"></td>
<td><input type="number" name="row[2][math]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="number" name="row[2][physics]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="text" name="row[2][otherinfo]"></td>             
</tr>

<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>

</tbody>
</table>
</form> 

<p>If you click the "Submit" button, it will save the data.</p>

Answer 1

We are going to leverage few things here to streamline this.

The first is Event Listeners, this removes all javascript from your HTML. It also keeps it more dynamic and easier to refactor if the table ends up having rows added to it via javascript.

Next is parentNode, which we use to find the tr that enclosed the element that was clicked;

Then we use querySelectorAll with an attribute selector to get our target fields from the tr above.

/*This does the work*/
function checkScore(event) {
  //Get the element that triggered the blur
  var element = event.target;
  //Get our ancestor row (the parent of the parent);
  var row = element.parentNode.parentNode;
  //Use an attribute selector to get our infor from the row
  var student = row.querySelector("[name*='[student]']").value;
  var math = row.querySelector("[name*='[math]']").value;
  var physics = row.querySelector("[name*='[physics]']").value;
  var otherField = row.querySelector("[name*='[otherinfo]']");

  if (parseInt(math, 10) >= 80) {
    alert(student + " ,You are good at mathematic");
  }

  if (parseInt(physics, 10) >= 80) {
    alert(student + " ,You are good at physics");
  }

  otherField.focus();
  otherField.select();
}

/*Wire Up the event listener*/
var targetElements = document.querySelectorAll("input[name*='math'], input[name*='physics']");
for (var i = 0; i < targetElements.length; i++) {
  targetElements[i].addEventListener("blur", checkScore);
}

<h2>HTML Forms</h2>

<form name="student_score" action="/action_page.php">

  <table border=1>

    <thead>
      <tr>
        <td>Student</td>
        <td>Math Score</td>
        <td>Physics Score</td>
        <td>Other info</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><input type="text" name="row[1][student]" class='student'></td>
        <td><input type="number" name="row[1][math]" min="0" max="100"></td>
        <td><input type="number" name="row[1][physics]" min="0" max="100"></td>
        <td><input type="text" name="row[1][otherinfo]"></td>
      </tr>

      <tr>
        <td><input type="text" name="row1[2][student]"></td>
        <td><input type="number" name="row[2][math]" min="0" max="100"></td>
        <td><input type="number" name="row[2][physics]" min="0" max="100"></td>
        <td><input type="text" name="row[2][otherinfo]"></td>
      </tr>

      <tr>
        <td>
          <input type="submit" value="Submit">
        </td>
      </tr>

    </tbody>
  </table>
</form>