How to collect data from each row in javascript or jquery?

Question

I'm trying to get the data of EACH row when a user has an email and put it in an array. So basically when the user clicks on the checkbox it enables the input field so they can enter an email. So far I am able to get the emails but I don't know how to get the data for each row ONLY for the users that have an email and the checkbox is still checked. For example if I select the first 2 users and enter an email I should get 2 elements in my array:

EXAMPLE:

Mike brown 3035607897 [email protected]

Mary Bruns 3035607233 [email protected]

Here's my code:

$(document).ready(function() {

  $("#checkAll").change(function() {
    $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
        enable_disable_input(this);
    });
  });

  function enable_disable_input(checkbox) {
    var input_id = checkbox.id.replace('-checkbox', '-inputField');
    $("#" + input_id).prop('disabled', !checkbox.checked);
  }

  $(".input_checkbox").change(function() {
    enable_disable_input(this);
  });

  $(".input_checkbox").each(function() {
    enable_disable_input(this);
  }); 

  /* Collecting data ONLY from users that have an email */
  $("#myform").submit(function(event){
  	 event.preventDefault();
  	 $(".inputEmail").each(function(){
  	if($(this).val().length > 0){
  	var inputValue = $(this).val();
  	console.log(inputValue);
  	}
  });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id = "myform">
  <input type="checkbox" id="checkAll" />Select All
  <br/>   
<tr>
  <td><input type="checkbox" id="0customer-name-checkbox" class="input_checkbox"></td>
  <td>Mike</td>
  <td>brown</td> 
  <td>3035607897</td>
  <td><input type="email" name="name" id="0customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="1customer-name-checkbox" class="input_checkbox"></td>
  <td>Mary</td>
  <td>Bruns</td>
  <td>3035607233</td>
  <td><input type="email" name="email" id="1customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="2customer-name-checkbox" class="input_checkbox"></td>
  <td>Lauren</td>
  <td>White</td>
  <td>3035634211</td>
  <td><input type="email" name="email" id="2customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="3customer-name-checkbox" class="input_checkbox"></td>
  <td>Tyler</td>
  <td>Steven</td>
  <td>3035236671</td>
  <td><input type="email" name="email" id="3customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="4customer-name-checkbox" class="input_checkbox"></td>
  <td>Carl</td>
  <td>Douglas</td>
  <td>3035227243</td>
  <td><input type="email" name="email" id="4customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="5customer-name-checkbox" class="input_checkbox"></td>
  <td>Peter</td>
  <td>McClure</td>
  <td>3035112239</td>
  <td><input type="email" name="email" id="5customer-name-inputField" class = "inputEmail"/></td>
</tr>  
<br/>

<tr>
  <td><input type="checkbox" id="6customer-name-checkbox" class="input_checkbox"></td>
  <td>Liz</td>
  <td>Prems</td>
  <td>3035120075</td>
  <td><input type="email" name="email" id="6customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

  <input type="submit" value="Send"/>
</form>

Can someone tell me what I'm missing please?? Thanks a lot!

heyarne · Accepted Answer · 2016-06-10 04:10:52Z

1

Have a look at $.map and $.filter, you can find the documentation here and here. It allows you to go over your selection, $(".inputEmail"), and transform it by leaving it out or returning another value based on the input value.

First, give some classes to your tds (do this for each row with user data):

<tr>
  <td><input type="checkbox" id="1customer-name-checkbox" class="input_checkbox"></td>
  <td class="firstName">Mary</td>
  <td class="lastName">Bruns</td>
  <td class="userNumber">3035607233</td>
  <td><input type="email" name="email" id="1customer-name-inputField" class = "inputEmail"/></td>
</tr>

Then you can run the following point when you want to retrieve the information (in your .submit callback most probably):

var users = $("tr")
  .filter(function () { return $(this).find('.inputEmail').val() !== "" })
  .map(function () {
    var $row = $(this);
    return {
      firstName: $row.find('.firstName').text(),
      lastName: $row.find('.lastName').text(),
      number: $row.find('.userNumber').text(),
      email: $row.find('.inputEmail').val()
    }
  })
  .get();

console.log('Array containing all users with an email:');
console.log(users);

edited Jun 10, 2016 at 4:10

answered Jun 10, 2016 at 3:20

heyarne

1,17712 silver badges34 bronze badges

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

10 Comments

HenryDev Over a year ago

your answer doesn't seem to get each row and put the elements into an array?

heyarne Over a year ago

it selects all your elements with class="inputEmail", filters out the empty ones and returns the value of the other ones. Did I misunderstand you?

HenryDev Over a year ago

I'm still not sure how to implement your suggestion and get the values for each row and put them into an array? Can you please share a jsfflide , codepen or something? Thanks a lot!

heyarne Over a year ago

I have edited the answer for clarity. You can put that code into your .submit method.

HenryDev Over a year ago

You're answer doesn't get the entire row. For example if I select the first 2 users and enter an email I should get 2 elements in my array. And these 2 elements should be each row. the first element should be Mike brown 3035607897 [email protected] and the second element should be: Mary Bruns 3035607233 [email protected] Does that make sense?

|

Gayathri Mohan · Accepted Answer · 2016-06-10 03:52:12Z

Hi check this link for rerence check the console value http://plnkr.co/edit/3GFBckmBMomJwgMNIHrr

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "myform">
  <input type="checkbox" id="checkAll" />Select All
  <br/>  
  <table>
<tr>
  <td><input type="checkbox" id="0customer-name-checkbox" class="input_checkbox"></td>
  <td>Mike</td>
  <td>brown</td> 
  <td>3035607897</td>
  <td><input type="email" name="name" id="0customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="1customer-name-checkbox" class="input_checkbox"></td>
  <td>Mary</td>
  <td>Bruns</td>
  <td>3035607233</td>
  <td><input type="email" name="email" id="1customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="2customer-name-checkbox" class="input_checkbox"></td>
  <td>Lauren</td>
  <td>White</td>
  <td>3035634211</td>
  <td><input type="email" name="email" id="2customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="3customer-name-checkbox" class="input_checkbox"></td>
  <td>Tyler</td>
  <td>Steven</td>
  <td>3035236671</td>
  <td><input type="email" name="email" id="3customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="4customer-name-checkbox" class="input_checkbox"></td>
  <td>Carl</td>
  <td>Douglas</td>
  <td>3035227243</td>
  <td><input type="email" name="email" id="4customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>

<tr>
  <td><input type="checkbox" id="5customer-name-checkbox" class="input_checkbox"></td>
  <td>Peter</td>
  <td>McClure</td>
  <td>3035112239</td>
  <td><input type="email" name="email" id="5customer-name-inputField" class = "inputEmail"/></td>
</tr>  
<br/>

<tr>
  <td><input type="checkbox" id="6customer-name-checkbox" class="input_checkbox"></td>
  <td>Liz</td>
  <td>Prems</td>
  <td>3035120075</td>
  <td><input type="email" name="email" id="6customer-name-inputField" class = "inputEmail"/></td>
</tr>
<br/>
</table>
  <input type="submit" value="Send" id="send"/>
</div>
  </body>

</html>

and JS

// Add your javascript here
$(function() {
    $("#checkAll").change(function() {
        $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
            enable_disable_input(this);
        });
    });

    function enable_disable_input(checkbox) {
        var input_id = checkbox.id.replace('-checkbox', '-inputField');
        $("#" + input_id).prop('disabled', !checkbox.checked);
    }

    $(".input_checkbox").change(function() {
        enable_disable_input(this);
    });

    $(".input_checkbox").each(function() {
        enable_disable_input(this);
    });

    /* Collecting data ONLY from users that have an email */
    $("#send").click(function() {
        var totalrecord = [];
        $(".inputEmail").each(function() {
            if ($(this).val().length > 0) {
                var inputValue = $(this).val();
                var $row = $(this).closest("tr"), // Finds the closest row <tr> 
                    $tds = $row.find("td"); // Finds all children <td> elements
                var abj = {};
                $.each($tds, function(index, element) {
                    console.log(index)
                    if (index == 1) {
                        abj.name = $(this).text()
                    } else if (index == 2) {
                        abj.submae = $(this).text()
                    } else if (index == 3) {
                        abj.id = $(this).text()
                    } else {
                        abj.mail = inputValue
                    }
                    console.log($(this).text())
                });
                totalrecord.push(abj)

                console.log(totalrecord)
            }
        });
    });
});

Collectives™ on Stack Overflow

How to collect data from each row in javascript or jquery?

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related