Skin99 Skin99 - 3 days ago 5
Ajax Question

Unable to Insert Data into MySQL Database using (PHP, AJAX, JQ)

I'm trying to send some Data to a MySQL Database that I have stored on a server. When I press the submit button, my PHP scripts let me know that the connection to the DB has been successful, but the insertion of data has not. I can't find any issue in the Error logs, or an obvious problem when I examine the code via Google Chrome's developer tools.

Below is the HTML File;

<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="http://example.com/JS/functions.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

//CSS
<style>
.ui-page {
background: #4990E2;
}
p {
color: #ffffff;
}
</style>
</head>
div data-role="page" id="page1">
<div data-role="header" data-theme="a">
<h1>Welcome</h1>
</div>
<!-- Main page content goes under this line -->
<div data-role="main" class="ui-content">
<br>
<br>
<br>
<form id="myForm" method="post" action="include.php">
<label for="rating">How are you feeling?</label>
<input type="range" name="rating" id="rating" value="50" min="0" max="100" data-popup-enabled="true">
<input id="submit" type="submit" data-inline="true" value="Submit">
</form>
<br>
<br>
<span id="result"></span>
<br>
<p>Some text</p>
</div>

<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#page1" class="ui-btn-active ui-state-persist" data-transition="none">Home</a></li>
<li><a href="#page2" data-transition="none">Example</a></li>
<li><a href="#page3" data-transition="none">Example</a></li>
<li><a href="#page4" data-transition="none">Example</a></li>
</ul>
</div>
</div>
</div>
<!-- Page ends here -->
<!-- -->


Below is the PHP file (db.php);

<?php

//put your connection code here
$servername = 'localhost';
$username = 'user_admin';
$password = '12345-678';
$dbname = 'my_DB';

//create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully, <br>";
?>


Below is the PHP file(include.php);

<?php

include 'db.php';

$rating = $_POST['rating'];

$sql="INSERT INTO user Values('$rating')";
if(mysqli_query($conn,$sql)){
echo "Successfully Inserted";
} else {
echo "Did NOT insert";
}
?>


Below is the Javascript file (functions.js);

// AJAX-ify the slider
$(document).on("pagecreate","#page1",function()
{

$("#submit").click( function() {

$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
});

$("#myForm").submit( function() {
return false;
});
});


The MySQL table is called 'user' and the column is called 'rating'. The column is set as int(3) [this should match with the slider max value of 100?].

Can anyone pinpoint why the Data isn't being inserted into the DB?

Answer

change this

$sql="INSERT INTO user Values('$rating')";

to this

$sql="INSERT INTO user (`rating`) VALUES ('$rating')";

rating would be the column name for that field in the db, if the table has more than one column then the statement need to say in which column it need to be placed.

also to show errors of the statement use this

if(mysqli_query($conn,$sql) or die(msqli_error($conn))){
    ... your code here > it worked
}else{
    ... your code here > it failed
}
Comments