CODEWITHSUNDEEP
javascriptjqueryhtml
harshavmb
harshavmb

Reputation: 3872

select by option always return same value - jquery

I've the below html.

<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist">TPS on Desktop</td>
<td class="tdcolor">
   <select id="health">
      <option value=0>Select</option>
      <option value="1">Green</option>
      <option value="2">Amber</option>
      <option value="3">Red</option>
   </select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist">TPS on Mobile</td>
<td class="tdcolor">
   <select id="health">
     <option value=0>Select</option>
     <option value="1">Green</option>
     <option value="2">Amber</option>
     <option value="3">Red</option>
   </select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

Have written below jquery to extract data in my td cells.

$(document).ready(function() {
   $('#saveButton').click(function() {
     $('#myTable tr:not(:first-child)').each(function(){
       var checklistText =$(this).find('#checklist').text();
       var commentsText = $(this).find('#comments').val();
       var selectedText ;
        $('select').each(function() {
          selectedText = $('#health option:selected').text();
        });
        alert(checklistText+' : '+selectedText);
     });
    });
});

If I select Green in first row and select Amber in second row, I expect output to be TPS on Desktop : Green and TPS on Mobile : Amber.

But, the output is always TPS on Desktop : Green and TPS on Mobile : Green. The second select value is never picked up but the first value of td is picked up.

Any help would be of great help.

Thanks in advance.

Upvotes: 1

Views: 2647

Answers (6)

mrid
mrid

Reputation: 5796

You have named both td checklist. An id should be unique. You should use class instead. 

$(document).ready(function() {
   $('#saveButton').click(function() {
     $('#myTable tr:not(:first-child)').each(function(){
       var checklistText =$(this).find('.checklist').text();
       var commentsText = $(this).find('#comments').val();
       var selectedText ;
       selectedText = $(this).find('.health option:selected').text();
       alert(checklistText+' : '+selectedText);
     });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist1" class="checklist">TPS on Desktop</td>
<td class="tdcolor">
   <select id="health1" class="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
   </select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist2" class="checklist">TPS on Mobile</td>
<td class="tdcolor">
   <select id="health2" class="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
   </select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

Upvotes: 2

Jins Peter
Jins Peter

Reputation: 2469

My JS fiddle went useless.. The actual issue is you using same elt ID repeatedly

https://jsfiddle.net/jinspeter/3qokLuff/ 

    <table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td class="checklist">TPS on Desktop</td>
<td class="tdcolor">
   <select class="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
   </select>  
</td>
<td><textarea class="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td class="checklist">TPS on Mobile</td>
<td class="tdcolor">
   <select class="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
   </select>  
</td>
<td><textarea class="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

$(document).ready(function() {
   $('#saveButton').click(function() {
     $('#myTable tr:not(:first-child)').each(function(){
       var checklistText =$(this).find('.checklist').text();
       var commentsText = $(this).find('.comments').val();
       var selectedText = $(this).find('select.health option:selected').text();

        alert(checklistText+' : '+selectedText);
     });
    });
});

Upvotes: 0

Akshay Chawla
Akshay Chawla

Reputation: 613

The issue is very simple one. Whatever value you will select in second dropdown, script will alert value of 1st dropdown and the reason behind this is same "id=health". Everytime script is executed it will get the element from the top and it will use that element which is found in first. So use unique id for both the dropdown.

"Using $() with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element. Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid."

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

Convert id to class and then a bit change in jquery code and it will work.

Example:-

$(document).ready(function() {
   $('#saveButton').click(function() {
     $('#myTable tr:not(:first-child)').each(function(){
       var checklistText =$(this).find('#checklist').text();
       var commentsText = $(this).find('#comments').val();
       //check code change here
       var selectedText = $(this).find('.health option:selected').text();
        alert(checklistText+' : '+selectedText);
     });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist">TPS on Desktop</td>
<td class="tdcolor">
   <select class="health"><!-- convert id to class-->
	 <option value=0>Select</option>
	 <option value="1">Green</option>
	 <option value="2">Amber</option>
	 <option value="3">Red</option>
   </select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist">TPS on Mobile</td>
<td class="tdcolor">
   <select class="health"><!-- convert id to class-->
	 <option value=0>Select</option>
	 <option value="1">Green</option>
	 <option value="2">Amber</option>
	 <option value="3">Red</option>
   </select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

Note:-

The snippet:- $('select').each(function() {selectedText = $('#health option:selected').text();}); actually not needed because you are applying each() on <tr> already.

Upvotes: 1

prasanth
prasanth

Reputation: 22490

you colud use like this .you are using same id .id is on unique, so only it returning first selected value not take with second one.so use with $(this) .it will validate each row inside the select

$(this).find('select').each(function() {
        selectedText = $(this).children('option:selected').text();
      });


$(document).ready(function() {
  $('#saveButton').click(function() {
    $('#myTable tr:not(:first-child)').each(function() {
      var checklistText = $(this).find('#checklist').text();
      var commentsText = $(this).find('#comments').val();
      var selectedText;
      $(this).find('select').each(function() {
        selectedText = $(this).children('option:selected').text();
      });
      alert(checklistText + ' : ' + selectedText);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
  <tr>
    <th><b>CheckList</b></th>
    <th><b>Health</b></th>
    <th><b>Comments</b></th>
  </tr>
  <tr>
    <td id="checklist">TPS on Desktop</td>
    <td class="tdcolor">
      <select id="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
   </select>
    </td>
    <td><textarea id="comments" type="text" name='Comments'></textarea></td>
  </tr>
  <tr>
    <td id="checklist">TPS on Mobile</td>
    <td class="tdcolor">
      <select id="health">
             <option value=0>Select</option>
             <option value="1">Green</option>
             <option value="2">Amber</option>
             <option value="3">Red</option>
   </select>
    </td>
    <td><textarea id="comments" type="text" name='Comments'></textarea></td>
  </tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

The issue is here:

$('select').each(function() {
    selectedText = $('#health option:selected').text();
});

here you are looping with every select element but always getting the value of $('#health') select. Change it to:

$('select').each(function() {
    selectedText = $(this).find('option:selected').text();
});

and try again.

Upvotes: 1

Related Questions