NjCode NjCode - 2 months ago 4
Javascript Question

how to extract multiple checked data with their respective id into an array - jquery

I am having problems getting the desired results from my code. Below is a one page full details of my jquery code, html and css so anyone can copy and test directly.

My gold is to manage my new twitter followers more efficiently. The page below should display my recent followers then give me 3 options to decide for each follower (1. follow-back, 2. watch, or 3. ignore. On clicking the submit button I should be able to extract the followers id and the corresponding follow-option then construct an array containing each pair of follower's (id and follow-option), for further processing.

I created an alert to test if my code is working properly but all I get is an array with twice the first profile data, like this: (1234567891,follow,1234567891,follow). My code's iteration and collection of corresponding data is not functioning properly, it probably stops at the first profile.

I am expecting to have this: (1234567891,follow,2234567892,ignore) or this: ([1234567891,ignore][2234567892,watch]) depending on the choices I make. How can I get to my desired results? I am still new in this stuff but making progress.

I have searched through similar examples on this site but still get the-same undesired results.

I am stock please help! Sorry for the long post, I am just trying to give as much details as I can.

Thanks.

<head>
<style>
#middle-container{display: flex;flex-direction: column;align-items: center;}
.profile-container{width: 676px;height: 120px;margin-top: 10px;margin-left: 25px;margin-right: 25px;margin-bottom: 10px;}
.new-profile{display: flex;flex-direction: row;position: relative;top: 30px;width: 80%;float: left;}
.profile-details{margin: 15px 10px 15px 10px;font-size: 13px;color: #030712;}
.follow-action{position: relative;top: 30px;margin: 1px;float: right;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id='middle-container'>
<div class= "profile-container">
<div class= "new-profile">
<div class= "profile-image"><img src="http://www.gravatar.com/avatar" alt="Profile Image" style="width:80px;height:80px;"></div>
<div class= "profile-details">
<div class= "profile-item">Name :</div>
<div class= "profile-item">Location :</div>
<div class= "profile-id">ID : 1234567891</div>
</div>
</div>
<div class= "follow-action">
<div class= "follow-action-title">Select Option</div>
<form class= "follow-option">
<input class="test follow-option-default" type="radio" name="followoption" value="follow" checked>Follow Back<br>
<input class="test" type="radio" name="followoption" value="watch">Watch This!<br>
<input class="test" type="radio" name="followoption" value="ignore">Ignore<br>
</form>
</div>
</div>
<div class= "profile-container">
<div class= "new-profile">
<div class= "profile-image"><img src="http://www.gravatar.com/avatar" alt="Profile Image" style="width:80px;height:80px;"></div>
<div class= "profile-details">
<div class= "profile-item">Name :</div>
<div class= "profile-item">Location :</div>
<div class= "profile-id">ID : 2234567892</div>
</div>
</div>
<div class= "follow-action">
<div class="follow-action-title">Select Option</div>
<form class= "follow-option">
<input class="test follow-option-default" type="radio" name="followoption" value="follow" checked>Follow Back<br>
<input class="test" type="radio" name="followoption" value="watch">Watch This!<br>
<input class="test" type="radio" name="followoption" value="ignore">Ignore<br>
</form>
</div>
</div>
<br></br>
<div class= "follow-action-submit">
<button style= "align-self:center; cursor: pointer;">SUBMIT SELECTED OPTIONS</button>
</div>
</div>
<script>
$("button").click(function(){
return submitFollowOptions();
});
function submitFollowOptions(){
alert(selectedOptions());
}
function selectedOptions(){
final_options_set = [];
$(".profile-container").each(function(index,element){
var id = $(".profile-id").html();
var option = $("input:radio:checked").val();
var option_set = [id,option];
final_options_set.push(option_set);
console.log(this);
});
return final_options_set;
}
</script></body></html>

Answer

In this line:

$(".profile-container").each(function(index,element){

you are cycling on each "profile-container" and you need to take the profile-id and checkbox values inside each "profile-container". So you can find them in this way:

instead of:

var id = $(".profile-id").html();  // get all profile-id and returns
                                   // only the first text

you need to:

var id = $(element).find(".profile-id").html();

The same is necessary for the checkbox.

So the snippet is:

$("button").click(function(){
  return submitFollowOptions();
});
function submitFollowOptions(){
  console.log('submitFollowOptions: ' + selectedOptions());
}
function selectedOptions(){
  final_options_set = [];
  $(".profile-container").each(function(index,element){
    var id = $(element).find(".profile-id").html();
    var option = $(element).find("input:radio:checked").val();
    var option_set = [id,option];
    final_options_set.push(option_set);
  });
  return final_options_set;
}
#middle-container{display: flex;flex-direction: column;align-items: center;}
.profile-container{width: 676px;height: 120px;margin-top: 10px;margin-left: 25px;margin-right: 25px;margin-bottom: 10px;}
.new-profile{display: flex;flex-direction: row;position: relative;top: 30px;width: 80%;float: left;}
.profile-details{margin: 15px 10px 15px 10px;font-size: 13px;color: #030712;}
.follow-action{position: relative;top: 30px;margin: 1px;float: right;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='middle-container'>
    <div class= "profile-container">
        <div class= "new-profile">
            <div class= "profile-image"><img src="http://www.gravatar.com/avatar" alt="Profile Image" style="width:80px;height:80px;"></div>
            <div class= "profile-details">
                <div class= "profile-item">Name :</div>
                <div class= "profile-item">Location :</div>
                <div class= "profile-id">ID : 1234567891</div>
            </div>
        </div>
        <div class= "follow-action">
            <div class= "follow-action-title">Select Option</div>
            <form class= "follow-option">
                <input class="test follow-option-default" type="radio" name="followoption" value="follow" checked>Follow Back<br>
                <input class="test" type="radio" name="followoption" value="watch">Watch This!<br>
                <input class="test" type="radio" name="followoption" value="ignore">Ignore<br>
            </form>
        </div>
    </div>
    <div class= "profile-container">
        <div class= "new-profile">
            <div class= "profile-image"><img src="http://www.gravatar.com/avatar" alt="Profile Image" style="width:80px;height:80px;"></div>
            <div class= "profile-details">
                <div class= "profile-item">Name :</div>
                <div class= "profile-item">Location :</div>
                <div class= "profile-id">ID : 2234567892</div>
            </div>
        </div>
        <div class= "follow-action">
            <div class="follow-action-title">Select Option</div>
            <form class= "follow-option">
                <input class="test follow-option-default" type="radio" name="followoption" value="follow" checked>Follow Back<br>
                <input class="test" type="radio" name="followoption" value="watch">Watch This!<br>
                <input class="test" type="radio" name="followoption" value="ignore">Ignore<br>
            </form>
        </div>
    </div>
    <br></br>
    <div class= "follow-action-submit">
        <button style= "align-self:center; cursor: pointer;">SUBMIT SELECTED OPTIONS</button>
    </div>
</div>

Comments