submit form without page refresh using jQuery ajax

submit form without page refresh using jQuery ajax

we will show, however you’ll login and registration that works with page reload as submit form without page refresh using jQuery ajax.

Another good way of utlizing jQuery to boost user expertise is to not simply validate, however to submit your form entirely while not a page refresh.

during this Example we justify the way to submit form while not page refresh using jQuery ajax. ajax (Asynchronous JavaScript and XML) is that the art of exchanging information with a server, and change components of an internet page – while not reloading the complete page.

In this Example we will be able to show you the way straightforward it’s to try and do simply that – submit a registration form while not page refresh victimization jQuery, ajax! (The actual information submitting work is completed by a php script or php page that processes within the background). Let’s start.

Building an easy registration form submit while not page refresh victimization jquery mythical being.

In this example, we’ve an easy registration form with name, email, and sign. the shape submits all the fields to a php script while not page refresh victimization jquery, ajax, php and mysql.

No encryption methodology here introduced as a result of for straightforward perceive the logic behind this for beginners. In approaching week i will be able to describe this with validation and password encryption.

Creating New Database table

sql query

CREATE TABLE user_data
(
id INT PRIMARY KEY AUTO_INCREMENT,
user_name VARCHAR(255) UNIQUE,
pass_word VARCHAR(255)
);

create dbconfig.php file for database connection.

Here we create our form registration.php

	 	
	
	








submit form without page refresh using jQuery ajax

    

		
		
		Submit
		Reset
    

Now create the the script file which are collect the data and send to the php file.

// submit.js

// JavaScript Document
function submitdata() {
    var user_name  = document.getElementById("user_name").value;
    var pass_word = document.getElementById("pass_word").value;
    // Returns successful data submission message when the entered information is stored in database.
    var data_string = 'user_name=' + user_name + '&pass_word=' + pass_word;
        if (user_name == '' || pass_word == '') {
        alert("Please Fill All Fields Of Form");
        } 
        else {
                    // submit form AJAX code.
                    $.ajax({
						type: "POST",
						url: "submit.php",
						data: data_string,
						cache: false,
						success: function(html_data) {
							alert(html_data);
						}
                    });
                }
        return false;
}

php file for submit data into database

DOWNLOAD CODE ::

DOWNLOAD