1

I am trying to validate a matrix table with inputs that accept only 1 and 0. I want to validate each row. How can i determine the value of each td of each row on button click?

Edit Thanks to @ Abhilash Ravindran C K i have updated my javascript code. Now i want to grab those values and use them in condition.

 $('#checkMatrix').click(function(e){
       $("tr").find("td input").each(function() {
            document.write(this.value);
                        
       });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Matrix">
<tr id="Matr1">
  <td>1</td>
  <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input class="increment-30-gray"  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>

   </tr>
<tr id="Matr2">
  <td>2</td>
  <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input class="increment-30-gray"  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>

</tr>
</table>

<button id="checkMatrix">Check</button>
<h4>Answers:<br> 1,0,0,1<br>0,0,1,0</h4>

Answers:
Row1: 1,0,0,1
Row2: 0,0,1,0
Improve this question
7
  • What have you tried so far? What exactly is the problem? Selecting the inputs? Grabbing their values? Comparing them to the desired result? And why are there 8 inputs per row but your answer only has 4 values? You should also fix your snippet; the last JS line is supposed to be }); Commented Feb 24, 2018 at 13:45
  • On button click i want to grab the values of each row. In my example there are two rows. The answers of each row is shown at the bottom of my question. You are right it should have 4 columns my fault Commented Feb 24, 2018 at 13:47
  • The problem is that i have 10+ rows and somehow i want to check each row dynamically i think jquery offers such a function Commented Feb 24, 2018 at 13:50
  • For the first row, use $('#Matrix tr').eq(0).find('input'). Loop over the result using .each, and grab the values using $(this).val() inside the function. Commented Feb 24, 2018 at 13:55
  • @ChrisG How can i check if the first row has the values 1,0,0,1? This doesn't work: if($(this).val() === 1001) Commented Feb 24, 2018 at 14:51

2 Answers 2

Reset to default
1

Following code will help you to iterate over each <td> of each <tr>

$('#checkMatrix').click(function(e){
       $("tr").find("td input").each(function() {
            console.log(this.value);
            // Here you can write the logic for validation              
       });
});

This code will works for you,

$('#checkMatrix').click(function(e){
     var $first = $('#Matr1 td');
     var $second = $('#Matr2 td');
     if(( $first.eq(1).find('input').val() == 1 && $first.eq(2).find('input').val() == 0 && $first.eq(3).find('input').val() == 0 && $first.eq(4).find('input').val() == 1) && ( $second.eq(1).find('input').val() == 0 && $second.eq(2).find('input').val() == 0 && $second.eq(3).find('input').val() == 1 && $second.eq(4).find('input').val() == 0))
     {
         alert('success');            
     }
     else
     {
         alert('failed');
     }                          
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

nice thanks. How can i determine the value of the second input for example?
It is iterating over each an every td's input of all tr.
You can write your validation code inside that each loop
Yes i know, i want to check for example if row 1 has inputs 1,0,0,1 i will do if(this.value == "1,0,0,1") {alert("success");} ?
0

You can also push inputs into the array for each row, then you repeat the procedure for row 2, etc:

Then we use The join() method which joins the elements of an array into a string, and returns the string to be compared. see more about join method.

It is recommended to avoid keeping the answer in JS as it can easily be seen by the client. Save the answer in Php. You can then return the variable from PHP and compare it in JS.

 

      $('#checkMatrix').click(function(e){
    var a = []; var b = [];
       $("#Matr1").find("td input").each(function() {
       var z = $(this).val();
    //if user inputs are 1 or 0 push them into the array
        if(z === "1" || z === "0"){ a.push(this.value);}                         
    });
      $("#Matr2").find("td input").each(function() {
      var z = $(this).val();
    //if user inputs are 1 or 0 push them into the array
        if(z === "1" || z === "0"){ b.push(this.value);}                         
    });
  var ArrToString1 =a.join(""); //row 1 array into  string
  var ArrToString2 =b.join(""); //row 2 array into string
    if (ArrToString1 === "1001")console.log("row 1 correct");
    if (ArrToString2 === "0010")console.log("row 2 correct");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Matrix">
<tr id="Matr1">
  <td>1</td>
  <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input class="increment-30-gray"  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>

   </tr>
<tr id="Matr2">
  <td>2</td>
  <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input class="increment-30-gray"  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>

</tr>
</table>

<button id="checkMatrix">Check</button>
<h4>Answers:<br> 1,0,0,1<br>0,0,1,0</h4>

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.