Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Form Lessons

Form Lessons:


A) Create a button that opens a new window:

The code...

In HEAD:

<script>
      function my_web(){
            //basic open window script
            window.open("http://bgsu.edu", "my_win", "width=800, height=600");
      }

</script>

In BODY: to create my button...

<form>

<input name="my_button" type="button" value="Go to BGSU's website" onclick="my_web();">

</form>

B) Create button to alert someone

The code...

In HEAD:

<script>

//greet(message) is passing one parameter--the greeting message
function greet(message){

//opens alert box with custom greeting
alert(message);

}

</script>

In BODY:

<form>

//single quotes around greeting message in ()
<input name="my_button" type="button" value="greetings" onclick="greet('hello');">

</form>

C) Multiple message buttons:

The code...

In HEAD:

<script>

function multiButtons(myURL, my_Win){

window.open(myURL ,my_Win, "width=800, height=600");

}

</script>

In BODY:

<form>

<input name="my_button" type="button" value="go here" onclick=" multiButtons('http://google.com', 'googleWIN');">

<input name="my_button" type="button" value="go there" onclick=" multiButtons('http://bgsu.edu', 'bgsuWIN');">

<input name="my_button" type="button" value="go anywhere" onclick="multiButtons('http://digitalarts.bgsu.edu', 'digWIN');">

</form>

D) Receiving form information:

Type your name:

Type your address:

 

In HEAD:

<script>

function popUp(){

//create new window; no HTML doc in single quotes because we want a blank slate
newWin = window.open(' ', 'myWIN', 'toolbar=no, statusbar=no, width=400, height=300');

//adds header to new window
newWin.document.write("<h3>Form Data</h3>");

//adds name info
newWin.document.write("<strong>Your name is:</strong> " + document.form1.namestring.value + "</p>");

//adds address info
newWin.document.write("<strong>Your address is:</strong> " + document.form1.address.value + "</p>");

}

</script>

In BODY:

<form name="form1" onSubmit="popUp();">

Type your name:
<input type="text" name="namestring" size="50">
<br><br>
Type your address:
<input type="text" name="address" size="80">
<br><br>
<input type="submit" value="submit form">
<input type="reset" value="clear">

</form>

[BACK to RESOURCES]