input

edd1eg · Mar 1, 2004

Hi there,

I there i am trying to create a calculation. I have got a box where the user input the number for example 3+5, i have this code for it

<HTML>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE=text onChange="update(this);">
</FORM>
</BODY>
</HTML>

and there is another box which displays the answer

<HTML>

<BODY>
<FORM NAME="outputForm">
<TEXTAREA NAME=outputArea ROWS=4 COLS=40 WRAP=SOFT></TEXTAREA>
</FORM>
</BODY>
</HTML>

But its not working, could anyone help me with this?

thanks

edd

WartookMan · Mar 1, 2004

It seemed to work ok for me. This is what I had... however, please read the end of this posting...

Frames.html

Code:

<frameset  rows="50%,*">
    <frame name="Input" src="a.html" id="Input" frameborder="1" scrolling="auto">
    <frame name="Result" src="b.html" id="Result" frameborder="1" scrolling="auto">
</frameset>

a.html

Code:

<html>
<head>
<script language="JavaScript">
function update(field) {
  var result = field.value;
  var output = "" + result + " = " + eval(result);
  parent.frames[1].document.forms[0].elements[0].value = output;
}
</script>
</head>
<body>
<form>
<input type="text" onchange="update(this);">
</form>
</body>
</html>

b.html

Code:

<html>
<body>
<form name="outputForm">
<textarea name="outputArea" rows="4" cols="40" wrap="soft"></textarea>
</form>
</body>
</html>

When I hit the return key, however, the form in the top window submitted (to itself) and nothing was written to the bottom window... thus I added a bit more code to the:
a.html

Code:

<html>
<head>
<script language="JavaScript">
function update(fieldname) {
  var result = document.forms.calc[fieldname].value;
  var output = "" + result + " = " + eval(result);
  parent.frames[1].document.forms[0].elements[0].value = output;
  return false;
}
</script>
</head>
<body>
<form name="calc" id="calc" onsubmit="return update('exp');">
<input type="text" name="exp" id="exp" onchange="update('exp');">
<input type="submit" value="Calculate">
</form>
</body>
</html>

Hope this helps.

Pete.

Web Developer & Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

edd1eg · Mar 1, 2004

Thanks for that, worked fine

thanks

edd

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!

input

edd1eg

Programmer

WartookMan

Technical User

edd1eg

Programmer

Similar threads

Part and Inventory Search

Sponsor