All TalkersCode Topics

Follow TalkersCode On Social Media

Form Submission Using Ajax PHP And JavaScript

Last Updated : Jan 1, 2023

Form Submission Using Ajax PHP And JavaScript

In this article we will show you the solution of form submission using ajax PHP and JavaScript, here first we need to create form then we have to check whether all input noll null then using ajax POST we passing all user data to external php file there we executes database connection to interact with database then inserts user filled details on table using insert query.

Step By Step Guide On Form Submission Using Ajax PHP And JavaScript :-

Here we imported external file open source ajax, jquery library support file then we defined three input fields ‘Name, Email, Password’ in form.

When user clicks submit button onclick event will triggers myFunction() function there we collecting all user inputs and stored as string on variable ‘dataString’ then submitted on ajx.php file using ajax POST.

In ajx.php file we executed database connection and then inserted all data to database table.

<!DOCTYPE html>
<html>
<head>
<title>Form Submission</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="mainform">
<div class="innerdiv">
<h2>Form Submission</h2>
<form id="form" name="form">
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<input id="submit" onclick="myFunction()" type="button" value="Submit">
</div>
</form>
<div id="clear"></div>
</div>
<div id="clear"></div>
</div>
<script>
    function myFunction() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password ;
if (name == '' || email == '' || password == '') {
alert("Please Fill All Fields");
} else {
$.ajax({
type: "POST",
url: "ajx.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
</script>
</body>
</html>
AJX.PHP
<?php
$name2 = $_POST['name1'];
$email2 = $_POST['email1'];
$password2 = $_POST['password1'];
$connection = mysqli_connect("localhost", "root", "", "dbase");
if (isset($_POST['name1'])) {
$query = mysqli_query($connection,"insert into loginrec(UserName, Password, Email) values ('$name2', '$password2', '$email2')");
}
mysqli_close($connection);
?>
  1. A php script can be placed anywhere in the document. A php script starts with <?php and end with ?>.
  2. The default file extension for php files is “.php” and php statements end with ‘;’ semicolon.
  3. Here we needs to import external files open source ajax, jquery library support files that helps us for executes database connection using ajax POST.
  4. First we created html form with three fields ‘Name, Email, Password’ with submit button it have onclick event there we declared myFunction() method. It will loads myFunction() function definition when user clicks on it.
  5. Each input fields collected by getElementById() method with id’s ‘name,email,password’ and stored on respective variables ‘name,email,password’ then at variable ‘dataString’ we concatenates all inputs together.
  6. Using if condition we checking whether all input fields whether null or not if they not null then using ajax POST method we passing all data to ajx.php file.
  7. In ajx.php file we defined values ‘localhost,root,’’,’dbase’ for make connection with server database. Using mysqli_connect() method we executed database connection with those values and connection referred by variable ‘$connection’.
  8. Then collected all input details stored on respective variables ‘$name2, $email2, $password2’ and using if condition we checking whether name input set or not. If they sets then insert query with table name ‘loginrec’ for insert user details on table and it is stored on variable ‘$query’.
  9. We know mysqli_query() method will executes query what we defined at database so we used this method for executes this insert query at database when we passing variable ‘$connection’ with insert query in mysqli_query() method.

Conclusion :-

In conclusion now we are able to know how to do form submission using ajax, jquery in php.

When work with php we need to create and process php files at server location and then we need to start the server before execute the program.

When we executing this program on browser we can see form with three input fields there user have to fill all fields then clicks on submit button then data’s successfully inserted on database or it throws respective error message.

I hope this tutorial on form submission using ajax PHP and JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials