Last time: Javascript (forms and functions)


Let’s debug some code together:

http://www.clsp.jhu.edu/~anni/cs103/test_before.htmlhttp://www.clsp.jhu.edu/~anni/cs103/test_after.html

http://www.clsp.jhu.edu/~anni/cs103/test_before.html

http://www.clsp.jhu.edu/~anni/cs103/test_after.html


<body><form>First name:<input type="text" name="firstname" />Last name:<input type="text" name="lastname" />

<br>Gender:<select name="gender" id="g1" multiple="multiple" size="2"><option value="male">male</option>

<option value="female">female</option></select>

<input type="button" value="Submit" onclick="displaymsg(this.form)" /></form></body>

<form action="MAILTO:[email protected]" method="post" enctype="text/plain">


<body><form>First name:<input type="text" name="firstname" />Last name:<input type="text" name="lastname" />

<br>Gender:<select name="gender" id="g1" multiple="multiple" size="2"><option value="male">male</option>

<option value="female">female</option></select>

<input type="button" value="Submit" onclick="displaymsg(this.form)" /></form></body>

More control if you write the action

yourself:






Name of function






arguments






string = sum of other strings






example: “Name: Ann IrvineGender: Female”






Pop up a window with the content of the message






If the window is confirmed






call the function called “mailto”






Pass it two arguments






Receive two arguments






string = sum of other strings






Dynamically load a page with this address






Details: semicolons






Details: Brackets






Details: javascript tags





<body><form>First name:<input type="text" name="firstname" />Last name:<input type="text" name="lastname" /><br>Gender:<select name="gender" id="g1" multiple="multiple" size="2"><option value="male">male</option><option value="female">female</option></select><input type="button" value="Submit" onclick="displaymsg(this.form)" /></form></body>

<html><head><script type="text/javascript”>function mailto(msg, lname){ subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:[email protected]" + "?subject=" + subj + "&body=" + escape(msg);}function displaymsg(form){ msg = "Name: " + form.firstname.value + " " + form.lastname.value +

"\n" + "Gender: " + form.gender.value; if(window.confirm(msg)) mailto(msg, form.lastname.value);}</script></head><body><form>First name:<input type="text" name="firstname" />Last name:<input type="text" name="lastname" /><br>Gender:<select name="gender" id="g1" multiple="multiple" size="2"><option value="male">male</option><option value="female">female</option></select><input type="button" value="Submit" onclick="displaymsg(this.form)" /></form></body></html>

All of the javascript stuff




Form stuff




Use the javascript to email the form content

Form stuff


Fix up some more code together (if time):

http://www.clsp.jhu.edu/~anni/cs103/test2_before.htmlhttp://www.clsp.jhu.edu/~anni/cs103/test2_after.html

http://www.clsp.jhu.edu/~anni/cs103/test_before.html

http://www.clsp.jhu.edu/~anni/cs103/test_after.html

Next Up: Programming Phone Menus

https://studio.tellme.com/

Homework

1. Make sure you have a working javascript-based survey on your website:• You should have functions like mailto and displaymsg (don’t rely

on the html action tag that does this automatically and not so well)

• Don’t worry about radio buttons and checkboxes, they’re harder• Include just textboxes and/or select lists

2. We’ll learn how to do this in a much easier way with Google Docs later

3. Go to https://studio.tellme.com/ and sign up for a free account. Play around if you have time, but at least have an account ready to program by next Tuesday

https://studio.tellme.com/

Last time: Javascript (forms and functions)

Documents

Transcript of Last time: Javascript (forms and functions)