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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript maths to poulate form

Status
Not open for further replies.
oshjosh

oshjosh

Technical User
Mar 11, 2002
34
0
0
TH
I need to do some calculations in a form when a form loads so I would think onload is the best way to make this happen?

I have tried the following.

<BODY onLoad="document.forms[0].Price.value=( ((500) / (100)) * 17 + 500 );">

<input type="radio" value="" checked name="Price">

But it gives an error.

The idea is that when the page loads the radio buton has a value of 500 increased by 17%

However I would like to have 5 radio buttons that are increased by 17% 34% 51% 68% 85%

Any Ideas welcomed..

Thanks in advance

Rob
 
Sort by date Sort by votes

If you know the value in advance - which clearly you do, as it is hardcoded in the onload tag you've shown - then why bother with JS at all? Why not just set the values of the inputs directly:

Code: 
<input type="radio" value="585" checked name="Price">

(585 == the result of the onload forumla you gave)

Hope this helps,
Dan
 
Upvote 0 Downvote
Hi Dan

Thanks, I used the value 500 as an example to show a figure sorry.

I should have said this will be a dynamic page and 500 will be replaced by a value from a database.

Hnce the need for some javascript to give some alternative price options.

Cheers
Rob
 
Upvote 0 Downvote
Have you tried using a function?

Code: 
<script language="JavaScript">
<!--
function getVal() {
    return (500 / 100) * 17 + 500;
}
//-->
</script>

<body onload="document.forms[0].Price.value=getVal();">

*cLFlaVA
----------------------------
Ham and Eggs walks into a bar and asks, "Can I have a beer please?"
The bartender replies, "I'm sorry, we don't serve breakfast.
 
Upvote 0 Downvote
Rob,

your code works for me in IE6, so all I can figure (short of you telling us what the error message is) is that you forgot to put in FORM tags.

'hope that helps.

--Dave
 
Upvote 0 Downvote
Dave

You got it I never thought to put the form tags around it :)

How would I use this to have 5 radio buttons that are increased by 17% 34% 51% 68% 85% can I load more than one form IE

document.forms[0].
document.forms[1].
document.forms[2]. etc?

cLFlaVA

Can I just change the value of getFal() to getVal(1) etc?

<script language="JavaScript">
<!--
function getVal() {
return (500 / 100) * 17 + 500;
}
//-->
</script>

<body onload="document.forms[0].Price.value=getVal();">

Thanks in advance

Rob
 
Upvote 0 Downvote
You probably don't want separate forms. You can only submit one form at a time and you probably want the radio buttons together as part of one group.

For economy and expandability, in a JavaScript-friendly environment, you can try something like this:

Code: 
<html>
<head>
<script>
var numOfRadios = 5;
var percentages = new Array(17,34,51,68,85);
function loadRadioVals()
{
 for(var i=0; i<numOfRadios; i++)
 {
  document.forms[0].elements["radio"+i].value = (500/100) * percentages[i] + 500; [b]//assuming this is the standard equation[/b]
 }
}
</script>
</head>
<body [b]onload='loadRadioVals()'[/b]>
<form>
<script>
for(var i=0; i<numOfRadios; i++)
 document.write("<input type='radio' name='radioGroup' id='radio"+i+"' />");
</script>
</form>
</body>
</html>

Let me know if you get what I did here.

--Dave
 
Upvote 0 Downvote
...or, better yet:

Code: 
<html>
<head>
<script>
[b]//any future changes to number of radio buttons requires only you add or remove a value from the following array[/b]
var percentages = new Array(17,34,51,68,85);
var numOfRadios = percentages.length;
function loadRadioVals()
{
 for(var i=0; i<numOfRadios; i++)
 {
  var val = (500/100) * percentages[i] + 500;
  document.forms[0].elements["radio"+i].value = val;
  window["radioLabel"+i].innerText = val;
 }
}
</script>
</head>
<body onload='loadRadioVals()'>
<form>
<script>
for(var i=0; i<numOfRadios; i++)
{
 document.write("<input type='radio' name='radioGroup' id='radio"+i+"' />");
 document.write("<label id='radioLabel"+i+"' for='radio"+i+"'></label>");
}
</script>
</form>
</body>
</html>

--Dave
 
Upvote 0 Downvote
Hi Dave

Works superb, when I see a script like this I can see how it works, I am just not advanced enough yet to actually write one on my own.

every time I post in this forum I get great help.

Cheers
Rob
 
Upvote 0 Downvote
Hi Anyone (Dave)

have one last question, the script above works like a dream however some numbers have 6 decimal places after them, how would I limit this to 2 decimal places?

I have tried with some spipets I have seen to do this but it disables the funcyions so I am sure they are not going in the right place.

Cheers
Rob
 
Upvote 0 Downvote
Try this:

[tt]Math.round(the_float_number * 100) / 100);[/tt]

*cLFlaVA
----------------------------
Ham and Eggs walks into a bar and asks, "Can I have a beer please?"
The bartender replies, "I'm sorry, we don't serve breakfast.
 
Upvote 0 Downvote
Hi cLFlava

Where would I put this in the above?

Cheers
Rob
 
Upvote 0 Downvote
I guess like this:

[code[<html>
<head>
<script>
//any future changes to number of radio buttons requires only you add or remove a value from the following array
var percentages = new Array(17,34,51,68,85);
var numOfRadios = percentages.length;
function loadRadioVals()
{
for(var i=0; i<numOfRadios; i++)
{
var val = Math.round((500/100) * percentages + 500 * 100) / 100);
document.forms[0].elements["radio"+i].value = val;
window["radioLabel"+i].innerText = val;
}
}
</script>
</head>
<body onload='loadRadioVals()'>
<form>
<script>
for(var i=0; i<numOfRadios; i++)
{
document.write("<input type='radio' name='radioGroup' id='radio"+i+"' />");
document.write("<label id='radioLabel"+i+"' for='radio"+i+"'></label>");
}
</script>
</form>
</body>
</html>[/code]

*cLFlaVA
----------------------------
Ham and Eggs walks into a bar and asks, "Can I have a beer please?"
The bartender replies, "I'm sorry, we don't serve breakfast.
 
Upvote 0 Downvote
Works like dream.. thanks one last questio I have tried adding it into this and it just disables it..

<script>document.write( (($data[15]*100) / (2.54)) / 100 );</script> Again would like no more than 2 decimal places

$data[15] is a cariable replaced by the database

Cheers
Rob
 
Upvote 0 Downvote
This looks like you're trying to use php.
Anyway, the same implementation would result:

[tt]<script>document.write(Math.round((((($data[15]*100) / 2.54) / 100) * 100) / 100));</script>[/tt]



*cLFlaVA
----------------------------
Ham and Eggs walks into a bar and asks, "Can I have a beer please?"
The bartender replies, "I'm sorry, we don't serve breakfast.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
137
lexer
lexer
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
256
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
75
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
122
JScannell
JScannell
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
160
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top