All TalkersCode Topics

Follow TalkersCode On Social Media

How To Insert Data In MySQL Database Using JavaScript

Last Updated : Mar 15, 2023

How To Insert Data In MySQL Database Using JavaScript

In this article we will show you the solution of how to insert data in MySQL database using JavaScript, we inserted data in the MySQL database using AJAX.

Now let us understand AJAX first.

AJAX - AJAX stands for Asynchronous JavaScript and XML. With the help of AJAX, we can communicate with the server without page reload.

Step By Step Guide On How To Insert Data In MySQL Database Using JavaScript :-

let us see the code first to insert data in MySQL database using JavaScript.

HTML Code:

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> how to insert data in mysql database using javascript </title>
    <script>
        function Send_Data() {
            var name = document.getElementById("name").value ;
            var contact = document.getElementById("contact").value ;
            var httpr = new XMLHttpRequest() ;
            httpr.open("POST","data.php",true) ;
            httpr.setRequestHeader("Content-type","application/x-www-form-url")
            httpr.onreadystatechange = function(){
                if(httpr.readyState == 4 && httpr.status == 200) {
                    document.getElementById("response").innerHTML = httpr.responseText ;
                }
            }
            httpr.send("name-"+name+"contact-"+contact) ;
        }
    </script>
</head>
<body>
    <h1 style=" color : rgb(113, 221, 113) ;"> TALKERSCODE </h1>
    <h2> how to insert data in mysql database using javascript </h2>
    <input type="text" id="name" placeholder="Enter Name">
    <input type="text" id="contact" placeholder="Enter contact">
    <input type="button" value="Submit" onclick="Send_Data()">
    <span id="response">
    </span>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as the instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As mentioned above, the <head> tag contains information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Adding external CSS stylesheet into the <head> tag
  6. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  7. <h1> tag used to add heading here and also adding the inline CSS here
  8. Created <input> tag for Name, Contact, and a button with the onlick function of Send_Data()
  9. Also created <span> to display message
  10. Now created a <script> tag to write JavaScript
  11. Declaring the function for Send_Data()
  12. creating a variable for name and contact with document.getElementById()
  13. also a variable for new XMLHttpRequest()
  14. using the open() method to create a connection with the server for data.php file
  15. setRequestHeader() to add some HTTP header.
  16. Using the onreadystatechange() function add the <span> id ‘response’ with document.getElementById() within it.
  17. Now use the send() method to send the request object to the server

Now let’s see the php code for data.php,

PHP Code:

<?php
if(isset($_POST['name'])) {
    $name = $_POST['name'] ;
    $contact = $_POST['contact'] ;
$con = mysqli_connect("localhost", "root","", "demo") ;
$sql = "INSERT INTO `info`(`name`,`conatct`) VALUES ('$name','$contact');";
$result=mysqli_query($con,$sql) ;
if($result==true) {
    echo "<h3> INSERTED! <?h3>" ;
}
}
?>
  1. At first opening the php file using <?php
  2. Creating if statement with isset() function with super global variable $_POST.
  3. Creating variable for $name and $contact with the $_POST method
  4. Using mysqli_connect() with the hostname, username and password
  5. INSERT INTO to insert new records and VALUES to specify the values.
  6. Now using mysqli_query()
  7. Then using echo to display the success message.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know how to insert data in MySQL database using JavaScript.

I hope this article on how to insert data in MySQL database using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials