www.webdeveloper.com
Results 1 to 8 of 8

Thread: Dynamic text update and actions

Hybrid View

  1. #1
    Join Date
    Feb 2010
    Posts
    5

    Dynamic text update and actions

    Hi, i have actually 2 problems.
    1) I need to calculate a total dynamically.
    I have an input with the price of a product and next the amount. As the users inserts the amount I would like the total box to give the amount*price number. So if the price is 3 and user inserts:
    1 - then total should display 3. Then the user inserts 0 (amount is now 10) total should display 30.
    The problem is that when i ask for the value in the onkeyup event of the amount input i don't get the value with the last key (same with onkeypress event). I could add that number (if it's a number) or see if it's backspace or any char but there should be an easy answer.
    I solved it by setting a timeout and using a callback function so as to have the latest value of the amount but it's an awfull solution (though not expensive in code).


    2) Avoid focus reset when i update the value of the amount.
    I've managed to add commas on the fly to the amount like when the user types "1000" the number displayed is "1,000". In firefox it works great but in IE and Chrome it resets the focus each time i update the field. So when you try to move your cursor back it returns to the last position (maybe because the value of the input is changed).

    here's my code:

    Code:
    function updatePrice(){
    	setTimeout(function(){callback()}, 10);
    }
    
    function addCommas(nStr)
    {
    	nStr += '';
    	x = nStr.split('.');
    	x1 = x[0];
    	x2 = x.length > 1 ? '.' + x[1] : '';
    	var rgx = /(\d+)(\d{3})/;
    	while (rgx.test(x1)) {
    		x1 = x1.replace(rgx, '$1' + ',' + '$2');
    	}
    	return x1 + x2;
    }
    
    function callback()
    {
    	var price = document.getElementById('price').getValue();
    	var amount = document.getElementById('amount').getValue().replace(/\,/g,'');
    	var result = (amount*price);
    	var cash = document.getElementById('cash').getValue().replace(/\,/g,'');
    	
    	document.getElementById('amount').setValue(addCommas(amount));
    	document.getElementById('total').setValue(addCommas(result.toFixed(2)));
    	
    	if(result > cash)
    		document.getElementById('total').setStyle('color', 'red');
    	else
    		document.getElementById('total').setStyle('color', 'green');
    }
    and html/php:

    Code:
    <input id="cash" type="text" size="20" maxlength="45" name="cash" value="<?php echo number_format(abs($cash),2); ?>
    <input id="price" type="text" size="20" maxlength="45" name="price" onkeyup="updatePrice();">
    <input id="amount" type="text" size="20" maxlength="45" name="amount" onkeyup="updatePrice();"/>
    <input id="total" type="text" size="20" maxlength="45" name="total" readonly />
    any help??
    thanks!

  2. #2
    Join Date
    Nov 2009
    Posts
    61
    <input id="cash" type="text" size="20" maxlength="45" name="cash" value="<?php echo number_format(abs($cash),2); ?>">

    You forgot to close the input tag.

  3. #3
    Join Date
    Feb 2010
    Posts
    5
    I did forget, but that's not fixing it.
    Thanks anyway!

  4. #4
    Join Date
    Feb 2010
    Posts
    5
    anyone?

  5. #5
    Join Date
    Nov 2009
    Posts
    61
    I dont know javascript, but don't you have to declare variables with var as a prefix.

    Code:
    x = nStr.split('.');
    	x1 = x[0];
    	x2 = x.length > 1 ? '.' + x[1] : '';
    x, x1, x2 don't have the var thing?!

  6. #6
    Join Date
    Feb 2010
    Posts
    5
    thanks! but no, it's not necessary to declare variables with var.

  7. #7
    Join Date
    Jan 2009
    Posts
    3,346
    In addition to the missed closing tag you also have mixed html/xhtml closing for your input tags:
    <input id="price" type="text" size="20" maxlength="45" name="price" onkeyup="updatePrice();">
    <input id="amount" type="text" size="20" maxlength="45" name="amount" onkeyup="updatePrice();"/>
    Have you tried by using ".value" in place of ".getValue()" and ".setValue()"?

  8. #8
    Join Date
    Feb 2010
    Posts
    5
    In fact it's FBJS (FaceBook JavaScript), but I can translate from javascript to FBJS.
    My code works as it should but that's not doing the trick
    thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles