{"id":129,"date":"2019-08-08T18:36:07","date_gmt":"2019-08-08T18:36:07","guid":{"rendered":"http:\/\/www.programmingfields.com\/?p=129"},"modified":"2026-05-02T06:32:00","modified_gmt":"2026-05-02T06:32:00","slug":"ajax-php-form-handling-using-jquery","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/","title":{"rendered":"Ajax PHP Form Handling Using jQuery &#8211; Submit Form Without Refresh"},"content":{"rendered":"\n<p>Welcome guys, I am here with another post in the Web development series. So, before starting with this post, I am assuming that you are aware of the core PHP. So, I am moving to some advanced level here. If you have the idea of form handling in PHP with HTML then you already know that when you submit the form with the filled records, it refreshes the form on every click of a submit button. So, In this post, I will be handling the form request with the Ajax PHP technique using jQuery. So let&#8217;s move to the post.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#What_is_Ajax\" >What is Ajax<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#How_to_Use_Ajax_PHP_with_jQuery\" >How to Use Ajax PHP with jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#Create_a_Form_Using_Bootstrap_For_Ajax_PHP\" >Create a Form Using Bootstrap For Ajax PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#How_to_Create_MySQL_Database_in_phpMyAdmin\" >How to Create MySQL Database in phpMyAdmin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#How_to_Check_the_Database_Connection\" >How to Check the Database Connection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#Ajax_PHP_Function_in_jQuery\" >Ajax PHP Function in jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/ajax-php-form-handling-using-jquery\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Ajax\"><\/span>What is Ajax<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>AJAX stands for <strong>Asynchronous JavaScript <\/strong>and <strong>XML<\/strong>. It is a set of development techniques that is used to build websites and web applications.<\/li>\n\n\n\n<li>This is a combination of <strong>JavaScript <\/strong>and <strong>XML<\/strong> ( e<strong>X<\/strong>tensible <strong>M<\/strong>arkup <strong>L<\/strong>anguage).<\/li>\n\n\n\n<li>The core feature of AJAX is to update the data from the server\/database asynchronously, which means when it loads the data the web browser doesn&#8217;t refresh. Instead of the entire page refresh, it only refreshes the specific portion of the content area in which the data is loading. <\/li>\n\n\n\n<li>So, it saves loading time and increases the speed of the websites.<\/li>\n\n\n\n<li>You can use <strong>AJAX <\/strong>with <strong>JavaScript<\/strong>, <strong>jQuery<\/strong>, <strong>XML<\/strong>, and <strong>PHP<\/strong>. Which we&#8217;ll see in our upcoming posts. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Use_Ajax_PHP_with_jQuery\"><\/span>How to Use Ajax PHP with jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First of all, we&#8217;ll be creating a form using HTML, and Bootstrap. So, we will be using CDN (Content Delivery Network) for <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.bootstrapcdn.com\/\" target=\"_blank\">Bootstrap CSS<\/a> and <strong>JavaScript<\/strong>. Also, we will be using the<strong> <\/strong><a rel=\"noreferrer noopener\" aria-label=\"jQuery CDN (opens in a new tab)\" href=\"https:\/\/code.jquery.com\/\" target=\"_blank\">jQuery CDN<\/a>.<\/li>\n\n\n\n<li>Then we&#8217;ll work with the <strong>MySQL database<\/strong> in <strong>phpMyAdmin<\/strong>. <\/li>\n\n\n\n<li>We will create a database with a table. <\/li>\n\n\n\n<li>In the next step, we will be creating a database connection with the ajax PHP application. So, let&#8217;s do step by step.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Load MySQL Data in PHP Using jQuery and Ajax (opens in a new tab)\">Load MySQL Data in PHP Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Form_Using_Bootstrap_For_Ajax_PHP\"><\/span>Create a Form Using Bootstrap For Ajax PHP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First of all, create a new folder in the htdocs directory then open that folder in your editor such as <strong>sublime <\/strong>or <strong>VS Code<\/strong>. <\/li>\n\n\n\n<li>Now, create a new file there and paste the below code.<\/li>\n\n\n\n<li>Save it with any name. (in my case it is <strong>index.php<\/strong>)<\/li>\n<\/ul>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n\n&lt;head&gt;\n    &lt;title&gt;PHP Ajax Form Handling - Programming Fields&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\"&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=\"container mt-5\"&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-xl-8 col-lg-8 col-md-10 col-sm-12 col-12 m-auto d-block shadow pt-2 pb-3\"&gt;\n                &lt;form id=\"regform\" method=\"post\" autocomplete=\"off\"&gt;\n                    &lt;div class=\"form-row\"&gt;\n                        &lt;div class=\"form-group col-md-6\"&gt;\n                            &lt;label for=\"firstname\"&gt;First Name&lt;\/label&gt;\n                            &lt;input type=\"text\" class=\"form-control\" id=\"firstname\" name=\"firstname\" placeholder=\"First Name\"&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"form-group col-md-6\"&gt;\n                            &lt;label for=\"lastname\"&gt;Last Name&lt;\/label&gt;\n                            &lt;input type=\"text\" class=\"form-control\" id=\"lastname\" name=\"lastname\" placeholder=\"Last Name\"&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    &lt;div class=\"form-row\"&gt;\n                        &lt;div class=\"form-group col-md-6\"&gt;\n                            &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n                            &lt;input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" placeholder=\"Email\"&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"form-group col-md-6\"&gt;\n                            &lt;label for=\"password\"&gt;Password&lt;\/label&gt;\n                            &lt;input type=\"password\" class=\"form-control\" id=\"password\" name=\"password\" placeholder=\"Password\"&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    &lt;div class=\"form-group\"&gt;\n                        &lt;label for=\"address\"&gt;Address&lt;\/label&gt;\n                        &lt;input type=\"text\" class=\"form-control\" id=\"address\" name=\"address\" placeholder=\"1234 Main St\"&gt;\n                    &lt;\/div&gt;\n\n                    &lt;div class=\"form-row\"&gt;\n                        &lt;div class=\"form-group col-md-6\"&gt;\n                            &lt;label for=\"city\"&gt;City&lt;\/label&gt;\n                            &lt;input type=\"text\" class=\"form-control\" id=\"city\" name=\"city\" placeholder=\"City\"&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"form-group col-md-4\"&gt;\n                            &lt;label for=\"state\"&gt;State&lt;\/label&gt;\n                            &lt;select id=\"state\" class=\"form-control\" name=\"state\"&gt;\n                                &lt;option selected&gt;Choose...&lt;\/option&gt;\n                                &lt;option&gt;Jharkhand&lt;\/option&gt;\n                                &lt;option&gt;Bihar&lt;\/option&gt;\n                                &lt;option&gt;New Delhi&lt;\/option&gt;\n                                &lt;option&gt;Haryana&lt;\/option&gt;\n                            &lt;\/select&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"form-group col-md-2\"&gt;\n                            &lt;label for=\"zipcode\"&gt;Zip&lt;\/label&gt;\n                            &lt;input type=\"text\" class=\"form-control\" id=\"zipcode\" name=\"zipcode\" placeholder=\"Zip code\"&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    &lt;button type=\"button\" id=\"submitBtn\" name=\"submit\" class=\"btn btn-primary\"&gt;Submit&lt;\/button&gt;\n\n                    &lt;div id=\"result\" class=\"mt-2\"&gt;&lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.3\/umd\/popper.min.js\" integrity=\"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\" integrity=\"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Before executing the above code, make sure you have started the Apache server in the XAMPP control panel. If you haven&#8217;t installed yet then please go through the below post.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-install-and-configure-xampp-for-windows\/\">How to Install  and Configure XAMPP in Windows and Ubuntu<\/a><\/p>\n\n\n\n<p>Now, for executing the above code, just type <code> localhost\/yourfilename.php<\/code> in the browser.<\/p>\n\n\n\n<p>It will give the following result.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/registration-form.png\" alt=\"Ajax PHP Registration Form\" class=\"wp-image-171\"\/><figcaption class=\"wp-element-caption\"><strong>Ajax PHP Registration Form<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>So, now the form is ready and we will make it functional for inserting the data into the database.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/dropdown-selection-filter-in-php-using-jquery-ajax\/\">Dependent Dropdown Filter in PHP Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Create_MySQL_Database_in_phpMyAdmin\"><\/span>How to Create MySQL Database in phpMyAdmin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start the Apache and MySQL services in the XAMPP control panel.<\/li>\n\n\n\n<li>Open your browser and type <code> http:\/\/localhost\/phpmyadmin <\/code> <\/li>\n\n\n\n<li>It will open the window of the phpMyAdmin which contains the MySQL database.<\/li>\n\n\n\n<li>Now, click on the databases. You will see the list of available databases there.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/localhost-database-1024x499.png?resize=1024%2C499\" alt=\"Databases\" class=\"wp-image-66\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/localhost-database.png?resize=1024%2C499&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/localhost-database.png?resize=300%2C146&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/localhost-database.png?resize=768%2C374&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/localhost-database.png?w=1349&amp;ssl=1 1349w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Databases<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Now, create a database with any name.<\/li>\n\n\n\n<li>Then create a new table there. This is the table structure simply paste it by clicking on the SQL tab.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE TABLE `registration` (\n  `id` int(11) NOT NULL,\n  `first_name` varchar(20) NOT NULL,\n  `last_name` varchar(20) NOT NULL,\n  `email` varchar(100) NOT NULL,\n  `password` varchar(20) NOT NULL,\n  `address` varchar(100) NOT NULL,\n  `city` varchar(20) NOT NULL,\n  `state` varchar(20) NOT NULL,\n  `zip_code` int(6) NOT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"728\" src=\"https:\/\/i2.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/create-datbase-in-phpmyadmin.png?fit=1024%2C546\" alt=\"Database SQL tab\" class=\"wp-image-154\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/create-datbase-in-phpmyadmin.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/create-datbase-in-phpmyadmin.png?resize=300%2C160&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/create-datbase-in-phpmyadmin.png?resize=768%2C409&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/create-datbase-in-phpmyadmin.png?resize=1024%2C546&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Database SQL tab<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Once you are done with the database, let&#8217;s move to your editor for connecting your application with the database.<\/li>\n\n\n\n<li>Create a new file in your project directory with the name <code>db-config.php<\/code><\/li>\n\n\n\n<li> Paste the following code and save it.<\/li>\n<\/ul>\n\n\n\n<pre title=\"db-config.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    $hostname           =       \"localhost\";\n    $username           =       \"root\";\n    $password           =       \"root\";\n    $dbname             =       \"phpAjaxDemo\";\n\n    $conn               =        mysqli_connect($hostname, $username, $password, $dbname) \n                                 or die(\"Database connection failed.\");\n?&gt;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> In this post, I am using a procedural approach for creating the database connection. In the upcoming posts, we&#8217;ll use the Object-oriented approach for database connection as well as for functioning.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Check_the_Database_Connection\"><\/span>How to Check the Database Connection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, I have used the <strong>localhost<\/strong> which refers to the local machine in which this application is going to be run.<\/li>\n\n\n\n<li>The default username of MySQL database is the <strong>root<\/strong> and there is no default password for the <strong>root user<\/strong>. You can change your root user password. In my case, I have set the username and password of MySQL is root.  (I will show you later, how to change the password of root user in phpMyAdmin).<\/li>\n\n\n\n<li>Now, run this file <strong>(db-config.php)<\/strong> in the browser to check whether the database connection established or not.<\/li>\n\n\n\n<li>If your <strong>database name<\/strong>, <strong>username<\/strong>, and <strong>password <\/strong>are correct then it wouldn&#8217;t show any error. And it means you have connected your application with the database successfully.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><a rel=\"noreferrer noopener\" aria-label=\"PHP File Uploading Using jQuery and Ajax Without Form Reload (opens in a new tab)\" href=\"https:\/\/www.programmingfields.com\/php-file-upload-using-jquery-and-ajax\/\" target=\"_blank\">PHP File Uploading Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ajax_PHP_Function_in_jQuery\"><\/span>Ajax PHP Function in jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the <strong>index.php<\/strong> file paste the below code after the CDN of the jquery at the footer. In this, I have used the jQuery click event on the submit button. It will prevent the default form submit which causes the refresh of the page after form submit.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, I have used Ajax function to send the form data to a new PHP file named <strong>register.php<\/strong><\/li>\n\n\n\n<li>It will send all the data which is inside the form with id <code>regform<\/code>.<\/li>\n\n\n\n<li>I have used the <strong>POST <\/strong>method. Because if I use the <strong>GET <\/strong>method then data will be shown in the URL of the browser.<\/li>\n<\/ul>\n\n\n\n<pre title=\"script\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n        $(document).ready(function() {            \n            $(\"#submitBtn\").click(function() {\n                        \n                    var formData = $('#regform').serialize();\n \n                    $.ajax({\n                        type: \"POST\",              \/\/ method : POST\n                        url: 'register.php',       \/\/ action : register.php\n                        data: formData,\n\n\t\t\t\t\t\tbeforeSend: function() {\n\t\t\t\t\t\t\t$(\"#result\").text(\"Please wait..\");\n\t\t\t\t\t\t},\n                        \n                        success: function (res) {\n                            $(\"#result\").html(res);                         \n                        },\n                        error: function (e) {\n                            $(\"#result\").text(\"Failed to save\");\n                        }\n                    });\n            });\n        });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"522\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/ajax-php-form.png?resize=833%2C522\" alt=\"AJAX PHP Registration Form\" class=\"wp-image-173\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/ajax-php-form.png?w=833&amp;ssl=1 833w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/ajax-php-form.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/ajax-php-form.png?resize=768%2C481&amp;ssl=1 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>When you will click on the submit button the PHP Ajax method sends the request data to the <strong>register.php<\/strong><\/li>\n\n\n\n<li>Here is the PHP script of the <strong>register.php<\/strong> file.<\/li>\n<\/ul>\n\n\n\n<pre title=\"register.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php \n    include_once \".\/db-config.php\";\n    if($_POST) {\n    extract($_POST);\n        $sql        =       \"INSERT INTO registration (first_name, last_name, email, password, address, city, state, zip_code) VALUES ('\".$firstname.\"', '\".$lastname.\"', '\".$email.\"', '\".$password.\"', '\".$address.\"', '\".$city.\"', '\".$state.\"', '\".$zipcode.\"') \";\n        $result     =       mysqli_query($conn, $sql);\n        if($result) {\n            echo \"&lt;div class='alert alert-success alert-dismissible'&gt;\n                    &lt;strong&gt;Success!&lt;\/strong&gt; Registration completed successfully.\n                    &lt;button type='button' class='close' data-dismiss='alert&gt; \u00d7 &lt;\/button&gt;\n                  &lt;\/div&gt;\";\n        }   \n        else {\n            echo \"&lt;div class='alert alert-danger alert-dismissible'&gt;\n                    &lt;strong&gt;Alert! &lt;\/strong&gt; Failed to register please try again.\n                    &lt;button type='button' class='close' data-dismiss='alert&gt; \u00d7 &lt;\/button&gt;\n            &lt;\/div&gt;\";\n        }\n    }<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, I have included <strong>db-config.php<\/strong> file.<\/li>\n\n\n\n<li>Extracted the requested data which has sent through the Ajax method from the registration form.<\/li>\n\n\n\n<li>Inserted the values into the table named <strong>registration<\/strong>.<\/li>\n\n\n\n<li>If the records have been inserted then it will return a success message.<\/li>\n\n\n\n<li>In the Ajax response, I have printed the server response to a div.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1101\" height=\"364\" src=\"https:\/\/i2.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/Database-record.png?fit=1024%2C339\" alt=\"Registration table\" class=\"wp-image-187\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/Database-record.png?w=1101&amp;ssl=1 1101w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/Database-record.png?resize=300%2C99&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/Database-record.png?resize=768%2C254&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/Database-record.png?resize=1024%2C339&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>You can see that the data has been inserted into the <strong>registration <\/strong>table and the form didn&#8217;t refresh.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/jquery-file-upload-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Drag and Drop Multiple File Uploading in PHP Using Dropzone js (opens in a new tab)\">Drag and Drop Multiple File Uploading in PHP Using Dropzone js<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We use the Ajax technique to prevent the form refresh on every click. In this post, we have submitted the form values using the Ajax PHP method using jQuery. In the next post, we&#8217;ll see how to load data using the Ajax method from the MySQL database in PHP. <\/p>\n\n\n\n<p>If you will have any doubts regarding the Ajax PHP form handling then please let me know with your queries in the comment box below. I will help you immediately.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome guys, I am here with another post in the Web development series. So, before starting with this post, I am assuming that you are aware of the core PHP. So, I am moving to some advanced level here. If you have the idea of form handling in PHP with HTML then you already know [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":191,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_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}},"categories":[12,13,4],"tags":[9,11,10],"yst_prominent_words":[21,29,14,25,22,18,17,24,20,301,16,15,23,26,348,28,27,101,310,19],"class_list":{"0":"post-129","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ajax-tutorial","8":"category-jquery","9":"category-php","10":"tag-ajax-php-form-handling","11":"tag-jquery-ajax-form-handling","12":"tag-registration-form-in-php","13":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/Ajax-PHP.png?fit=500%2C227&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":4,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":8877,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/129\/revisions\/8877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/191"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=129"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}