Inserting data into mysql using jquery yes or no vote - php

Question

How can i update the database by adding users choices? I have two fields in the database for this purpose, when the user click on yes, it updates the (useful) field and (not_useful) if clicked on no button. I am very new on javascript, so please be patient! :) I appreciate any help in advance.
PHP
<?php
require 'db/conn.php':
$id = (int)$_GET['id'];
if($result = $db->query("SELECT * FROM table_user WHERE table_user_id = $id")){
if($result->num_rows){
while($row = $result->fetch_assoc()) {
echo "
<div class='rating'>
<center>
<p>Are you alrite " . $row['table_user_name'] . "?</p>
<div>
<button type='button' id='yes'>Yes</button>
<button type='button' id='no'>No</button>
</div>
</center>
</div>
<div class='1' style='display:none;'>Text YES</div>
<div class='2' style='display:none;'>Text NO</div>
";
}
}
}
?>
JS
$(document).ready(function(){
$("#yes").click(function(){
$(".rating").hide();
$(".1").show();
});
$("#no").click(function(){
$(".rating").hide();
$(".2").show();
});
});

Answer 1

You can't connect your mySQL database directly with JavaScript from client browser. Event if it would be possible you really don't want to do that because you would have to include mysql login credentials into your JavaScript which is served to client computers.
Of course you could use database like LocalStorage from within JavaScript but these databases are on client computer. If I got it right thats not what you are looking.
You have to send the data to a script on your server which then insert them into your mySQL database. As you stated you don't like the browser to reload to just submitting a form is not an option. In these cases AJAX is used. You will find several tutorials how to send data with JavaScript / JQuery using AJAX to your server.
On server side you could handle for example with a php script. The code you have posted to your question is not PHP but simple HTML. Fred -ii- posted some sample SQL statements to increment a column. I would recommend you to use PHP PDO with mysql driver as this helps you to prevent security issues.

Answer 2

After some working hard, i found a solution. Sharing for those who is facing similar problem. This was my solution. Anyways, have fun! ;)
I think there's a better way to organize the JS script to interact with the php files which manage the sql scripts. If someone would like to help optimize it, will be welcome.
PHP main
<?php
require 'db/conn.php':
$id = (int)$_GET['id'];
if($result = $db->query("SELECT * FROM table WHERE user_id = $id")){
if($result->num_rows){
while($row = $result->fetch_assoc()) {
echo "
<div class='rating'>
<center>
<p>Are you alrite " . $row['user_name'] . "?</p>
<div id='rating-div'>
<a href='#' id='yes' class='custom-btn'>Yes</a>
<a href='#' id='no' class='custom-btn'>No</a>
<input type='hidden' id='" . $id . "' />
</div>
</center>
</div>
";
}
}
}
?>
JS
$(function(){
$('#yes').on('click', function(e){
e.preventDefault();
var usr_id = $('#rating-div input').attr('id');
$.ajax({
url: 'db/rating-yes.php',
type: 'post',
data: {'action': 'rating', 'usr_id': user_id},
success: function(data, status){
if(data == "ok"){
$('.rating').html('<p>Nice!</p>');
}//end of if
},//end of success function
error: function(xhr, desc, err){
console.log(xhr);
console.log("Details: " + desc + "\nError: "+ err);
}
});//end of ajax
}); //end of onclick function
}); //end of main function
$(function(){
$('#no').on('click', function(e){
e.preventDefault();
var usr_id = $('#rating-div input').attr('id');
$.ajax({
url: 'db/rating-no.php',
type: 'post',
data: {'action': 'rating', 'usr_id': user_id},
success: function(data, status){
if(data == "ok"){
$('.rating').html('<p>Oh no! :(</p>');
}//end of if
},//end of success function
error: function(xhr, desc, err){
console.log(xhr);
console.log("Details: " + desc + "\nError: "+ err);
}
});//end of ajax
}); //end of onclick function
}); //end of main function
PHP rating-yes
<?php
$rating = $_POST['action'];
$user_id = $_POST['usr_id'];
if($rating == "rating") {
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('your_database');
if(mysql_query("UPDATE table SET useful = useful + 1 WHERE user_id = $user_id")){
echo "ok";
}
}
?>
PHP rating-no
<?php
$rating = $_POST['action'];
$user_id = $_POST['usr_id'];
if($rating == "rating") {
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('your_database');
if(mysql_query("UPDATE table SET not_useful = not_useful + 1 WHERE user_id = $user_id")){
echo "ok";
}
}
?>