Use jQuery to update database using POST method - php

Question

I want to send every data from the form to an external php file and update the database values. It seems nothing happens. Console doesn't show any errors. I have searched for responses and nothing seems to work for me.
$(document).ready(function(){
$('#updatesettings').submit(function(e) {
e.preventDefault();
var lang = $(this).find('.dropdown-toggle').text();
console.log('lang=' + lang +'&'+ $(this).serialize());
$.ajax({
type: "POST",
url: "modules/game/updatesettings.php",
data: 'lang='+lang+'&'+$(this).serialize(),
}).done(function(data){
console.log(data);
})
.fail(function(error){
console.log(error);
});
;
});
});
<form id="updatesettings" method="post">
<p>
<label for="link">LINK</label>
<input type="text" name="link" class="textbox" id="link" value="<?php echo $tlink;?>" placeholder="LINK"> <?php if($tlink != "") echo'<i class="fa fa-check green"></i>'; else echo'<i class="fa fa-times red"></i>';?>
</p>
<p>
<label for="email">EMAIL</label>
<input type="text" name="email" class="textbox" id="email" value="<?php echo $email; ?>" placeholder="E-MAIL"><?php if($email != "") echo' <i class="fa fa-check green"></i>'; else echo' <i class="fa fa-times red"></i>';?>
</p>
<div class="btn-group">
<a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#"><?php echo $langset; ?> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="flag flag-usa flag-1x"></span> English</li>
<li><span class="flag flag-rou flag-1x"></span> Romana</li>
</ul>
</div>
<p><input type="submit" class="button" href="#" value="Save settings"></p>
</form>
The external php file that I try to use for update is this.
<?php
#include_once('modules/connections/dbconn.php');
$link = $_POST["link"];
$link = mysql_real_escape_string($link);
$email = $_POST["email"];
$email = mysql_real_escape_string($email);
$id = $_SESSION["id"];
$lang = $_POST["lang"]
if($lang=="English"){
$lang="en";
}
else {
$lang="ro";
}
mysqli_query($GLOBALS['connect'],"UPDATE users SET `link`='$link' WHERE `id`='$id'");
mysqli_query($GLOBALS['connect'],"UPDATE users SET `email`='$email' WHERE `id`='$id'");
mysqli_query($GLOBALS['connect'],"UPDATE users SET `lang`='$lang' WHERE `id`='$id'");
exit;
?>
Thank you so much for trying to offer your help!

Answer 1

You are not handling the result in case of success(done) or error(fail). Try:
$.ajax({
type: "POST",
url: "updatesettings.php",
data: 'lang='+lang+'&'+$(this).serialize(),
})
.done(function(data){
console.log(data);
})
.fail(function(error){
console.log(error);
});
done() is called when your request is correct, fail() in case of some error.
Tip: press f12 and go to Network tab to check your requests.
Check this pen

Answer 2

There's two issues in your code. Firstly the querystring you're building is malformed. You need to add a & between the lang value and the rest of the serialised form data. Secondly the DOM traversal to get the .dropdown-toggle text is incorrect. this will refer to the form element so you need to use find() to work down the DOM, not parents() to go up it.
It would also be worth adding a success and error handler, at least to aid debugging. Try this:
$('#updatesettings').submit(function(e) {
e.preventDefault();
var lang = $(this).find('.btn-group .dropdown-toggle').text();
$.ajax({
type: "POST",
url: "updatesettings.php",
data: 'lang=' + lang + '&' + $(this).serialize(),
success: function() {
console.log('it worked!');
},
error: function(x, s, e) {
console.log('it failed');
console.log(x, s, e);
}
});
});