8: Forms, frames and JavaScript

1
8 Forms, frames and JavaScript

• Mark Elsom-Cook 1999

2
Contents

• JS and frames
• Streams
• JS and forms
• JS and forms and frames

3
JavaScript and frames
4
Whats the problem?

• We can write to a document
• ...but only when it is loading
• Cannot change a document without reloading it

5
Whats the solution?

• Use two or more docs
• One writes the others
• multiple docs means
• multiple frames

6
Streams

• The stream
• sequence of characters
• file is a finite stream
• screen or keyboard is infinite
• Open and close streams
• Open before use
• Close after use
• Read and Write to streams

7
Streams in JavaScript

• Every document is a stream
• Every document has its own methods
• writeln()
• write()
• open()
• close()
• clear()

8
How to refer to a stream?

• Just use the method in the correct document
• Which means referring to the frame correctly
• What you say depends on
• which frame/doc you are creating code in
• which frame/doc you are outputting to

9
An example

• ltframeset cols30,gt
• ltframe nameHippo srcLenin.htmgt
• ltframe namepotamus srcTrotsky.htmgt
• lt/framesetgt
• In frameset head - Hippo.document.writeln,
  potamus.document.writeln()
• In Hippo - parent.potamus.document.write()
• In potamus - parent.Hippo.document.write()

10
Simple example

• function sayHi()
• parent.main.document.open()
• parent.main.document.writeln("Hello, hello.
  What\s all this then?")
• parent.main.document.close()

11
JavaScript and forms

• Remember a form is an object
• You can access elements in a form by name
• They are also objects!
• Javascript can just inspect the form
• or be called on an event in any element
• or be called on submit

12
Referring to a form

• document.imgcalc
• document.forms0
• width.value
• document.imgcalc.height.value

13
Action on submit

• ltform nameimgcalc onsubmit"javascriptcalcsize(t
  his)"gt
• lt/formgt
• See image size calculator script

14
Action on change

• ltform nameimgcalc onsubmit"javascriptreturn(fa
  lse)"gt
• ltinput type"text" name"width
  onchangecheckcalc(this.form)gt
• ltinput type"text" name"height" size5
  onchangecheckcalc(this.form)gt
• ltinput type"text" name"depth" size5
  onchangecheckcalc(this.form)gt
• lt/formgt - See currency calculator script

15
Summary

• Write other frames repeatedly
• Understand the Object model
• Read data from forms
• Understand accessing form elements