How To Connect HTML Form To MySQL Database Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML MySQL JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of how to connect HTML form to MySQL database using JavaScript, this method used for collects user information and stored into database.
When store any information to database we can do retrieve, update, delete or insert anything at anytime.
More number of records we can maintain in database.
Step By Step Guide On How To Connect HTML Form To MySQL Database Using JavaScript :-
First we have to create HTML form and what are the information we want to collect those elements are needs to declare within <form> tag. When form is submitted by user action attribute will load the php file.
Php is server side language here we used to store user data into database. For achieve database connection we need to collect server name, host name, password, database name like those informations.
All form element values are stored into separate variable by POST method.
Then insert query used for inserting user inputs into respective column of table in database.
When successfully data’s inserted alert message will display on webpage.
<!DOCTYPE html>
<html>
<head>
<title>
Connecting html form to database using php
</title>
</head>
<body>
<form method="post" action="dbcon.php">
<input type="text" name="name" placeholder="Username">
<input type="text" name="pswd" placeholder="Password">
<input type="submit" name="submit" value="SUBMIT">
</form>
</body>
</html>
PHP
<?php
$servername='localhost';
$username='root';
$password='';
$dbname='user_records';
$conn = mysqli_connect($servername,$username,$password,$dbname);
if(!$conn){
die("ERROR: Could not connect".mysql_error());
}
if(isset($_POST['submit'])){
$uname = $_POST['name'];
$password = $_POST['pswd'];
$sql = "INSERT INTO user VALUES ('$uname','$password')";
if(mysqli_query($conn, $sql)){
echo "Inserted record successfully";
}
else{
echo "ERROR: Sorry :".$sql."".mysqli_error($conn);
}
mysqli_close($conn);
}
?>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and some websites when need to use external files those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In <form> tag we used two attributes action and method, action attribute specifies where to send form data when form is submitted and method have two values GET,POST we are using POST method.
- <input> tag specifies an input field where the user can enter data. <input> tag can display in several ways depends on the attribute type.
- We are using in three ways for getting username, password as text and submit. Within <input> tag name attribute used for access in php file, placeholder attribute used for user can identify what type of input needs to enter.
- When user filled input field and click on submit form action attribute loads the dbcon.php file. Dbcon.php is a separate file contains database connection, query execution information.
- Before writing php file we need to create database with the name ‘user_records’ on mysql server then create a table with two columns namely username, password. Table name is ‘user’.
- In php file $ symbol used for declare a variable before variable name and syntax is $variable_name. $servername, $username, $password, $database are variables for storing respective values.
- Mysqli_connect() function used for create new connection and its stored into variable $conn. If(!$conn) condition checks connection is not correct means it will display error message on webpage by using die() method.
- In $_POST is a global variable in php used for collect form data. Isset() for checking whether a variable is set or not.
- if(isset($_POST['submit'])) condition is checks whether the submit value is set or not. If isset() condition is yes means user input values stored to respective variables.
- When storing user inputs into database we need to execute insert query. Insert query syntax is INSERT INTO table_name (‘value1’,’value2’,..).
- Then $uname, $password values insert to user table and query result will stored into variable $sql.
- mysqli_query() function performs a query against a database. if(mysqli_query($conn, $sql)) condition checks whether the insert query executed on database or not.
- If the query executed successfully, records are stored to database and display successful message on webpage. Otherwise it shows error on webpage.
- mysqli_close() function used for close the database connection finally.
- When executing html file before we need to run mysql server like xampp, wamp,.. then only we can get the result.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on how to connect HTML form to MySQL database using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
This topic helps you to understand the concept of html form, database and php.
Using html form, php and database we can collect and maintain more types of information like students personal information, students mark detail, office employee details, salary details and secure informations, etc..,
In conclusion now we able to connect html form to mysql database using php.
About Riya
