Making a form to work with a script

#1
hieijaganshi11

Posted 25 November 2010 - 01:47 PM

Newbie

Members
3 posts

Hi, I've been trying to write some html code to work with a script that I have. The end result that I want is to have: 3 text boxes one under the other, with the first text box having a number put into it. The result in the second box and third box.

See I want to make a calculator that calculates first 80% of the intial value A, and takes that result (B), and takes 10% of B to make C my end result. This is the script that I have:

<script type = "text/javascript">

function calcPercent()

{

//Comments in code have these double slashes.

//They're just comments for programmers, they don't

//change anything in the program.


//When the user clicks the button this function, calcPercent, is called.


//Get input value

var startVal = document.myForm.a.value;


//Calculate the percentages

var first = startVal * .8;

var second = first * .1;


//Round the number. Otherwise

//you can get a lot of decimals.

var roundFirst = Math.round(first * 100)/100

var roundSecond = Math.round(second * 100)/100


//Write results to the textboxes

document.myForm.b.value = roundFirst;

document.myForm.c.value = roundSecond;

}

</script>

How would I make the html form fit with that?

Edited by Roger, 25 November 2010 - 02:16 PM.
added code tag

#2
Alexander

Posted 25 November 2010 - 10:14 PM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

It should be fairly simple actually, myForm and a are names of elements (name="MyForm", name="a") and value accesses the form's text or numbers:

<form name="myForm">
    <input type="text" name="a"/><br/>
    <input type="text" name="b"/><br/>
    <input type="text" name="c"/><br/>
    <input type="button" onClick="calcPercent()" value="Calculate"/>
</form>

So the working script can be this:

<html>
<title></title>
<head>
<script type = "text/javascript">
function calcPercent()
{
//Comments in code have these double slashes.
//They're just comments for programmers, they don't
//change anything in the program.

//When the user clicks the button this function, calcPercent, is called.

//Get input value
var startVal = document.myForm.a.value;

//Calculate the percentages
var first = startVal * .8;
var second = first * .1;

//Round the number. Otherwise
//you can get a lot of decimals.
var roundFirst = Math.round(first * 100)/100
var roundSecond = Math.round(second * 100)/100

//Write results to the textboxes
document.myForm.b.value = roundFirst;
document.myForm.c.value = roundSecond;
}
</script>
</head>
<body>
<form name="myForm">
    <input type="text" name="a"/><br/>
    <input type="text" name="b"/><br/>
    <input type="text" name="c"/><br/>
    <input type="button" onClick="calcPercent()" value="Calculate"/>
</form>

</body>
</html>

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#3
hieijaganshi11

Posted 26 November 2010 - 09:34 AM

Newbie

Members
3 posts

Thank you for your help. For some reason, however, the script won't work, when I input a variable into the first textbox, and press the Calculate button nothing happens. Also, is there a way to make the boxes so only the first one is written in? I don't want people to be able to change the results from the first box.

#4
Alexander

Posted 27 November 2010 - 01:07 AM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

You will need to add disabled="1" to each textbox you do not wish to be edited.

<form name="myForm">
    <input type="text" name="a"/><br/>
    <input type="text" name="b" disabled="1"/><br/>
    <input type="text" name="c" disabled="1"/><br/>
    <input type="button" onClick="calcPercent()" value="Calculate"/>
</form>

I had just tested my script in 4 different browsers, it works. It may be a bit stupid on internet explorer, we can try editing our script to use getElementById('a') instead of document.myform.a.. Try this one:

<html>
<title></title>
<head>
<script type = "text/javascript">
function calcPercent()
{
//Comments in code have these double slashes.
//They're just comments for programmers, they don't
//change anything in the program.

//When the user clicks the button this function, calcPercent, is called.

//Get input value
var startVal = document.getElementById('a').value;

//Calculate the percentages
var first = startVal * .8;
var second = first * .1;

//Round the number. Otherwise
//you can get a lot of decimals.
var roundFirst = Math.round(first * 100)/100
var roundSecond = Math.round(second * 100)/100

//Write results to the textboxes
document.getElementById('b').value = roundFirst;
document.getElementById('c').value = roundSecond;
}
</script>
</head>
<body>
<form name="myForm">
    <input type="text" id="a"/><br/>
    <input type="text" id="b" disabled="1"/><br/>
    <input type="text" id="c" disabled="1"/><br/>
    <input type="button" onClick="calcPercent()" value="Calculate"/>
</form>

</body>
</html>

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#5
hieijaganshi11

Posted 27 November 2010 - 12:41 PM

Newbie

Members
3 posts

It worked perfectly thank you! For some reason it was odd in my browser. I copied the html twice into it and the button from the first html worked for the text boxes from the second. I just wondered if it was because the calculate part had to go at the top...but no matter. I just erased the text boxes html from the first and the Calculate html from the second and it works fine. So thank you for your help.