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>

to access an array element you can use numeric index or loops — MakeLoveNotWar, Oct 30 '18 at 19:25

score 3 · Answer 1 · answered Oct 31 '18 at 00:55

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>

Wow.. your code work flawlessly. I can see that your code is more structured,which will be very useful in doing complex coding. Also it give a better understanding about javascript element / component. Really appreciate your work Jon P.. cheers! — Old Java Guy, Oct 31 '18 at 02:24

Demian Bibiano · Accepted Answer · 2018-10-31T12:56:58.533

Well, it follows your line of code exactly as it is (because you said you do not want to change the code too much).

<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(this)" min="0" max="100"></td>
<td><input type="number" name="row[1][physics]" onblur="checkScore(this)" 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]" onblur="checkScore(this)" min="0" max="100"></td>
<td><input type="number" name="row[2][physics]" onblur="checkScore(this)" 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>

JavaScript [Edited again using part of the @Jon P code, the query selector is realy more dynamic, and the value of the "other" field you requested is commented out]

//pass element to function, in html, only add [this] in parenteses
checkScore = function (element) {
    //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 other = row.querySelector("[name*='[otherinfo]']");

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

    if (parseInt(physics) >= 80) {
        //other.value = student + " ,You are good at physics";
        alert(student + " ,You are good at physics");
    }
    otherField.focus();
    otherField.select();
}

Tested :), and sorry about my english!

this code work for me. Can you explain me a better way to achieve this? I mean, I don't mind to change the whole html and javascript coding — Old Java Guy, Oct 30 '18 at 19:58
well, I would use jquery for this, with more dynamic searches based on the field names or other thing, but I do not know what the purpose of your code is, if it is for learning purposes, I recommend looking for posts right here in StackOverflow, about jquery, to be able to do this in a more dynamic way. read https://stackoverflow.com/questions/168802/where-can-i-find-a-tutorial-to-get-started-learning-jquery — Demian Bibiano, Oct 30 '18 at 20:07
I edited it, I left it a little more dynamic for you, a little more correct without changing the code a lot! — Demian Bibiano, Oct 30 '18 at 20:55
Thanks Demian, you're amazing. I learn so much from your information — Old Java Guy, Oct 31 '18 at 00:07
Hi Demian, sorry to bother you again, supposed I want to write the alert in Form Input text name "Other", how should I do it? if (parseInt(math) >= 80 ) { document.getElementById("myText").value = "You are good at mathematic"; } — Old Java Guy, Oct 31 '18 at 06:24
@OldJavaGuy, sorry i did not understand your question just use `` other.value = "You are good at mathematic!" `` — Demian Bibiano, Oct 31 '18 at 12:30
@OldJavaGuy just look at the post, I edded with part of Jon P code, and new code you asked for! — Demian Bibiano, Oct 31 '18 at 13:03
Thanks Demian for your great help. Also thanks to @Jon P for his code that improve our coding. — Old Java Guy, Oct 31 '18 at 18:29

score 0 · Answer 3 · answered Oct 30 '18 at 19:29

Try that, haven't tested it

var form = document.getElementsByName("student_score")[0];
var students = form.getElementsByTagName("tr");

for(var i = 0; i < students.length; i++){
    var student = students[i].childnodes[0].value;
    var math = students[i].childnodes[1].value;
    var physics = students[i].childnodes[2].value;
    if (parseInt(math) >= 80 ) {
    alert(student + " ,You are good at mathematic");
    }

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

How to access HTML array object in javascript?

3 Answers3