{"id":629,"date":"2015-12-26T19:02:51","date_gmt":"2015-12-26T19:02:51","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=629"},"modified":"2023-10-15T09:20:30","modified_gmt":"2023-10-15T09:20:30","slug":"bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/","title":{"rendered":"Bootstrap \/ HTML form with jQuery post method to submit data without refresh"},"content":{"rendered":"

In this tutorial, I will show you using a Bootstrap or HTML form to submit data via jQuery $post method.<\/strong><\/p>\n

The post method is used to load data by using the HTTP request. Along with specifying the source you may send data along with it.<\/p>\n

Similarly, you may send data taken from a user in an HTML or Bootstrap form by using post method and save it to database or use it to retrieve certain information without reloading the web page.<\/p>\n

See the following demo online, enter some data and press Create account button. I will explain how it is done by using $.post method after that:<\/p>\n

\"jQuery<\/p>\n

Online demo and code<\/strong><\/a><\/h6>\n

First of all, I created a Bootstrap form by using the Bootstrap framework CSS and its built-in classes. The CSS library is included in the head section of the code:<\/p>\n

<link rel=”stylesheet” href=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css” integrity=”sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==” crossorigin=”anonymous”><\/p><\/blockquote>\n

Not to mention, you also need to include the\u00a0jQuery library in the head section.<\/p>\n

<script src=”http:\/\/code.jquery.com\/jquery-1.10.1.min.js”><\/script><\/p><\/blockquote>\n

Before going into the <script> section, let me describe briefly the presentation of the form.<\/p>\n

The form is created by using the Bootstrap built-in classes, for example, it\u2019s a horizontal form:<\/p>\n

<form class=”form-horizontal” role=”form”><\/p><\/blockquote>\n

Different controls are using different field sizes by specifying its class in div that contains it, e.g.<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"form-group\">\r\n\r\n<label for=\"name1\" class=\"col-sm-2 control-label\">Name:<\/label>\r\n\r\n<div class=\"col-sm-4\">\r\n\r\n<input type=\"text\" class=\"form-control formcls\" id=\"name1\" placeholder=\"Enter Your Full Name\">\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
Finally, a button is used outside of the form closing tag. The reason is, I have called the $.post method<\/em> at the click event of this button.<\/p>\n
I also used a custom CSS class to style the form fields, which is also placed in the head section.<\/p>\n
The code of jQuery is placed at the <head> section:<\/p>\n
<script>\r\n\r\n$(document).ready(function(){\r\n\r\n$(\"#postdata\").click(function(){\r\n\r\n\r\n\r\npostname=$(\"#postname\").val();\r\n\r\npostgender=$(\"#postgender\").val();\r\n\r\npostemail=$(\"#postemail\").val();\r\n\r\npostpass=$(\"#postpassword\").val();\r\n\r\npostaddress=$(\"#postaddress\").val();\r\n\r\n\r\n\r\n\r\n\r\n$.post(\"post-forms.php\", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){\r\n\r\n$(\"#postdiv\").html(postresult);\r\n\r\n});\r\n\r\n\r\n\r\n});\r\n\r\n});\r\n\r\n<\/script><\/pre>\n
 <\/p>\n
First of all, the data is assigned to the variables in the jQuery code. After that, the $post method is used to specify the file where this data is sent. Multiple data fields are enclosed in curly brackets and separated by commas.<\/p>\n
$.post(\"post-forms.php\", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){<\/pre>\n
 <\/p>\n
Before going to the next line in script, let me move to post-forms.php<\/em> script file where action is happening as above line is executed:<\/p>\n
First, the data sent by using $.post method<\/strong> is captured in PHP variables by using the\u00a0$_POST array, that contains the data.<\/p>\n
<?php\r\n\r\n$post_name=$_POST[\"name\"];\r\n\r\n$post_gender=$_POST[\"gender\"];\r\n\r\n$post_email=$_POST[\"email\"];\r\n\r\n$post_password=$_POST[\"password\"];\r\n\r\n$post_address=$_POST[\"address\"];<\/pre>\n
 <\/p>\n
You can write the PHP script to save this information into a database like MySQL and return the success message. For the demo, I am simply printing the information by using PHP echo statement<\/a>.<\/p>\n
if( $post_name )\r\n\r\n\r\n\r\n{\r\n\r\n\r\n\r\necho \"Name entered is: \". $post_name .\"<br>\";\r\n\r\necho \"Gender:\" .$post_gender .\"<br>\";\r\n\r\necho \"Email:\" .$post_email .\"<br>\";\r\n\r\necho \"Password:\" .$post_password .\"<br>\";\r\n\r\necho \"Address:\" .$post_address .\"<br>\";\r\n\r\n\r\n\r\n\r\n\r\n}\r\n\r\n?><\/pre>\n
 <\/p>\n
The echo statement will not display any line by itself. This is basically returned data which is captured by the\u00a0postresult<\/em> in the success part of $.post function. Again see these lines in <script> section:<\/p>\n
$.post(\"post-forms.php\", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){\r\n\r\n$(\"#postdiv\").html(postresult);\r\n\r\n});<\/pre>\n
 <\/p>\n
Finally, the postresult<\/em> parameter is used in the $.html jQuery<\/em> function to display the returned data into the specified div.<\/p>\n
Note:<\/strong> If you do not include Bootstrap library, the form will still work with $.post method. It will act as an ordinary HTML form. Just remove the redundant code in the form fields if you do not intend to use Bootstrap.<\/p>\n
Related links: Bootstrap Forms<\/a> | PHP echo statement<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will show you using a Bootstrap or HTML form to submit data via jQuery $post method. The post method is used to load data by using the HTTP request. Along with specifying the source you may send data along with it. Similarly, you may send data taken from a user in … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":630,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[30],"yoast_head":"\nBootstrap \/ HTML form with jQuery post method to submit data without refresh<\/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:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap \/ HTML form with jQuery post method to submit data without refresh\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will show you using a Bootstrap or HTML form to submit data via jQuery $post method. The post method is used to load data by using the HTTP request. Along with specifying the source you may send data along with it. Similarly, you may send data taken from a user in ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-26T19:02:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-15T09:20:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/12\/21.3_1-jQuery-post-form.png\" \/>\n\t<meta property=\"og:image:width\" content=\"735\" \/>\n\t<meta property=\"og:image:height\" content=\"419\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/\",\"name\":\"Bootstrap \/ HTML form with jQuery post method to submit data without refresh\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2015-12-26T19:02:51+00:00\",\"dateModified\":\"2023-10-15T09:20:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap \/ HTML form with jQuery post method to submit data without refresh\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap \/ HTML form with jQuery post method to submit data without refresh","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.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap \/ HTML form with jQuery post method to submit data without refresh","og_description":"In this tutorial, I will show you using a Bootstrap or HTML form to submit data via jQuery $post method. The post method is used to load data by using the HTTP request. Along with specifying the source you may send data along with it. Similarly, you may send data taken from a user in ... Read more","og_url":"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/","article_published_time":"2015-12-26T19:02:51+00:00","article_modified_time":"2023-10-15T09:20:30+00:00","og_image":[{"width":735,"height":419,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/12\/21.3_1-jQuery-post-form.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/","url":"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/","name":"Bootstrap \/ HTML form with jQuery post method to submit data without refresh","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2015-12-26T19:02:51+00:00","dateModified":"2023-10-15T09:20:30+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-html-form-with-jquery-post-method-to-submit-data-without-refresh\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap \/ HTML form with jQuery post method to submit data without refresh"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/629"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":2,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":10723,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/629\/revisions\/10723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/630"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}