{"id":1672,"date":"2014-11-19T15:35:05","date_gmt":"2014-11-19T13:35:05","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1672"},"modified":"2018-06-20T17:07:56","modified_gmt":"2018-06-20T14:07:56","slug":"javascript-submit-form-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","title":{"rendered":"JavaScript Submit Form Example"},"content":{"rendered":"

Submit form is everywhere these days, and usually done with jQuery. This time we’ll teach you how to build them using JavaScript’s submit()<\/code> function, which keeps form identity, be it class, id, tag, or name.<\/p>\n

Setting it up<\/strong>
\nFirst of all we create three files: an HTML file, a JavaScript file and a CSS file with these names: index.html<\/code>, submit_javascipt.js<\/code> and submit_javascript.css<\/code>.<\/p>\n

[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n

The first will be the main document of our project, and the others will be the JavaScript file and the CSS file of it. But we’ll still have to script these two files into the index.html<\/code>, and also we have to give a title to our project. After doing that our\u00a0<head><\/code> tag will look like this:<\/p>\n

\r\n<head>\r\n    <title>Javascript Form Submit Example<\/title>\r\n    <!-- Include CSS File Here -->\r\n    <link rel="stylesheet" href="submit_javascript.css"\/>\r\n    <!-- Include JS File Here -->\r\n    <img src="data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22submit_javascript.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" \/>\r\n<\/head>\r\n<\/pre>\n
[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n
Creating and styling the outline of your form<\/h2>\n
Now in the body section you put two <div><\/code>s inside of one another, one with the class=\"container\"<\/code> attribute and the one inside it with the class=\"main\"<\/code> attribute. These are purely for styling purposes. The code will look like this:<\/p>\n
\r\n\r\n<div class="container">\r\n    \r\n<div class="main">\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<\/pre>\n
While the styling for these elements can be found in the submit_javascript.css<\/code> file, looking like this:<\/p>\n
\r\ndiv.container{\r\n    width: 900px;\r\n    height: 610px;\r\n    margin:35px auto;\r\n    font-family: 'Raleway', sans-serif;\r\n}\r\ndiv.main{\r\n    width: 300px;\r\n    padding: 10px 50px 10px;\r\n    border: 2px solid gray;\r\n    border-radius: 10px;\r\n    font-family: raleway;\r\n    float:left;\r\n    margin-top:60px;\r\n}\r\n<\/pre>\n
Labels and Inputs<\/h2>\n
Now inside of the <div class=\"main\"><\/code> we put this code:<\/p>\n
\r\n\r\n<form action="#" method="post" name="form_name" id="form_id" class="form_class" ><\/form>\r\n\r\n<\/pre>\n
And inside this tag we put the code for the labels and inputs, which should look like this:<\/p>\n
\r\n\r\n<h2>Javascript Form Submit Example<\/h2>\r\n\r\n<label>Name :<\/label>\r\n<input type="text" name="name" id="name" placeholder="Name" \/>\r\n<label>Email :<\/label>\r\n<input type="text" name="email" id="email" placeholder="Valid Email" \/>\r\n<\/pre>\n
The inputs should both have the type=\"text\"<\/code> attribute, while having names and id respectively \"name\"<\/code> and \"email\"<\/code>. Also we can put the attribute placeholder<\/code>, though it’s not obligatory.<\/p>\n
Buttons<\/h2>\n
Now it’s time to create the submit buttons, which will be four, as we want to make make the submission once by id<\/code>, once by class<\/code>, once by name<\/code> and once by tag<\/code>.Here’s the code:<\/p>\n
\r\n<input type="button" name="submit_id" id="btn_id" value="Submit by Id" onclick="submit_by_id()"\/>\r\n<input type="button" name="submit_name" id="btn_name" value="Submit by Name" onclick="submit_by_name()"\/>\r\n<input type="button" name="submit_class" id="btn_class" value="Submit by Class" onclick="submit_by_class()"\/>\r\n<input type="button" name="submit_tag" id="btn_tag" value="Submit by Tag" onclick="submit_by_tag()"\/>\r\n<\/pre>\n
You all know the attributes given to the button, except for maybe the onclick<\/code> attribute. That is the name of the JavaScript function, which tells the button what to do when clicked. With that we finish our job in the index.html<\/code> file, so we can deal with those functions right now.<\/p>\n
JavaScript functions<\/h2>\n
Every button triggers a different way of behaving for the buttons they’re attributed to, namely the submit the form by class<\/code>, id<\/code>, name<\/code>, or tag<\/code>. Also we will put out an alert which will tell us if the e-mail is valid or not. For that we’re going to have a validation function, which will look like this:<\/p>\n
\r\n\/\/ Name and Email validation Function.\r\nfunction validation() {\r\n    var name = document.getElementById("name").value;\r\n    var email = document.getElementById("email").value;\r\n    var emailReg = \/^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$\/;\r\n    if (name === '' || email === '') {\r\n        alert("Please fill all fields...!!!!!!");\r\n        return false;\r\n    } else if (!(email).match(emailReg)) {\r\n        alert("Invalid Email...!!!!!!");\r\n        return false;\r\n    } else {\r\n        return true;\r\n    }\r\n}\r\n<\/pre>\n
This function gets the name and e-mail and if those are null strings puts out “Please fill all fields……!!!!!!” or if the e-mail does not match the regular email, puts out “Invalid email…..!!!!!!”.<\/p>\n
Let’s see first the function submit_by_tag()<\/code>. The code for it will go like this:<\/p>\n
\r\nfunction submit_by_tag() {\r\n    var name = document.getElementById("name").value;\r\n    var email = document.getElementById("email").value;\r\n    if (validation()) \/\/ Calling validation function\r\n    {\r\n        var x = document.getElementsByTagName("form");\r\n        x[0].submit(); \/\/form submission\r\n        alert(" Name : " + name + " \\n Email : " + email + " \\n Form Tag : \r\n<form>\\n\\n Form Submitted Successfully......");\r\n    }\r\n}\r\n<\/pre>\n
After getting the name and email values and passing them through validation, the function gets the element by tag name and submits them using the submit()<\/code> function. After that, it puts out an alert saying the name and email entered, the form tag, and a message saying that the form was submitted successfully.<\/p>\n
Similar is what we’re going to do with the other three functions, except in them we’re going to get the elements by class, id, or name.<\/p>\n
The code below is the submit_by_class()<\/code> function:<\/p>\n
\r\nfunction submit_by_class() {\r\n    var name = document.getElementById("name").value;\r\n    var email = document.getElementById("email").value;\r\n    if (validation()) \/\/ Calling validation function\r\n    {\r\n        var x = document.getElementsByClassName("form_class");\r\n        x[0].submit(); \/\/form submission\r\n        alert(" Name : " + name + " \\n Email : " + email + " \\n Form Class : " + document.getElementById("form_id").getAttribute("class") + "\\n\\n Form Submitted Successfully......");\r\n    }\r\n}\r\n<\/pre>\n
This is the code for submit_by_name()<\/code> function:<\/p>\n
\r\nfunction submit_by_name() {\r\n    var name = document.getElementById("name").value;\r\n    var email = document.getElementById("email").value;\r\n    if (validation()) \/\/ Calling validation function\r\n    {\r\n        var x = document.getElementsByName('form_name');\r\n        x[0].submit(); \/\/form submission\r\n        alert(" Name : " + name + " \\n Email : " + email + " \\n Form Name : " + document.getElementById("form_id").getAttribute("name") + "\\n\\n Form Submitted Successfully......");\r\n    }\r\n}\r\n<\/pre>\n
And finally, this is the submit_by_id()<\/code> function:<\/p>\n
\r\nfunction submit_by_id() {\r\n    var name = document.getElementById("name").value;\r\n    var email = document.getElementById("email").value;\r\n    if (validation()) \/\/ Calling validation function\r\n    {\r\n        document.getElementById("form_id").submit(); \/\/form submission\r\n        alert(" Name : " + name + " \\n Email : " + email + " \\n Form Id : " + document.getElementById("form_id").getAttribute("id") + "\\n\\n Form Submitted Successfully......");\r\n    }\r\n}\r\n<\/pre>\n
Styling the form<\/h2>\n
And last but not least is styling the form. We have already styled the outer <div><\/code>s with the class=\"container\"<\/code> and class=\"main\"<\/code> attributes. Now we’re going to make everything else look as pretty.<\/p>\n
First we put this code in the submit_javascript.css<\/code> file to style the title of the form and the content separator:<\/p>\n
\r\nh2{\r\n    background-color: #FEFFED;\r\n    padding: 30px 35px;\r\n    margin: -10px -50px;\r\n    text-align:center;\r\n    border-radius: 10px 10px 0 0;\r\n}\r\nhr{\r\n    margin: 10px -50px;\r\n    border: 0;\r\n    border-top: 1px solid #ccc;\r\n    margin-bottom: 40px;\r\n}\r\n<\/pre>\n
Now we style the inputs and labels with this CSS bit of code:<\/p>\n
\r\ninput[type=text]{\r\n    width: 100%;\r\n    height: 40px;\r\n    padding: 5px;\r\n    margin-bottom: 25px;\r\n    margin-top: 5px;\r\n    border: 2px solid #ccc;\r\n    color: #4f4f4f;\r\n    font-size: 16px;\r\n    border-radius: 5px;\r\n}\r\nlabel{\r\n    color: #464646;\r\n    text-shadow: 0 1px 0 #fff;\r\n    font-size: 14px;\r\n    font-weight: bold;\r\n}\r\n<\/pre>\n
Now let’s get to the buttons.We will style them differently when in standby and when hovered. The following bit of code is their normal standby state:<\/p>\n
\r\n#btn_id,#btn_name,#btn_class,#btn_tag{\r\n    font-size: 16px;\r\n    background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);\r\n    border: 1px solid #e5a900;\r\n    color: #4E4D4B;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    width: 47.5%;\r\n    border-radius: 5px;\r\n    margin-bottom:10px;\r\n    padding: 7px 0;\r\n}\r\n<\/pre>\n
Meanwhile the code for the buttons when hovered is this:<\/p>\n
\r\n#btn_id:hover,#btn_name:hover,#btn_class:hover,#btn_tag:hover{\r\n    background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);\r\n}\r\n<\/pre>\n
And with this we’re set. The form will look like this:<\/p>\n
\"Submit<\/a>
Form Submit<\/figcaption><\/figure>\n
Download the source code<\/h2>\n
This was an example of form submission using JavaScript.<\/p>\n
Download<\/strong>
\nYou can download the source code for this example here: SubmitForm<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"
Submit form is everywhere these days, and usually done with jQuery. This time we’ll teach you how to build them using JavaScript’s submit() function, which keeps form identity, be it class, id, tag, or name. Setting it up First of all we create three files: an HTML file, a JavaScript file and a CSS file …<\/p>\n","protected":false},"author":25,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[236],"class_list":["post-1672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-css"],"yoast_head":"\nJavaScript Submit Form Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Submit Form? Check out our Tutorial where we'll teach you how to build them using JavaScript's submit() function!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Submit Form Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Submit Form? Check out our Tutorial where we'll teach you how to build them using JavaScript's submit() function!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-19T13:35:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-20T14:07:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"JavaScript Submit Form Example\",\"datePublished\":\"2014-11-19T13:35:05+00:00\",\"dateModified\":\"2018-06-20T14:07:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\"},\"wordCount\":1501,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\",\"name\":\"JavaScript Submit Form Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2014-11-19T13:35:05+00:00\",\"dateModified\":\"2018-06-20T14:07:56+00:00\",\"description\":\"Interested to learn more about Submit Form? Check out our Tutorial where we'll teach you how to build them using JavaScript's submit() function!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Submit Form Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Submit Form Example - Web Code Geeks - 2026","description":"Interested to learn more about Submit Form? Check out our Tutorial where we'll teach you how to build them using JavaScript's submit() function!","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:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Submit Form Example - Web Code Geeks - 2026","og_description":"Interested to learn more about Submit Form? Check out our Tutorial where we'll teach you how to build them using JavaScript's submit() function!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2014-11-19T13:35:05+00:00","article_modified_time":"2018-06-20T14:07:56+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"JavaScript Submit Form Example","datePublished":"2014-11-19T13:35:05+00:00","dateModified":"2018-06-20T14:07:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/"},"wordCount":1501,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["CSS"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","name":"JavaScript Submit Form Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2014-11-19T13:35:05+00:00","dateModified":"2018-06-20T14:07:56+00:00","description":"Interested to learn more about Submit Form? Check out our Tutorial where we'll teach you how to build them using JavaScript's submit() function!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Submit Form Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1672"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1672\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}