CODEWITHSUNDEEP
jquery
Smudger
Smudger

Reputation: 10789

jquery / javascript to adjust numeric value in two text boxes based on number in another input

I am trying to get clever with jquery slider.

In my development I have an autocomplete field where a product is selected. On selection the price is fetched from the database and populated into input listprice.

I then have an adjustedprice input and a discount input.

What I am wanting is two fold.

Option 1: when the list price is populated from the database by jquery the user can enter the adjustedprice he desires into the adjusted price input. this must then do the math against the 'listprice' input and adjust the discount input to be equal to the effect discount %.

Option 2: when the list price is populated from the database by jquery the user can enter the discount he desires into the discount input. this must then do the math against the listprice input and adjust the adjustedprice to the correct value.

This way the user can enter a discount or a desired price and it will in turn update the other input.

I have a fiddle http://jsfiddle.net/C8X4D/67/ with the basics. for now the listprice can be entered manually to simulate the database population.

Upvotes: 0

Views: 98

Answers (2)

Sangna Jani
Sangna Jani

Reputation: 72

You Are Selecting Products By Using Autocomplete.. ok good, Now U just have to do is pass the id of that product when its being selected through autocomplete .. And After that you can get price of that perticular ID by using Ajax

Here is Html Code:

$("#partyName").autocomplete("getPartyAj.php", 
{   
    width: 400,     
    matchContains: true,
    mustMatch: false,
    minChars: 0,
    highlight: false,
    selectFirst: true,
    formatItem: function(data, i, n, value) {   
      return  value.split("|")[0];
  }
}); 
$("#partyName").result(function(event, data, formatted) {
  $("#partyId").val(data[1]);
  balance();
});

function balance()
{
  var dataString = "partyId=" + $('#partyId').val();
  $.ajax({
  type: "GET",
  url: "balanceAj.php",
  data : dataString,
  success:function(data){ 
  $('#partyBalance').val(data);
  }
 });
}

Php Code:(getPartyAj.php)

<?php
include("include/config.inc.php");
$q = strtolower($_GET["q"]);
if (!$q) return;
$selectPartyQry = "SELECT partyId,partyName
                     FROM party 
                    WHERE partyName REGEXP '$q'";
$selectPartyQryRes = mysql_query($selectPartyQry);
if(mysql_num_rows($selectPartyQryRes) > 0)
{
  while($partyRow = mysql_fetch_array($selectPartyQryRes)) 
  {
    echo $partyRow['partyName'].'|'.$partyRow['partyId']."\n";
  }
}
else
{
    echo "";
}
?>

Upvotes: 1

Piet van Dongen
Piet van Dongen

Reputation: 1639

You could do something like this to calculate and show the numbers while the adjusted price or discount is being typed in:

$("#listprice").keyup(function(){
    $("#adjustedprice").val(this.value);

    $('#adjustedprice').on('keyup', function() {
        var discount = 0;

        var adjustedPrice = $(this).val();
        var listPrice = $("#listprice").val();
        var discount = Math.round((adjustedPrice / listPrice) * 100);

        $('#discount').val(discount);
    });

    $('#discount').on('keyup', function() {
        var adjustedPrice = 0;

        var discount = $(this).val();
        var listPrice = $("#listprice").val();
        var adjustedPrice = Math.round(listPrice * (discount / 100));

        console.log(adjustedPrice);

        $('#adjustedprice').val(adjustedPrice);
    });
});

Demo: http://jsfiddle.net/C8X4D/72/

Upvotes: 1

Related Questions