{"id":10707,"date":"2022-09-24T17:22:43","date_gmt":"2022-09-24T11:52:43","guid":{"rendered":"http:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/"},"modified":"2022-09-24T17:22:43","modified_gmt":"2022-09-24T11:52:43","slug":"solved-why-is-my-page-reloading-on-form-submission-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/","title":{"rendered":"[Solved] Why is my page reloading on form submission? [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-32893586\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"32893586\" data-parentid=\"32893316\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Samuel is correct about the JavaScript error you are getting, but you still are far from getting that form submitted.   In your script below you reference variables by the names of &#8220;email&#8221; and &#8220;name&#8221;, but these variables do not exist.   <\/p>\n<pre><code>  $(document).ready(function(){\n    $('submit').click(function(){\n      $.ajax({\n        type:'POST',\n        url: email_form.php,\n        data:{\n          name: name,\n          email: email,\n        },\n        success: function(msg){\n          alert('Email Sent');\n        }               \n      });\n    });\n  });\n<\/code><\/pre>\n<p>You need to reference the form values.   To do so you should use $(&#8216;input[name=&#8221;email&#8221;]&#8217;).val() and $(&#8216;input[name=&#8221;name&#8221;]&#8217;).val() respectively so the code will look like<\/p>\n<pre><code>  $(document).ready(function(){\n    $('#submit').click(function(){\n      $.ajax({\n        type:'POST',\n        url: 'email_form.php',\n        data:{\n          name: $('input[name=\"name\"]').val(),\n          email: $('input[name=\"email\"]').val()\n        },\n        success: function(msg){\n          alert('Email Sent');\n        }               \n      });\n    });\n  });\n<\/code><\/pre>\n<p>Finally I noticed one last thing, your submit button should be of the type &#8220;button&#8221; not &#8220;submit&#8221; as the latter will cause a page refresh which will break the running JavaScript.<\/p>\n<p>Note I added the selector error Juan noted to the resulting function.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Why is my page reloading on form submission? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Samuel is correct about the JavaScript error you are getting, but you still are far from getting that form submitted. In your script below you reference variables by the names of &#8220;email&#8221; and &#8220;name&#8221;, but these variables do not exist. $(document).ready(function(){ $(&#8216;submit&#8217;).click(function(){ $.ajax({ type:&#8217;POST&#8217;, url: email_form.php, data:{ name: name, email: email, }, success: function(msg){ &#8230; <a title=\"[Solved] Why is my page reloading on form submission? [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\" aria-label=\"More on [Solved] Why is my page reloading on form submission? [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[334,333,388],"class_list":["post-10707","post","type-post","status-publish","format-standard","hentry","category-solved","tag-ajax","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Why is my page reloading on form submission? [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Why is my page reloading on form submission? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Samuel is correct about the JavaScript error you are getting, but you still are far from getting that form submitted. In your script below you reference variables by the names of &#8220;email&#8221; and &#8220;name&#8221;, but these variables do not exist. $(document).ready(function(){ $(&#039;submit&#039;).click(function(){ $.ajax({ type:&#039;POST&#039;, url: email_form.php, data:{ name: name, email: email, }, success: function(msg){ ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-24T11:52:43+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Why is my page reloading on form submission? [closed]\",\"datePublished\":\"2022-09-24T11:52:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\"},\"wordCount\":134,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"ajax\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\",\"name\":\"[Solved] Why is my page reloading on form submission? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-24T11:52:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Why is my page reloading on form submission? [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Why is my page reloading on form submission? [closed] - JassWeb","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:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Why is my page reloading on form submission? [closed] - JassWeb","og_description":"[ad_1] Samuel is correct about the JavaScript error you are getting, but you still are far from getting that form submitted. In your script below you reference variables by the names of &#8220;email&#8221; and &#8220;name&#8221;, but these variables do not exist. $(document).ready(function(){ $('submit').click(function(){ $.ajax({ type:'POST', url: email_form.php, data:{ name: name, email: email, }, success: function(msg){ ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-24T11:52:43+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Why is my page reloading on form submission? [closed]","datePublished":"2022-09-24T11:52:43+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/"},"wordCount":134,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["ajax","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/","name":"[Solved] Why is my page reloading on form submission? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-24T11:52:43+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-why-is-my-page-reloading-on-form-submission-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Why is my page reloading on form submission? [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/10707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=10707"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/10707\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=10707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=10707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=10707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}