Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4K views

Insert Data Into MySQL Database Using Jquery AJAX PHP

This document provides instructions for inserting data into a MySQL database using jQuery, AJAX, and PHP. The process involves: 1) Creating an HTML form to collect user input and submit via AJAX to PHP 2) Connecting to the MySQL database and creating a table using PHPMyAdmin 3) Writing a PHP file to insert the submitted data into the MySQL table 4) Using a JavaScript file to serialize and post the form data via AJAX, then clear the form

Uploaded by

Danielle Gordon
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4K views

Insert Data Into MySQL Database Using Jquery AJAX PHP

This document provides instructions for inserting data into a MySQL database using jQuery, AJAX, and PHP. The process involves: 1) Creating an HTML form to collect user input and submit via AJAX to PHP 2) Connecting to the MySQL database and creating a table using PHPMyAdmin 3) Writing a PHP file to insert the submitted data into the MySQL table 4) Using a JavaScript file to serialize and post the form data via AJAX, then clear the form

Uploaded by

Danielle Gordon
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Insert Data into MySQL Database using jQuery + AJAX + PHP

In this tutorial we will learn how to insert data into mysql database using PHP as server-side programming language, jQuery and Ajax. jQuery has an ajax method. In this tutorial we will be use jQuery method i.e., $.post() in form for inserting the records in to database. We will use CodeLobster as text editor or you can use any text editor i.e. Dreamweaver etc.

Prerequisites:
WAMP (Windows-Apache-MYSQL-PHP) server or XAMP server should be installed in your PC. The jQuery library inserted in the script directory.
Download jQuery from here: http://jquery.com/

CodeLobster, Dreamweaver or any text editor program should be installed in your machine.

1) Open a text editor for example CodeLobster. Create a new file from File > New > HTML or press short key (Ctrl+N) and save this file as index.html. Go to File menu > Save As or press short key (Ctrl+Alt+S).

2) Add some basic HTML tags and make a form in index.html page that the user will be viewing it.

<html> <head><title>Insert Data Into MySQL: jQuery + AJAX + PHP</title></head> <body> <form id="myForm" action="userInfo.php" method="post"> Name: <input type="text" name="name" /><br /> Age : <input type="text" name="age" /><br /> <button id="sub">Save</button> </form> <span id="result"></span> <script src="script/jquery-1.8.1.min.js" type="text/javascript"></script> <script src="script/my_script.js" type="text/javascript"></script> </body> </html>

In this page we will make a form with an id myForm, which has two input fields i)name, ii)age, a save button iii) id sub, and iii) span tag id result The text fields we use for insert data and submit button will use to submit this form and span tag <span> tag with an id result using to display information for success fully and unsuccessful form submission.

3) Run your Wamp server from Start menu and open phpMyAdmin in browser window. URL:http://localhost:8081/phpmyadmin/

4) Create a new database called test using phpMyAdmin. Create a new table name user and gives the number of columns value 2.

5) Select user table and create two fields respectively i) name and ii) age. Select type VARCHAR for name and INT for age fields. Insert length 15 for name and 3 for age.

6) Create a new file from File > New > PHP or press short key (Ctrl+N) and save this file as db.php. Go to File menu > Save As or press short key (Ctrl+Alt+S).

<?php $conn = mysql_connect('localhost', 'root', ''); $db = mysql_select_db('test'); ?>

Now we will make connection with data base test, with using the server name localhost, user name root (and we leave password field empty, as we have not set password). 7) Create a new file from File > New > PHP or press short key (Ctrl+N) and save this file as userInfo.php. Go to File menu > Save As or press short key (Ctrl+Alt+S).

<?php include_once('db.php'); $name = $_POST['name']; $age = $_POST['age']; if(mysql_query("INSERT INTO user VALUES('$name', '$age')")) echo "Successfully Inserted"; else echo "Insertion Failed"; ?>

This file includes all the server-sided code for inserting user data into mysql database test Once a user hits the save button on index.html page, the information will send to userInfo.php. 8) Create a new file from File > New > JS or press short key (Ctrl+N) and save this file as my_script.js.

$("#sub").click( function() { $.post( $("#myForm").attr("action"), $("#myForm :input").serializeArray(), function(info){ $("#result").html(info); }); });

Place this code in my_script.js file. Once the user clicks save button from myForm form on index.html page. The $.post() method will invoke.

9) In this step we will add scripts to disable form redirection and clear input fields upon form submission.

$("#myForm").submit( function() { return false; }); function clearInput() { $("#myForm :input").each( function() { $(this).val(''); }); }

Add this code in my_script.js file. The first block selects the form #myForm and make sure to return false upon submission and the other second block function clearInput() runs once the user click on submit button. It selects the input fields and set each of its value to clear or empty upon form submission.

10) Full jQuery code my_script.js file.


$("#sub").click( function() { $.post( $("#myForm").attr("action"), $("#myForm :input").serializeArray(), function(info){ $("#result").html(info); }); clearInput(); }); $("#myForm").submit( function() { return false; }); function clearInput() { $("#myForm :input").each( function() { $(this).val(''); }); }

You might also like