cjl750 cjl750 - 3 months ago 6
jQuery Question

set variable as an input whose parent's index matches another variable

I have a webform where I am trying to manipulate the value of some readonly text inputs based on dropdown selections.

HTML (abbreviated) basically looks like this:

<fieldset class="container">
<fieldset class="foo-points-fs">
<div>
<selector id="foo-bar1-points">
<option>1</option>
<option>2</option>
</selector>
</div>
<div>
<selector id="foo-bar2-points">
<option>1</option>
<option>2</option>
</selector>
</div>
</fieldset>
<fieldset class="foo-weight-fs">
<div>
<input readonly="readonly" value="1" id="foo-bar1-weight"/>
</div>
<div>
<input readonly="readonly" value="2" id="foo-bar2-weight"/>
</div>
</fieldset>
<fieldset class="foo-score-fs">
<div>
<input readonly="readonly" value="0" id="foo-bar1-score"/>
</div>
<div>
<input readonly="readonly" value="0" id="foo-bar2-score"/>
</div>
</fieldset>
</fieldset>


On the page, these basically look like table rows where you have a column of dropdowns the user will select from with columns for weight and score next to it. So each set of
selector
,
input
, and
input
is one row.

What I would like to do is change the value of the inputs within the
.score
fieldset according to the value of the selector and weight input in the same row – i.e., those whose parent divs' indexes are equal to their corresponding selector's parent div's index.

The part I am having trouble figuring out is how to say, in jQuery, to set a variable to "the input whose parent div's index is equal to another selector/input's parent div's index."

Here's what I've got so far:

jQuery('fieldset.container select[id$="-points"]').change(function() {

var sel = jQuery(this),
fs = sel.parents('fieldset[id$="-points-fs"]'),
dropPar = sel.parent('div'),
dropNdx = dropPar.index(),
weightInput = fs.find('input[id$="-weight]'),
scoreInput = fs.find('input[id$="-score"]'),
weight = weightInput.parent('div').index(dropNdx), // problem is here, I assume
score = scoreInput.parent('div').index(dropNdx); // problem is here, I assume

score.val(weight.val() * sel.val());

});


Help please?

Answer

Here is the working code!

jQuery('fieldset.webform-component--rubric--part1.form-wrapper select[id$="-points"]').change(function() {
	
  	var value = $(this).val();
    var index = $(this).parent().index() + 1;
    var weight = $(this).parent().parent().parent().next().find('#pid'+index+'-weight').val();
  
  $(this).parent().parent().parent().next().next().find('#pid'+index+'-score').val( value*weight );
  
});
.description, select {
  display: inline;
}
.description {
  margin-right: 10px;
}
input[type="text"] {
  width: 30px;
  text-align: center;
}
fieldset fieldset {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<fieldset class="webform-component--rubric--part1 form-wrapper">
    <div class="fieldset-wrapper">
        <div></div> <!-- unrelated -->
        <fieldset class="webform-component--rubric--part1--row-pid">
            <div class="fieldset-wrapper">
                <div></div>
                <div> <!-- unrelated -->
                    <div><div></div></div> <!-- unrelated -->
                    <div><div></div></div> <!-- unrelated -->
                    <div><div></div></div> <!-- unrelated -->
                    <div><div></div></div> <!-- unrelated -->
                </div>
                <fieldset class="webform-component--rubric--part1--row-pid--pid-points-fs">
                    <div class="fieldset-wrapper">
                        <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid1-points">
                        <div class="description">1.</div>
                        <select id="pid1-points" name="pid1_points" class="form-select">
                          <option value="0" selected="selected">0</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid2-points">
                        <div class="description">2.</div>
                        <select id="pid2-points" name="pid2_points" class="form-select">
                          <option value="0" selected="selected">0</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid3-points">
                        <div class="description">3.</div>
                        <select id="pid3-points" name="pid3_points" class="form-select">
                          <option value="0" selected="selected">0</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid4-points">
                        <div class="description">4.</div>
                        <select id="pid4-points" name="pid4_points" class="form-select">
                          <option value="0" selected="selected">0</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                        </div>
                  </div>
              </fieldset>
              <fieldset class="webform-component--rubric--part1--row-pid--pid-weight-fs">
                    <div class="fieldset-wrapper">
                        <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid1-weight">
                          <label>1. Weight</label>
                          <input readonly="readonly" type="text" id="pid1-weight" name="pid1_weight" value="1" />
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid2-weight">
                          <label>2. Weight</label>
                          <input readonly="readonly" type="text" id="pid2-weight" name="pid2_weight" value="2" />
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid3-weight">
                          <label>3. Weight</label>
                          <input readonly="readonly" type="text" id="pid3-weight" name="pid3_weight" value="2" />
                        </div>
                        <div readonly="readonly" class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid4-weight">
                          <label>4. Weight</label>
                          <input readonly="readonly" type="text" id="pid4-weight" name="pid4_weight" value="3" />
                        </div>
                  </div>
              </fieldset>
              <fieldset class="webform-component--rubric--part1--row-pid--pid-score-fs">
                    <div class="fieldset-wrapper">
                        <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid1-score">
                          <label>1. Score</label>
                          <input readonly="readonly" type="text" id="pid1-score" name="pid1_weight" value="0" />
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid2-score">
                          <label>2. Score</label>
                          <input readonly="readonly" type="text" id="pid2-score" name="pid2_weight" value="0" />
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid3-score">
                          <label>3. Score</label>
                          <input readonly="readonly" type="text" id="pid3-score" name="pid3_weight" value="0" />
                        </div>
                        <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid4-score">
                          <label>4. Score</label>
                          <input readonly="readonly" type="text" id="pid4-score" name="pid4_weight" value="0" />
                        </div>
                  </div>
               </fieldset>
            </div>
        </fieldset>
    </div>
</fieldset>