javascript or jQuery function for interaction between input fields value

I have a html form where people can enter number of purchase item. Default value of that text field is 1.

<input type="text" size="5" value="1" id="position" class="amntstyle" name="position"> 

I want another text input field for price where the value would be 15 times of position automatically.

For example if someone enter 3 in position field, the price input field will get value 45 automatically. Like this

<input type="text" size="5" value="45" id="price" class="amntstyle" name="price"> 

Is it possible?

Thanks a lot for your help.

Answers


simple .. use javascript functions and onkeyup

<script type="text/javascript">
    function updatePrice(amount, element){
       var amount = parseInt(amount);
       if(!amount) amount = 0;
       var toUpdate = amount*15;
       document.getElementById(element).value = toUpdate;
    }
</script>


<input type="text" size="5" value="1" id="position"  class="amntstyle" name="position"  onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">

You can use this code to attach a eventhandler that will solve your problem:

$("#position").bind("change", function(){
   $("#price").val(parseInt($("#position").val()) * 15);
}

Hope that helps


Here is the YUI3 version:

<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
    YUI().use("node", function(Y) {
        var priceNode = Y.one("#price");
        var positionNode = Y.one("#position");
        positionNode.on("change", function(e) {
             priceNode.set("value", positionNode.get("value")*15);
        });
    });
</script>


Working demo: http://jsfiddle.net/YgheP/

Made it for specific scenario but you can tweak it to your needs.

Hope it feeds your cause. :)

also look for isNaN check and float value as well! parseFloat(string)

code

$('#position').keyup(function() {
    var price = parseInt(this.value) * 15;

    $('#price').prop('value', price);
});‚Äč

if you are using jquery then by using plugin formInteract, you just need to do this.

<input type="text" size="5" value="1" id="position" class="amntstyle" name="position"> 

<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15"> 

at bottom of the page just include this plugin file, everything else will be done itself.

here is the link to project https://bitbucket.org/ranjeet1985/forminteract

You can use this plugin for many purpose like getting value of form, putting value to form, validation of form and many more. you can see some example of code in index.html file of project


Need Your Help

Remove 30MB upload limit on IIS express

.net iis iis-express

Does anyone know how to remove the 30MB upload limit, specifically for IIS Express?