Jump to content

textbox with instant update value?


joecooper

Recommended Posts

Hi,

 

Im trying to add a form where the user can enter how many clicks they wish to purchase for advertising, but with discounts for over 500 clicks.

 

I need them to enter the amount, and instantly would appear the total price (0.01 per click). but 50% discount for over 500..

 

Im pretty much trying to do what this site has at the bottom of the page: http://dailybitcoins.org/ads

 

But looking at the source code i cant find how they are doing it.

 

Thanks

 

Joe

Link to comment
https://forums.phpfreaks.com/topic/246656-textbox-with-instant-update-value/
Share on other sites

Check out the keydown() function, and just take the values and update wherever you wanna show the total.

 

http://api.jquery.com/keydown/

 

Like the said, you will need to use Javascript to do it, and I would suggest JQuery, but you can use plain Javascript if you really want to.

ah thanks. I would be using jquery sometime in the future when I get used to it a bit more. but for now I just require a simple script to display the total cost as the user types. that way they can quickly check how much they can buy with their balance.

Without JQuery

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	function updatePrice( clicks ) {
		var span = document.getElementById('clicksCost');
		if( isNaN(clicks) ) {
			span.innerHTML = 'n/a';
		} else {
			if( +clicks >= 500 ) {
				var cost = +clicks * 0.005
				span.innerHTML = round( cost );
			} else { 
				var cost = +clicks * 0.01;
				span.innerHTML = round( cost )
			}
		}
	}
	function round(n) {
		return Math.round(n*100+((n*1000)%10>4?1:0))/100;
	}
</script>
</head>
<body>
<p><input type="text" id="clicks" onkeyup="updatePrice(this.value)"></p>
<span id="clicksCost">n/a</span>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.