1 / 29

Exploring JavaScript Forms and Functions with Interactive Mailto Example

Dive into the world of JavaScript forms and functions with an interactive coding example. This tutorial covers how to create a simple user form that captures first name, last name, and gender selection. Learn how to use the `mailto` function to send form data via email. We will debug our code together as we implement an interactive message prompt based on user input. Get hands-on experience by exploring the provided links for before and after code examples and gain confidence in JavaScript form handling through practical application.

harrison-glass
Télécharger la présentation

Exploring JavaScript Forms and Functions with Interactive Mailto Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Last time: Javascript (forms and functions)

  2. Last time: Javascript (forms and functions) <form action="MAILTO:username@jhu.edu" method="post" enctype="text/plain">

  3. Last time: Javascript (forms and functions) Let’s debug some code together: http://www.clsp.jhu.edu/~anni/cs103/test_before.html http://www.clsp.jhu.edu/~anni/cs103/test_after.html

  4. Last time: Javascript (forms and functions) <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:username@jhu.edu" method="post" enctype="text/plain">

  5. Last time: Javascript (forms and functions) <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:

  6. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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>

  7. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Name of function

  8. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> arguments

  9. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> string = sum of other strings

  10. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> example: “Name: Ann Irvine Gender: Female”

  11. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Pop up a window with the content of the message

  12. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> If the window is confirmed

  13. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> call the function called “mailto”

  14. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Pass it two arguments

  15. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Receive two arguments

  16. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> string = sum of other strings

  17. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> string = sum of other strings

  18. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Dynamically load a page with this address

  19. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Details: semicolons

  20. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Details: Brackets

  21. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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> Details: javascript tags

  22. Last time: Javascript (forms and functions) <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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>

  23. <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> <script type="text/javascript"> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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>

  24. <html> <head> <script type="text/javascript”> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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

  25. <html> <head> <script type="text/javascript”> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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

  26. <html> <head> <script type="text/javascript”> function mailto(msg, lname) { subj = "600.103: Test Mail from " + lname; document.location.href = "mailto:Kenneth.Church@jhu.edu" + "?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

  27. Last time: Javascript (forms and functions) Fix up some more code together (if time): http://www.clsp.jhu.edu/~anni/cs103/test2_before.html http://www.clsp.jhu.edu/~anni/cs103/test2_after.html

  28. Next Up: Programming Phone Menus https://studio.tellme.com/

  29. Homework • 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 • We’ll learn how to do this in a much easier way with Google Docs later • 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

More Related