{"id":1813,"date":"2017-07-18T16:40:50","date_gmt":"2017-07-18T11:10:50","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=1813"},"modified":"2017-07-18T16:56:39","modified_gmt":"2017-07-18T11:26:39","slug":"confirm-javascript-form-submit","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/confirm-javascript-form-submit\/","title":{"rendered":"Confirm javascript form submit"},"content":{"rendered":"

Posted Date:11-07-2017<\/strong><\/p>\n

In this post we will explain confirm java-script form submit with displaying the form input values.<\/p>\n

Step 1: Include jQuery \u00a0Plugin<\/p>\n

<source src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"><\/source ><\/pre>\n
Step 2:Create html form with input values using the following code<\/p>\n
<form name=\"pendingrequest\" id=\"pendingrequest\" action=\"javascript:void(0)\" method=\"POST\" >\r\n <table >\r\n  <tr>\r\n  <input type=\"text\" name=\"rate1\">\r\n  <input type=\"text\" name=\"rate2\">\r\n  <input type=\"text\" name=\"rate3\">\r\n   <td><input class=\"submit-test\" type=\"submit\" name=\"action\" id=\"action\" onclick=\"Add()\" value=\"Reject\"><\/td>\r\n \r\n  <\/tr>\r\n <\/table> \r\n<\/form><\/pre>\n
Step 3:Write the following java-script code for display the form input values with confirm alert message<\/p>\n
  function Add()\r\n  {\r\n   var serializedData = $('#pendingrequest').serializeArray();\r\n    var data1 = JSON.stringify(serializedData);\r\n    var data = JSON.parse(data1);\r\n    \/\/ alert(data[0].name);\r\n    \/\/ alert(data[1].name);\r\n    var txt;\r\n   var r = confirm(\"Rate=\"+data[0].name+ \"Rate2=\"+data[0].name);\r\n   if (r == true) {\r\n       txt = \"You pressed OK!\";\r\n   } else {\r\n       txt = \"You pressed Cancel!\";\r\n   }\r\n    \r\n  }\r\n\r\n<\/pre>\n
If you are following above steps and you will get following codes<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n<source src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\"><\/source>\r\n\r\n  <source>\r\n   function Add()\r\n   {\r\n    var serializedData = $('#pendingrequest').serializeArray();\r\n     var data1 = JSON.stringify(serializedData);\r\n     var data = JSON.parse(data1);\r\n     var txt;\r\n    var r = confirm(\"Rate=\"+data[0].name+ \"Rate2=\"+data[0].name);\r\n    if (r == true) {\r\n        txt = \"You pressed OK!\";\r\n    } else {\r\n        txt = \"You pressed Cancel!\";\r\n    }\r\n     \r\n   }\r\n\r\n  <\/source>\r\n <\/head>\r\n <body>\r\n\r\n  <form name=\"pendingrequest\" id=\"pendingrequest\" action=\"javascript:void(0)\" method=\"POST\" >\r\n   <table >\r\n    <tr>\r\n    <input type=\"text\" name=\"rate1\">\r\n    <input type=\"text\" name=\"rate2\">\r\n    <input type=\"text\" name=\"rate3\">\r\n     <td><input class=\"submit-test\" type=\"submit\" name=\"action\" id=\"action\" onclick=\"Add()\" value=\"Save\"><\/td>\r\n   \r\n    <\/tr>\r\n   <\/table> \r\n  <\/form>\r\n\r\n <\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Posted Date:11-07-2017 In this post we will explain confirm java-script form submit with displaying the form input values. Step 1: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[350],"class_list":["post-1813","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-javascriptjquery","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-tf","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1813"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1813\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}