How to access HTML array object in javascript?

user_10581906 0
Viewed 2212

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>

forms html javascript
3 Answers

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>

user_46650

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!

user_74572380

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");
    }
}
user_26289030
Related