{"id":377,"date":"2011-12-20T14:12:04","date_gmt":"2011-12-20T14:12:04","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:03:31","modified_gmt":"2017-11-16T23:03:31","slug":"lesson-18-events-javascript-part-4","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/","title":{"rendered":"JavaScript Lesson 18: The onsubmit Event"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\">&lt;Lesson 17&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-19-radio-button-javascript\/\">&lt;Lesson 19&gt;<\/a><\/strong><\/h4>\n<p>In this lesson, we shall learn more about the onsubmit event handler in JavaScript. The onsubmit event handler is used to handle form submitting process. The following example demonstrates how we can design JavaScript code to send email.<\/p>\n<div id=\"mycontent\">\n<div class=\"column1\">\n<h3><strong>18.1 Using the onsubmit event handler to send email<\/strong><\/h3>\n<p>We can write JavaScript code for the onsubmit event handler to send an email to the address specified by the user. Here we are using the mailto method to open the default email program such as Microsoft Outlook to send an email. However, this mailto method apparently works only with IE and Firefox but not working very well in Google\u2019s Chrome.<\/p>\n<\/div>\n<div class=\"column2\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- Javascript Responsive Ads --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"9005101105\" data-ad-format=\"rectangle\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n<\/div>\n<div class=\"codebg\">\n<h4><strong>Example 18.1: Code for Sending Email<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=windows-1252&#8243;&gt;<br \/>\n&lt;title&gt;JavaScript Example 18.1: Send Email&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script&gt;<\/p>\n<p>function sendMail(form){<br \/>\nemailAdd=mailform.emailbox.value;<br \/>\nlocation=&#8221;mailto:&#8221;+ emailAdd;}<\/p>\n<p>&lt;\/script&gt;<br \/>\n&lt;form&gt;<br \/>\nemail address:&lt;input value=&#8221;&#8221;&gt;<br \/>\n&lt;input value=&#8221;Send email&#8221;&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<\/div>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example18.1.htm\">Example 18.1<\/a> to try it out.<br \/>\nYou can modified the above program by alerting the user who leaves the email box blank to enter his or her email address into the box. The code is shown below:<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 18.2<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=windows-1252&#8243;&gt;<br \/>\n&lt;title&gt;JavaScript Example 18.1: Send Email&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script&gt;<\/p>\n<p>function sendMail(form){<br \/>\nvar emailAdd<br \/>\nemailAdd=mailform.emailbox.value;<br \/>\nif (mailform.emailbox.value==&#8221;&#8221;)<br \/>\nalert(&#8220;your have not filled up your email address&#8221;);<\/p>\n<p>else<\/p>\n<p>location=&#8221;mailto:&#8221;+ emailAdd;}<\/p>\n<p>&lt;\/script&gt;<br \/>\n&lt;form&gt;<br \/>\nemail address:&lt;input value=&#8221;&#8221;&gt;<br \/>\n&lt;input value=&#8221;Send email&#8221;&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<\/p>\n<\/div>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example18.2.htm\">Example 18.2<\/a> to view the output<\/p>\n<h3><strong>18.2: Email Validation<\/strong><\/h3>\n<p>We can improve on the previous examples by adding an email validation process. This is to check whether the user has entered a valid email address or not before it is submitted to the server. Here we use the\u00a0<strong>indexOf <\/strong>property of the string object. The indexOf property comprises two parameters,<em>searchValue<\/em> and\u00a0<em>fromIndex. <\/em>indexof(searchValue, fromIndex) means it searches the string for the first instance of the string\u00a0<em>searchValue<\/em>. If\u00a0<em>fromIndex <\/em>is included, it starts searching from that position within the string. It returns the value of the index of the first letter where the string is first found. If searcValue is not found, it returns a value of -1.<\/p>\n<p>In example 18.2, we include the line\u00a0\u00a0<em>mailform.emailbox.value.indexOf(&#8216;@&#8217;,0)==-1<\/em> to validate email address as all email addresses consist the @ character. If @ is not found, it returns a value of -1; which means the email address entered is invalid. If nothing is entered, it is also considered an invalid email address. The operator || means the logical operator OR.<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 18.2<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=windows-1252&#8243;&gt;<br \/>\n&lt;title&gt;JavaScript Example 18.1: Send Email&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script&gt;<\/p>\n<p>function sendMail(form){<br \/>\nvar emailAdd<br \/>\nemailAdd=mailform.emailbox.value;<br \/>\nif (mailform.emailbox.value==&#8221;&#8221;|| mailform.emailbox.value.indexOf(&#8216;@&#8217;,0)==-1) \/\/to search for the character @<\/p>\n<p>alert(&#8220;Please enter a valid email address&#8221;);<\/p>\n<p>else<\/p>\n<p>location=&#8221;mailto:&#8221;+ emailAdd;}<\/p>\n<p>&lt;\/script&gt;<br \/>\n&lt;form&gt;<br \/>\nemail address:&lt;input value=&#8221;&#8221;&gt;<br \/>\n&lt;input value=&#8221;Send email&#8221;&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<\/p>\n<\/div>\n<p>Please click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example18.3.htm\">Example 18.3<\/a> to test the output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- Javascript Responsive Ads --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"9005101105\" data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-17-events-javascript-part-3\/\">&lt;Lesson 17&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-19-radio-button-javascript\/\">&lt;Lesson 19&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 17&gt; [Contents] &lt;Lesson 19&gt; In this lesson, we shall learn more about the onsubmit event handler in JavaScript. The onsubmit event handler is used to handle form submitting process. The following example demonstrates how we can design JavaScript code to send email. 18.1 Using the onsubmit event handler to send email We can write &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 18: The onsubmit Event&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-377","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 18: The onsubmit Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson explains the creation of event codes in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 18: The onsubmit Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson explains the creation of event codes in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:03:31+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\",\"name\":\"JavaScript Lesson 18: The onsubmit Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T14:12:04+00:00\",\"dateModified\":\"2017-11-16T23:03:31+00:00\",\"description\":\"This javascript lesson explains the creation of event codes in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 18: The onsubmit Event\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 18: The onsubmit Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson explains the creation of event codes in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 18: The onsubmit Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson explains the creation of event codes in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:03:31+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/","name":"JavaScript Lesson 18: The onsubmit Event - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T14:12:04+00:00","dateModified":"2017-11-16T23:03:31+00:00","description":"This javascript lesson explains the creation of event codes in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-18-events-javascript-part-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 18: The onsubmit Event"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=377"}],"version-history":[{"count":18,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/377\/revisions"}],"predecessor-version":[{"id":2497,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/377\/revisions\/2497"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}