René's URL Explorer Experiment

{"@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/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2014-11-19T15:35:05+02:00","datePublished":"2014-11-19T15:35:05+02:00","dateModified":"2018-06-20T17:07:56+03:00","headline":"JavaScript Submit Form Example","name":"JavaScript Submit Form Example","keywords":"CSS","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","description":"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, o","copyrightYear":"2014","articleSection":"JavaScript","articleBody":"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.\r\n\r\nSetting it up\r\nFirst of all we create three files: an HTML file, a JavaScript file and a CSS file with these names: index.html, submit_javascipt.js and submit_javascript.css.\r\n\r\n\r\n\r\n\r\n\r\n\r\nThe 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, and also we have to give a title to our project. After doing that our\u00a0<head> tag will look like this:\r\n\r\n[xml]\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[\/xml]\r\n\r\n\r\nCreating and styling the outline of your form\r\nNow in the body section you put two <div>s inside of one another, one with the class=\"container\" attribute and the one inside it with the class=\"main\" attribute. These are purely for styling purposes. The code will look like this:\r\n\r\n[xml]\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[\/xml]\r\n\r\nWhile the styling for these elements can be found in the submit_javascript.css file, looking like this:\r\n\r\n[css]\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[\/css]\r\n\r\nLabels and Inputs\r\nNow inside of the <div class=\"main\"> we put this code:\r\n\r\n[xml]\r\n\r\n<form action="#" method="post" name="form_name" id="form_id" class="form_class" ><\/form>\r\n\r\n[\/xml]\r\n\r\nAnd inside this tag we put the code for the labels and inputs, which should look like this:\r\n\r\n[xml]\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[\/xml]\r\n\r\nThe inputs should both have the type=\"text\" attribute, while having names and id respectively \"name\" and \"email\". Also we can put the attribute placeholder, though it's not obligatory.\r\nButtons\r\nNow it's time to create the submit buttons, which will be four, as we want to make make the submission once by id, once by class, once by name and once by tag.Here's the code:\r\n\r\n[xml]\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[\/xml]\r\n\r\nYou all know the attributes given to the button, except for maybe the onclick 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 file, so we can deal with those functions right now.\r\nJavaScript functions\r\nEvery button triggers a different way of behaving for the buttons they're attributed to, namely the submit the form by class, id, name, or tag. 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:\r\n\r\n[js]\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[\/js]\r\n\r\nThis 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.....!!!!!!\".\r\n\r\nLet's see first the function submit_by_tag(). The code for it will go like this:\r\n\r\n[js]\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[\/js]\r\n\r\nAfter 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() 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.\r\n\r\nSimilar 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.\r\n\r\nThe code below is the submit_by_class() function:\r\n\r\n[js]\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[\/js]\r\n\r\nThis is the code for submit_by_name() function:\r\n\r\n[js]\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[\/js]\r\n\r\nAnd finally, this is the submit_by_id() function:\r\n\r\n[js]\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[\/js]\r\n\r\nStyling the form\r\nAnd last but not least is styling the form. We have already styled the outer <div>s with the class=\"container\" and class=\"main\" attributes. Now we're going to make everything else look as pretty.\r\n\r\nFirst we put this code in the submit_javascript.css file to style the title of the form and the content separator:\r\n\r\n[css]\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[\/css]\r\n\r\nNow we style the inputs and labels with this CSS bit of code:\r\n\r\n[css]\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[\/css]\r\n\r\nNow 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:\r\n\r\n[css]\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[\/css]\r\n\r\nMeanwhile the code for the buttons when hovered is this:\r\n\r\n[css]\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[\/css]\r\n\r\nAnd with this we're set. The form will look like this:\r\n\r\n\r\nDownload the source code\r\nThis was an example of form submission using JavaScript.\r\nDownload\r\nYou can download the source code for this example here: SubmitForm","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-submit-form-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Era Balliu","url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}