用输入jQuery的.val（）计算

Question

i'm working on a project, and i have to make some calculations on an existing value of an input field. let's say the input value is 400 or whatever.

underneath i've got a select box YES means add 425 , NO means add 0 or substract -425;

HTML:

<input id="priceTag" name="priceTag" type="text" value="400">

<select id="designChoice" name="designChoice">
     <option>Choose--</option>
     <option value="yes">yes</option>
     <option value="no">no</option>
</select>

jQuery:

jQuery(document).ready(function($){

    var priceTag = $('#priceTag');        

    $('#designChoice').on('change', function(){

        if($(this).val()==='yes'){              
          /* Here i want to add + 425 to the */

        }else{
          /* Here I want to add nothing to the input or substract -425 */   
        }

    });
});

What i've tried:

priceTag.val(+ 425);
/* And more of this type of wrong code ;-P */

I've tried to look up existing examples but i didn't find many examples so thanks in advance for the answer!

Answer 1

The logic to this is a little more complicated. You need to know if 425 has already been added before no has been clicked, in which case you need to subtract 425 , not just add 0 .

With that in mind you could add a data attribute to the input to contain it's starting price:

<input id="priceTag" name="priceTag" type="text" value="400" data-default="400">

Then when the select is changed you can convert the data attribute to an integer and then perform the calculation on it. Try this:

jQuery(document).ready(function ($) {
    var $priceTag = $('#priceTag');        
    $('#designChoice').on('change', function () {
        if ($(this).val() === 'yes') {
            $priceTag.val(parseInt($priceTag.data('default'), 10) + 425);            
        } else {
            $priceTag.val($priceTag.data('default'));
        }        
    });
});

Example fiddle

Answer 2

Use this:

JS:

jQuery(document).ready(function($){

    var priceTag = $('#priceTag');        
    var selectedYes=false;
    $('#designChoice').on('change', function(){
        if($(this).val()==='yes'){              
          /* Here i want to add + 425 to the */
            selectedYes=true;
            priceTag.val( ( +priceTag.val() ) + 425 );
        }else if (selectedYes){
          /* Here I want to add nothing to the input */ 
            priceTag.val( ( +priceTag.val() ) - 425 );
            selectedYes=false;
        }

    });
});

JSFIDDLE: http://jsfiddle.net/ghorg12110/0xvkupe2/1/

Answer 3

Save the value of #priceTag to a data attribute on page load and whenever the user changes it:

 jQuery(document).ready(function($){ var priceTag = $('#priceTag'), designChoice = $('#designChoice'); //save initial value and whenever it is changed to a data attribute priceTag.on('change', function() { $(this).data('value', this.value); designChoice.change(); }) .change(); designChoice.on('change', function(){ if($(this).val()==='yes') { /* Here i want to add + 425 to the */ priceTag.val( +priceTag.data('value') + 425 ); } else{ /* Here I want to add nothing to the input or substract -425 */ priceTag.val( priceTag.data('value') ); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="priceTag" name="priceTag" type="text" value="400"> <select id="designChoice" name="designChoice"> <option>Choose--</option> <option value="yes">yes</option> <option value="no">no</option> </select> 

Answer 4

Here it is.

jQuery:

var priceTagAns = 0;   
$(document).ready(function(){   

    $('#designChoice').on('change', function(){

        if($(this).val()==='yes'){              
          /* Here i want to add + 425 to the */
           priceTagAns = (Number($("#priceTag").val()) + 425);
        }else{
          /* Here I want to add nothing to the input */ 
            priceTagAns = (Number($("#priceTag").val()));
        }
        alert(priceTagAns);
    });

});

The Alert is just to prove the value is set, do with it what you want.

Working JSFiddle: http://jsfiddle.net/89z7qpkf/2/

* UPDATED *

Also Variable version: http://jsfiddle.net/89z7qpkf/3/