Submit PHP Form Data using javascript without Page Refresh

hello friends in this video tutorial we will learn how to send php form data using javascript without refreshing of web page under this video tutorial we will demonstrate you how can we send ajax request with pure javascript code without using jhcari library so here we will implement ajax post request with javascript and save and insert form data in my sql database using php script in this tutorial we will submit html form data to php script by using javascript with the help of ajax post request now let's start discussing this topic so this is testing database and here we have one data sample table with six table column like id name email website comment and gender under this table we will store html form data using php script with help of javascript and ajax post request this is our working directory and here we have two file one is index.html and other one is processdata.php in html file we will html form and javascript code and in processdata.php file we will write php script for insert data into database first we have open index.html file and under this file we have only included bootstrap for css library link only and here we have not included curry library link because here we will use pure javascript for process form data now we have go to html code part and here first we have create one span tag with id is equal to message under this tag we will display succs's message below this we have create one form with id is equal to sample form under this form forget name details here we have create one input type is equal to text name is equal to name class is equal to form control and form data same way for get email data here we have write input type is equal to text name is equal to email and class is equal to form control and form data next forget website details here we have write input type is equal to text name is equal to website and class is equal to form control and form data after this for store comment data here we have write text area field with name is equal to comment rows is equal to 5 columns is equal to 40 and class is equal to form control and form data and lastly for store gender data here we have write select tag with name is equal to gender and class is equal to form control and form data under this select box we have create two option tag with option text like male and female so user can select gender from this to option next for submit form data here we have create one button tag with type is equal to button name is equal to submit and in button text we have write save now we have go to javascript code part and here we have create on function save data under this function we have write form element variable is equal to document dot get elements by class name function and under this we have write form data class name so this method returns a collection of all form elements in the document with the specified class name below this we have write form data variable is equal to new form data object so under this form data object we will store form data in keys and values format next we have write for loop and under condition we have write count variable is equal to zero count variable value is less than the value of form element dot length and count variable value increment by one under this loop for store data inform data object here we have write form data dot append method this method will inserts a set of node object and for store form key name here we have write form element with count index dot name so it will store form field name in key and for store field value we have write form element with count index dot value so on every loop it will store form data under this form data object when we have click on submit button then we want to disable submit button so for disable submit button in javascript here we have write document.getelementbyid method and under this we have right button id submit and then after we have write disabled property set to true so it will disable submit button now we want to send ajax request in pure javascript so for this we have write ajax request variable is equal to new xmlhttprequest object this objects are used to interact with servers and it is heavily used in ajax programming below this we have write ajax request dot open method with two argument in first argument we have write post method name and in second argument we have write process data dot php url so here open method will send post data request to processdata.php url next we have write ajax request dot send method and under this we have write form data variable so this send method will send request to server with data below this we have write ajax request variable dot on ready state change is equal to callback function so whenever any event has been triggered then ready state attribute changes and this callback function is called under this function we have write if statement and under condition we have write ajax variable dot ready state variable value is equal to 4 and ajax request variable dot status variable value is equal to 200 if this both condition true that means server request process finished and it will receive data from server and it will execute if block of code if ajax request completed then first we want to enable submit button so here we have write document.getelementbyid method and under this we have write button id with disabled property values set to false so this code will enable submit button next we want to reset form so here we have write document.getelementbyid method and under this we have write form id sample form and then after we have write reset method so it will reset all form field value after this we want to display succs's message on web page so here we have write document dot get element by id method and under this we have write span tag with id message and then after we have write in the html property is equal to ajax request dot response text so here in javascript successfully ajax request data has been received from this response text variable and this will display success message under the span tag with id message after some time we want to automatically remove success message so for this here we have write set timeout callback function with interval of 2000 millisecond so after two second this function will be called under this function we have write document.getelementbyid method and under this we have write span tag id message within the html property value set to blank so it will hide success message from web page so here our function is ready now we want to call this function when we have click on submit button so for this here in button code we have right on click attribute is equal to save data function with returned false statement so when we have click on submit button then it will called save data function which will send ajax request for send form data to server so here our html and javascript code is ready now we have go to processdata.php file and here we have write if statement and under condition we have right is set function with dollar post name variable if this variable value is set then it will execute if block of code under this block first we want to make database connection so here we have write dollar connect variable is equal to new do class with three object like mysql host set to localhost database name set to testing user name set to root and password set to blank value then after below this we have write data variable is equal to array in first key we have write double colon name and in value we have write dollar post name variable in second key we have write double colon email and in value we have write dollar post email variable in third key we have write double colon website and in value we have write dollar post website variable in fourth key we have write double colon comment and in value we have write dollar post comment variable and in last key we have write double colon gender and in value we have write dollar post gender variable so this way we have store form data under this dollar data variable below this we have write dollar query variable is equal to insert into data sample table with table column like name email website comment gender with values get from double colon name email website comment and gender so this query will insert data into data sample data after this insert query we have write dollar statement variable is equal to dollar connect variable with prepare statement and under this we have write dollar query variable so it will make query for execution now we want to execute query so here we have write dollar statement variable with execute method and under this we have write dollar data variable this method will execute above query and insert data into mysql database lastly we want to send data to ajax request so here we have write echo statement with data saved message so this data will send to ajax request which will be display on web page so here our code is ready now we have check output in browser friends here we can see that when page has been load in browser then we can see that sample form has been load with field like name email website comment gender and one submit button first we have fill form data one by one after fill all form data we have click on save button so when we have save button save button has been disabled and after successfully submit form data it has been enabled again and above we have seen success message and after some time success message has been automatically removed now here in my sql table here we can see that newly inserted data so here we have insert data into database by using pure javascript with php script and here also we have disable and enable submit button by using javascript and here also by using javascript we have display and hide success message also and by using javascript we have sent form data to server and at server side by using php script we have insert form data into my sql database so here we have submit form data without refresh of web page by using javascript in next part we will discuss how to validate form data php script and display validation error message using javascript lastly if you have any query or inputs regarding this tutorial you can ask your query in comment box if you have liked this video please share with your friends or even you can also share on social media also and lastly don't forget to subscribe our channel for future video tutorials

Channel: Webslesson

Views: 11,596

Keywords: javascript, submit form without reloading page, javascript ajax tutorial, post method, submit form, submit form using ajax javascript, submit form using javascript, submit form without refreshing page php, form without page refresh, form without page reload, php ajax form submit, form submit, without, refresh, insert form data using php, insert form data withpout page refresh, insert data without page refresh, insert data without page refresh in php, submit data without page reload

Id: wprbNpZRl80

Length: 16min 35sec (995 seconds)

Published: Tue May 18 2021