Getting multiple values from a dropdown with javascript

Question

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?

Post the returned HTML, not the pre-rendered, that doesnt help us help you. — Cam
– Cam, Commented May 31, 2017 at 14:45
This isn't the solution to your problem, but innerhtml ≠ innerHTML. — Jordan Running
– Jordan Running, Commented May 31, 2017 at 15:01
oh ok thanks @JordanRunning I'm still learning a lot of this stuff — JCQ50
– JCQ50, Commented May 31, 2017 at 15:03
@JordanRunning I changed it to lowercase in my actual code and that actually made it not work at all — JCQ50
– JCQ50, Commented May 31, 2017 at 15:06

Jordan Running · Accepted Answer · 2017-05-31 15:34:40Z

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>

@JCQ50 Glad to help. If this answer solved your problem please consider marking it as Accepted.
Do you know how I would get it add the prices together?@jordanrunning

Dalin Huang · Accepted Answer · 2017-05-31 15:47:30Z

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>

the only issue is there is only one id the code uses dynamic values to create the multiple options. My original code I posted showed that put i had to change it to get a answer that might help.
@JCQ50 add a counter when you create those id, like index for ex: id = "james"+index

Collectives™ on Stack Overflow

Getting multiple values from a dropdown with javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related