Submit form using ajax javascript php

Updated on July 1, 2020

by Neeraj Agarwal

AJAX (Asynchronous JavaScript and XML) is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page.

Our earlier blog post already explained about form submission without page refresh, but it was done by using  ajax, PHP and jQuery.

Now you will learn same functionality using ajax, PHP and Javascript through this blog post . Just follow our post or download it to use.

For this you must have a database in MY-SQL . Here, we have database named “mydba” which consists of table named “form_element” with 5 fields.

next we create a php page named “ajaxsubmit.php” where following steps were performed:

• We first establish connection with server .
• Selects database.
• Executes query.
• Closing connection with server.

HTML File: ajaxjs.html

Here, we create our form

Submit Form Using AJAX,PHP and javascript


Fill Your Information!

Name :

Email :

Password :

Contact No :

PHP File: ajaxjs.php

JAVASCRIPT File: script.js

javascript file consist of ajax functionality.

function myFunction() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var contact = document.getElementById("contact").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
if (name == '' || email == '' || password == '' || contact == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajaxjs.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}

MY-SQL Code Segment:

Here is the My-SQL code for creating database and table.

CREATE DATABASE mydba;
CREATE TABLE form_element(
student_id int(10) NOT NULL AUTO_INCREMENT,
student_name varchar(255) NOT NULL,
student_email varchar(255) NOT NULL,
student_contact varchar(255) NOT NULL,
student_address varchar(255) NOT NULL,
PRIMARY KEY (student_id)
);

CSS File: style.css

@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
/*//to load google fonts in our page.*/
#form{
background-color:white;
color:#123456;
box-shadow:0px 1px 1px 1px gray;
font-Weight:400;
width:350px;
margin:50px 250px 0 50px;
float:left;
height:500px;
}
#form div{
padding:10px 0 0 30px;
}
h3{
margin-top:0px;
color:white;
background-color:forestgreen;
text-align:center;
width:100%;
height:50px;
padding-top:30px;
}
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
}
#mainform h2{
width:100%; float:left;
}
input{
width:90%;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
box-shadow:0px 1px 1px 0px darkgray;
}
.innerdiv{
width:65%; float:left;
}
input[type=button]{
background-color:forestgreen;
border:1px solid white;
font-family: 'Fauna One', serif;
font-Weight:bold;
font-size:18px;
color:white;
}
#clear{clear:both;
}
/*CSS for right side advertizement*/
#formget{
float:right;
width:30%;
margin-top:30px;
}

Conclusion:

We showed you Ajax implementation with PHP and javascript, Keep following us to learn more.

You may also like to read:

• Submit Form Using Ajax
• Form Validation Using Ajax

29 Replies to “Form Submission Using Ajax, PHP and Javascript”

1. Nice tutorial, I tried but had no success, thought ajaxjs.php on $db had to be “company”, but no matter what I’ll do… not a single tutorial makes Insert on my database 🙁

   Reply

2. you are using a JQuery function ($.ajax()) in script.js….

   Reply

3. Great Tutorial

   Reply

   1. Hello Jayesh,

      Pleased with your response…!

      Keep reading our blog posts for getting more coding tricks…

      Reply

4. Thanks!! clear and precise !!

   Reply

   1. Hello Gokul,

      That sounds really great ! Keep reading our other blog posts for getting more coding tricks.

      Regards,
      FormGet Team

      Reply

5. Please forgive a stupid newbie question. My office organization cannot afford a full time developer and I’m more of a database guy but I’ve been tasked to upgrade a primitive Access database to a real web-based application so users can have a more familiar and efficient experience. So I am learning html, php, javascript. ajax, etc “on the fly” and all “by the seat of my pants”. Without sites like this I’d totally lost. So I’m very grateful for the generosity of you guys for allowing free access to these tutorials. I am on a closed network and cannot access the ajax.googleapis.com link at the top of the html file. So my question is do I have to include that link for the the ajax script to work? If it’s required can I download the file directly from the jquery website then transfer to my closed network and just have the file refer to it by using whatever directory pathway I have on my server….for example under the title tax something like …..does it matter what I name the jquery file as long as it’s consistent and has the .js extension?

   Thank you guys so much for this tutorial and for considering a poor newbie’s question.

   Reply

   1. Hello Jay,

      Thank you so much for your wonderful words.

      As per your question you can download the file and save it into the same the folder where the rest files are there and call the file using

      in ajaxjs.html page under head section.
      I am also attaching the file here for you, download it from here if you wish.

      Regards,
      FormGet Team.

      Reply

      1. Guys:

         Thanks for getting back to me so quickly. Yesterday i googled jquery 1.11.1 and went to their website to get a copy. When I clicked on the link the whole jquery code appeared as code in my browser. I was expecting it to download as a file. Not knowing what to do next I clicked File/Save in my browser’s menu bar and in the dialog box it was pre-named jquery-1.11.1.js so I just saved it using the pre-designated name.

         I am assuming I can use the script code you supplied above, except change the name of the file in the link from ajax.js to jquery-1.11.1.js so it will reference the file I downloaded from the jquery site directly?

         Again thank you guys so much for your help!

         Reply

6. Hello, I am new to javascript. I tried this ajax code and its working fine. But not in Internet Explorer. Please help me out. Thank you.

   Reply

7. very helpful….

   Reply

8. Something heppening with my submit button I can make it work.
   My div form is inside another page and i call with require

   Reply

   1. this is not the matter that you are calling function on button or div … its work on class and id so pass a id or class with div and call the ajax function

      Reply

9. form should be submitted without clicking anywhere in form page. It should be submitted only by any event call…….

   Reply

10. That’s not Javascript, that’s a mix between JavaScript and JQuery.

    JavaScript implementation is completed with the use of the ‘XMLHttpRequest’ object.

    Reply

11. Great tutorial!! Really simplified ajax for me.

    Reply

12. your database table has wrong attributes..

    Reply

13. I think that you did a great job with this example. Thank you so much!

    Reply

14. I don’t understand what I am supposed to do with the MY-SQL code segment.

    Reply

    1. Use this to create your mysql db table in your mysql database.
       You most likely have access to phpMyAdmin to work with your hosting.
       If not ask your hosting admin how to create a mysql db then use this to create the table for the form to write to.

       Reply

       1. this is owesome.
          do you have a pdf book for this programming?, i wud lov to own a copy

          Reply

15. Hello thanks for this tutorial, but pls in the Ajax side the url is not going to Ajax. Php
    What could be the problem thanks as I await from you a response.

    Reply

16. Fantastic tutorial. Very easy to understand.!!

    Reply

17. Hi there. Your tutorial really helped me out. But I have one Problem. It’s not writing the data into the database. I get a message: Undefined index: name1 for all the variables. Can u help me out?

    Reply

    1. Found the problem! 🙂

       Reply

18. Hi bro nice code i am enjoying before this i have to write all function and ajax call now i just copy and paste code i run it working fine but database field is wrong but its not a matter.

    Thanks

    keep us posted

    Reply

19. I wanted to connect my website to mysql ,i used your code but still i cannot connect to database and cannot store the data in a table that is present in the datbase…i would request you to help me with my problem

    Reply

20. i waat to learn more about php with ajax and jquery and javascript concepts

    Reply

21. I used this code, form get submitted successfully but values do not get reflected in a database.

    Reply

Leave a Reply

Can we submit form using AJAX?

How can we submit a form using AJAX without page refresh in PHP?

How do I submit a form after AJAX success?

What is AJAX used for?