3

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>

Improve this question
4
  • document.getElementsByName('row[i][student]')[0].value Commented Oct 30, 2018 at 19:23
  • to access an array element you can use numeric index or loops Commented Oct 30, 2018 at 19:25
  • 1
    @line88 That's not jQuery, its simple JS! Commented Oct 30, 2018 at 19:26
  • Your HTML is invalid. You have <td> without a <tr> Commented Oct 30, 2018 at 19:27

3 Answers 3

Reset to default
3

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>

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

1 Comment

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!
2

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!

Improve this answer

8 Comments

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
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 stackoverflow.com/questions/168802/…
I edited it, I left it a little more dynamic for you, a little more correct without changing the code a lot!
Thanks Demian, you're amazing. I learn so much from your information
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"; }
|
0

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");
    }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.