CODEWITHSUNDEEP
javascriptjqueryhtml
JCQ50
JCQ50

Reputation: 47

Getting multiple values from a dropdown with javascript

I have read through multiple threads but none of them specifically speak to my issue. I have a table functioning as a dropdown. (Yes, it has to be this way)

var blocka = "test1"
$('#john').on('change', function() {
  if (this.checked) {
    this.setAttribute("checked", "checked");
    this.checked = true;
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var tx = document.getElementById('james').innerHTML;
    $('.variant_title').text(tx);
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var rx = document.getElementById('matt').innerhtml;
    $('.variant_price').text(rx);
  } else {
    this.setAttribute("checked", ""); // For IE
    this.removeAttribute("checked"); // For other browsers
    this.checked = false;
    $('.variant_title').empty();
    $('.variant_price').empty();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="special-select">
  <tbody>
    <tr>
      <td>
        <span class="selecter-selected variant_title" name="click_me" style="height:40px! important;"></span>
      </td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
     important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
  <div class="variant_price"></div>
</table>

the code I am using to get the value of 'james' is working for the first checkbox input. However, when I uncheck the input and try to check a new one I get no value showing for the variant_title.

How do I get it to work for more than the first iteration?

Upvotes: 2

Views: 69

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

id must be unique in HTML, and it will only get the 1st match so that's why it only works for the 1st one.

1st thing to do is make id unique if you really need use id, use id="john1", id="john2"... etc.

$('input[id^=john]') will get all input with id started with john (attribute selector), so all john1 john2 will be selected.

Then set tx rx to '' first, then find all checked checkbox with:

  $('.picker input[type=checkbox]:checked').each(function() {
    var parentTr = $(this).parent().parent();
    tx += '<br>' + parentTr.find('.james').text();
    rx += '<br>' + parentTr.find('.matt').text();
  });

Since the checkbox is grandchild of tr, child of td $(this).parent().parent(); will get the grandparent tr, then use find('.james') you can find the class called james within this tr block.

build the string and finally output as html()

var blocka = "test1";
$('input[id^=john]').on('change', function() {
  if (this.checked) {
    this.setAttribute("checked", "checked");
    this.checked = true;
  }
  var tx = '';
  var rx = '';
  $('.picker input[type=checkbox]:checked').each(function() {
    var parentTr = $(this).parent().parent();
    tx += '<br>' + parentTr.find('.james').text();
    rx += '<br>' + parentTr.find('.matt').text();
  });
  $('.variant_title').html(tx);
  $('.variant_price').html(rx);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="special-select">
  <tbody>
    <tr>
      <td>
        <span class="selecter-selected variant_title" name="click_me" style="height:40px! important;"></span>
      </td>
    </tr>
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
     important;min-height:1.20em;">
      <td>
        <input id="john1" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span class="matt">$0.01</span></td>
      <td class="james hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td>
        <input id="john2" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span class="matt">$0.01</span></td>
      <td class="james hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td>
        <input id="john3" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span class="matt">$0.01</span></td>
      <td class="james hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
</table>
<div class="variant_price"></div>

Upvotes: 1

Jordan Running
Jordan Running

Reputation: 106027

The problem is that you're using the same id multiple times. ids must be unique, which makes them unsuited for what you're using them for. When you do document.getElementById('james'), which #james do you expect it to get? When multiple elements are the same "kind" of thing, use a class, not an id.

As an aside, james, john, and matt are not useful ids. ids and class names should be descriptive. In the below snippet I've replaced <span id="matt"> with <span class="price"> and <td id="james"> with <td class="title">.

In the code below, when a checkbox is checked, I use jQuery's closest function to get the checkbox's row and find to get the .title and .price in the same row. (I've also simplified the markup and logic to make it clearer; you'll need to integrate it with what you have.)

Since you didn't specify, in the snippet when a second checkbox is checked it just replaces the output from the previous check.

var $variantTitle = $('.variant_title');
var $variantPrice = $('.variant_price');

$('#products :checkbox').on('change', function() {
  if (this.checked) {
    var $row = $(this).closest('tr');
    var title = $row.find('.title').text();
    var price = $row.find('.price').text();
    $variantTitle.text(title);
    $variantPrice.text(price);
  } else {
    $variantTitle.empty();
    $variantPrice.empty();
  }
});
body{font-size:.75rem}
.hide{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
  <tbody>
    <tr>
      <td>
        <span class="variant_title"></span>
      </td>
    </tr>
    <tr>
      <td><input name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
</table>

<div class="variant_price"></div>

Upvotes: 1

Related Questions