Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Adding numbers :/

Status
Not open for further replies.
youradds

youradds

Programmer
Jun 27, 2001
817
GB
Hi,

I'm trying to make a simple script, which updates a TotalCost field (which is readonly)

The code is as follows:

Code: 
<head>
<meta http-equiv="Content-Language" content="en-gb">


<script>
   function updateTotal() {
     if(document.purchase.Service1.checked) {
        var new_price = document.purchase.TotalAmount.value + 100;
      alert('its ticked - value' + new_price);
     }
   }
</script>
</head>

<form name="purchase" method="POST" action="--WEBBOT-SELF--">

	<p>Base cost: </p>
	<p><input type="text" name="TotalAmount" value="400" readonly="yes" size="20"></p>
	<p><input type="checkbox" name="Service1" value="Yes" oncheck="updateTotal();"> Service 1 - $100</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

Basically, the problem is - the ALERT box is showing me:

400100

(i.e 400 + 100, but not numberial - as I need :/)

Can anyone advise me where I'm going wrong? Working with numbers in JS is a little new to me (only just getting to graps with the basics =))

TIA!

Andy
 
Sort by date Sort by votes
Here:
Code: 
var new_price = document.purchase.TotalAmount.value + 100;
alert('its ticked - value' + new_price);
You are trying to add a String to a number, you'll need to convert the string to a number first. Like so:
Code: 
var new_price = Number(document.purchase.TotalAmount.value) + 100;
alert('its ticked - value' + new_price);

A computer always does what you tell it to, but rarely does what you want it to.....
 
Upvote 0 Downvote
Hi,

Thanks - was just about to post another solution I found :)

var new_price = parseInt(document.purchase.TotalAmount.value) + 100;

Whats the different with Number() and parseInt()

..is there any preference?

TIA

Andy
 
Upvote 0 Downvote
A purist would possibly say this was wrong but you need to turn the content of the input into a number by using eval()


Code: 
<script>
   function updateTotal() {
     if(document.purchase.Service1.checked) {
        var new_price = [!]eval([/!]document.purchase.TotalAmount.value[!])[/!] + 100;
      alert('its ticked - value' + new_price);
     }
   }
</script>

I'm also unsure about the oncheck attribute. If it works for you then I think it may be an IE only thing.



--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
doh, yeah number or parseint is better

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
Hi,

Thanks for the replies guys =)

Heres what I have now:

Code: 
<head>
<meta http-equiv="Content-Language" content="en-gb">


<script>
   var theBase =  500;
   var Service1 = 100;
   var Service2 = 100;
   var Service3 = 100;
   var Service4 = 100;
   var Service5 = 100;
               
   function updateTotal() {
     
     if(document.purchase.Service1.checked) {
        alert('Adding: ' + theBase  + ' and ' + Service1);
        theBase = parseInt(theBase) + parseInt(Service4);  
        var new_price = parseInt(theBase) +  parseInt(Service1);
        document.purchase.TotalAmount.value = new_price;
     }
     
     
     if(document.purchase.Service2.checked) {
        alert('Adding: ' + theBase + ' and ' + Service2);
        theBase = parseInt(theBase) + parseInt(Service4);  
        var new_price = parseInt(theBase) +  parseInt(Service2);
        document.purchase.TotalAmount.value = new_price;
     }
     
     if(document.purchase.Service3.checked) {
        alert('Adding: ' + theBase + ' and ' + Service3);
        theBase = parseInt(theBase) + parseInt(Service4);  
        var new_price = parseInt(theBase) +  parseInt(Service3);
        document.purchase.TotalAmount.value = new_price;
     }
     
     if(document.purchase.Service4.checked) {
        alert('Adding: ' + theBase + ' and ' + Service4);
        theBase = parseInt(theBase) + parseInt(Service4);  
        var new_price = parseInt(theBase) + parseInt(Service4);
         
        document.purchase.TotalAmount.value = new_price;
     }
     
     if(document.purchase.Service5.checked) {
        alert('Adding: ' + theBase + ' and ' + Service5);
        theBase = parseInt(theBase) + parseInt(Service4);  
        var new_price = parseInt(theBase) + parseInt(Service5);
        document.purchase.TotalAmount.value = new_price;
     }     
     
   }
</script>
</head>

<form name="purchase" method="POST" action="--WEBBOT-SELF--">

	<p>Base cost: </p>
	<p><input type="text" name="TotalAmount" value="400" readonly="yes" size="20"></p>
	<p><input type="checkbox" name="Service1" value="Yes" onclick="updateTotal();"> Service 1 - $100</p>
    <p><input type="checkbox" name="Service2" value="Yes" onclick="updateTotal();"> Service 2 - $100</p>
	<p><input type="checkbox" name="Service3" value="Yes" onclick="updateTotal();"> Service 3 - $100</p>
	<p><input type="checkbox" name="Service4" value="Yes" onclick="updateTotal();"> Service 4 - $100</p>
	<p><input type="checkbox" name="Service5" value="Yes" onclick="updateTotal();"> Service 5 - $100</p>		    
    
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

Now, the logic behind this - is the start price is 500 ($)

If you tick a box , the price should increase by the figures (i.e Service1 = 100, so it would go up by 100 ($))

This kinda works - but if you start ticking+unticking, it screws the whole thing up :(

Anyone got any better solutions that may work for me? I'm still a little novice at this Javascript stuff (I'm used to working with Perl, which is a hell of a lot different - as its not "stored" in the browsers memory- which I think could be the problem with my stuff above?)

TIA

Andy
 
Upvote 0 Downvote
One solution would be to add a bit into the updateTotal function that checks the value of the checkbox to see if it's true or false (i.e. ticked or unticked). Then either add or subtract from the total based on that result.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
One thing to change in your code:
Code: 
theBase = parseInt(theBase[!], 10[/!]) + parseInt(Service4[!], 10[/!]);
Since the parseInt() method needs two parameters... the string to convert into an integer, and the radix (base) to use when doing the conversion.

But it works fine without adding in the radix... so why bother?

Try this:
Code: 
alert(parseInt("08")); // this alerts "0" (which is not correct)
alert(parseInt("08", 10)); // this alerts "8" (which is correct)

You can read about this in previous posts in this forum.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Hi,

Thanks guys - after a lot of thinking - I've realised this won't even work - cos we also need to update a mySQL table, with the new figures :(

Gonna have to go the rubbish way of doing it in pure code.

Thanks for the replies anyway guys - I've at least learned something about handling numbers in JS :)

Cheers

Andy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
184
ggriffit
ggriffit
CrxC01
  • Locked
  • Question
Sum of all primes numbers
Replies
6
Views
221
CrxC01
CrxC01
lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
226
lexer
lexer
PCHomepage
  • Locked
  • Question
Adding Verification Before Submit 1
Replies
12
Views
232
vacunita
vacunita
raphael75
  • Locked
  • Question
Firefox super slow at adding event listeners
Replies
6
Views
168
raphael75
raphael75

Part and Inventory Search

Sponsor

Back
Top