Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Simply do this:</p> <pre><code>// On selected option change... $("#numbers").change(function() { var // Get the selected value as an integer value = +$(this).val(), // Get the third input field $thirdInput = $('input[name^="sum"]:nth-child(3)') ; // Increase the third input field's value by the selected option value $thirdInput.val(+$thirdInput.val() + value); // Recalculate the sum $("input[name^=sum]").sum("keyup", "#totalSum"); }); </code></pre> <p><a href="http://jsfiddle.net/rEQnY/5/" rel="nofollow"><strong>Working JSFiddle demo</strong></a>.</p> <p>Here we're using a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" rel="nofollow">unary <code>+</code></a> to convert the value of the inputs and the drop down to an integer.</p> <hr> <p><strong>Edit</strong>: Further requirement made in comments:</p> <blockquote> <p>if the dropdown is changed from a numbered value to the "pick one" option, i need the addition to be retracted and go back to it's previous state.</p> </blockquote> <p>For this we can declare a new global variable which is set to the initial value of the third text field:</p> <pre><code>var thirdSumValue = 1; </code></pre> <p>Then use this in our drop down's <code>change</code> event:</p> <pre><code>$thirdInput.val(thirdSumValue + value); </code></pre> <p><a href="http://jsfiddle.net/rEQnY/6/" rel="nofollow"><strong>Updated JSFiddle demo</strong></a>.</p> <p>Alternatively instead of hard coding its default value you can simply set it to the value of the text field on load:</p> <pre><code>var thirdSumValue = +$('input[name^="sum"]:nth-child(3)').val(); </code></pre> <p>This will reflect any default HTML values prior to the JavaScript being loaded.</p> <p><strong><a href="http://jsfiddle.net/rEQnY/7/" rel="nofollow">Final JSFiddle demo</a></strong>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload