Inserting data into database using AJAX-php using onclick - php

Question

I am trying ajax method to insert data into the database using php. But only the alert message is working and data is not getting inserted into database
My form:
<div class="contactForm">
<h3>Share your contact Details</h3>
<form id=register>
<div class="form-group">
<input type="text" id="team" class="form-control" placeholder="Enter Team Name">
</div>
<div class="form-group">
<input type="text" id="m1" class="form-control" placeholder="Member#1">
</div>
<div class="form-group">
<input type="text" id="m2" class="form-control" placeholder="Member#2">
</div>
<div class="form-group">
<input type="text" id="m3" class="form-control" placeholder="Member#3">
</div>
<div class="form-group">
<input type="text" id="m4" class="form-control" placeholder="Member#4">
</div>
<div class="form-group">
<input type="text" id="email" class="form-control" placeholder="Enter your Email ID">
</div>
<div class="form-group">
<input type="text" id="number" class="form-control" placeholder="Enter your Mobile No.">
</div>
<div class="form-groud">
<a type="submit" onclick=register() class="btn">Register</a></div>
</form>
</div>
call function:
function register() {
var team = document.getElementById("team").value;
var m1 = document.getElementById("m1").value;
var m2 = document.getElementById("m2").value;
var m3 = document.getElementById("m3").value;
var m4 = document.getElementById("m4").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'team=' + team + '&m1=' + m1 + '&m2=' + m2 + '&m3' + m3 + '&m4' + m4 + '&email' + email + '&number' + number;
if (team == '' || m1 == '' || m2 == '' || m3 == '' || m4 == '' || email == '' || number == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "workreg.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
and here is the php:
<?php
// Fetching Values From URL
$team=$_POST['team'];
$m1=$_POST['m1'];
$m2=$_POST['m2'];
$m3=$_POST['m3'];
$m4=$_POST['m4'];
$email=$_POST['m4'];
$number=$_POST['m4'];
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("event", $connection); // Selecting Database
if (isset($_POST['team'])) {
$query = mysql_query("insert into workshop values ('$team', '$m1', '$m2','$m3','$m4','$email','$number')"); //Insert Query
echo "Form Submitted succesfully";
}
mysql_close($connection); // Connection Closed
?>
whenever i am clicking register its is just showing alert message but i checked the database no value is getting inserted

Answer 1

Actually you are only checking for post variable test is present or not . You are not checking for your successful database query execution . in your current code check after $query
if(!$query){
echo "Form Submitted succesfully"
} else {
die('Invalid query: ' . mysql_error()); // show the error
}
mysql is deprecated functions so i am using mysqli , it is also better for you to use this. Never trust user's input so i am also using prepare statement. You should always looking for updated videos & articles.
$connection = mysqli_connect("localhost", "root", "","event"); // Establishing Connection with Server..
if (isset($_POST['team'])) {
$query = "insert into workshop values (?, ?, ?,?,?,?,?)"; //Never trust user's input so use prepare
$stmt = mysqli_prepare($connection ,$query) ;
mysqli_stmt_bind_param($stmt,'ssssssi',$team,$m1,$m2,$m3,$m4,$email,$number) ;
mysqli_stmt_execute($stmt);
if( mysqli_stmt_affected_rows($stmt) === 1 ) { //it will be int 1 if one row is inserted
echo "Form Submitted succesfully" ;
}else {
echo mysqli_error($connection)
}
}
mysqli_close($connection); // Connection Closed
some sources for future
How can I prevent SQL injection in PHP?
https://phpdelusions.net/pdo (it's about PDO but you will get idea.)
http://php.net/manual/en/mysqli.quickstart.prepared-statements.php

Answer 2

The Content-Type is missing from your post request. I worked only with PostgreSQL but Content-Type was kinda necessary for the post requests to work properly in my case, maybe you should check that.
Also check if you set to autocommit to your database at the connection or the data wont be added to the database.

Answer 3

$('#register').submit(event => {
event.preventDefault();
let team = $('#team').val();
let m1 = $('#m1').val();
let m2 = $('#m2').val();
let m3 = $('#m3').val();
let m4 = $('#m4').val();
let email = $('#email').val();
let number = $('#number').val();
$.ajax({
url: "workreg.php",
method: "POST",
data: { team, m1, m2, m3, m4, email, number }
.done(data => {
console.log(data)
})
.fail(err => console.error(err))
})
})