How to update selected value in database via AJAX - php

Question

I have a dynamically generated select where customer can choose supplier ($sid) for product ($pid):
<select name="<?php echo $pid; ?>" onchange="func(this.value)">
<?php foreach...{ ?>
<option name="<?php echo $pid; ?>" value="<?php echo $sid; ?>">
<?php echo $value; ?>
</option>
<?php } ?>
</select>
And ajax call which has to assign the chosen value to the product:
<script>
function func(selectedValue){
var pid = $('name').val();
$.ajax({
url: 'update.php',
type: 'POST',
data: {sid : selectedValue, pid : pid},
success: function() {
alert("Ok");
location.reload();
}
});
}
</script>
And update.php
<?php
$pid = $_REQUEST['pid'];
$val = $_REQUEST['sid'];
$sid = json_encode($val);
$query = "UPDATE `orders` SET sid = '$sid' WHERE pid = '$pid'";
try {
$DBH = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
$STH=$DBH->prepare($query);
$STH->execute();
}
catch(PDOException $e) {
echo $e->getMessage();
}
$DBH=null;
?>
But the information does not update. Where is my mistake?

Answer 1

var pid = $('name').val(); with var pid = selectedValue;

Answer 2

Try this
<?php
$pid = $_REQUEST['pid'];
//$val = $_REQUEST['sid']; // you may write wrong here
//$sid = json_encode($val);
$sid= $_REQUEST['sid'];
$query = "UPDATE `orders` SET sid = '$sid' WHERE pid = '$pid'";
try {
$DBH = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
$STH=$DBH->prepare($query);
$STH->execute();
}
catch(PDOException $e) {
echo $e->getMessage();
}
$DBH=null;
?>
javascript
<script>
function func(selectedValue){
var pid = $('#product option:selected').attr('name');
$.ajax({
url: 'update.php',
type: 'POST',
data: {sid : selectedValue, pid : pid},
success: function() {
alert("Ok");
location.reload();
}
});
}
</script>
Html:
<select id="product" name="<?php echo $pid; ?>" onchange="func(this.value)">
<?php foreach...{ ?>
<option name="<?php echo $pid; ?>" value="<?php echo $sid; ?>">
<?php echo $value; ?>
</option>
<?php } ?>
</select>

Answer 3

You can replace :
var pid = $('name').val();
with this:
var pid = $(this).attr('name');
The above code will fetch the value of 'name'
The below code will fetch sid
$(this).val();

Answer 4

The problem is you don't get the correct pid because of this wrong jquery selector
$('name').val()
You need to add id attribute to <select> tag, let's say it's product
<select id="product" name="<?php echo $pid; ?>" onchange="func(this.value)">
<?php foreach...{ ?>
<option name="<?php echo $pid; ?>" value="<?php echo $sid; ?>">
<?php echo $value; ?>
</option>
<?php } ?>
</select>
Since $pid is always the same, you can get it by using this selector
$('#product').attr('name')
and set pid to the above as follows
<script>
function func(selectedValue){
var pid = $('#product').attr('name');
$.ajax({
url: 'update.php',
type: 'POST',
data: {sid : selectedValue, pid : pid},
success: function() {
alert("Ok");
location.reload();
}
});
}
</script>

Answer 5

You're missing the important part putting a name to the select not the value.
Instead use id to call your function in your script.
<select name="supplier" id="getValue">
<?php foreach...{ ?>
<option value="<?php echo $sid; ?>">
<?php echo $value; ?>
</option>
<?php } ?>
</select>
On your javascript put this code:
note that the line var formVals = $('form').serialize(); will get all the inputs that your form will pass.
$('#getValue').on('change', function() {
var formVals = $('form').serialize();
$.ajax({
url: "update.php",
type: 'POST',
async : false,
data: formVals,
success: function(data) {
alert("Ok");
location.reload();
}
});
});
and lastly change $_REQUEST to $_POST['supplier'];

Answer 6

Change your HTML like this: (change to onchange="func(this)")
<select name="<?php echo $pid; ?>" onchange="func(this)">
<?php foreach...{ ?>
<option name="<?php echo $pid; ?>" value="<?php echo $sid; ?>">
<?php echo $value; ?>
</option>
<?php } ?>
</select>
And in the code you call ajax:
<script>
function func(element){
var selectedValue = $(element).val();
var pid = $(element).attr('name');
$.ajax({
url: 'update.php',
type: 'POST',
data: {sid : selectedValue, pid : pid},
success: function() {
alert("Ok");
location.reload();
}
});
}
</script>
And in the update.php file:
<?php
$pid = $_POST['pid'];
$val = $_POST['sid'];
$sid = json_encode($val);//I don't know why you have this line, this line should be removed
$query = "UPDATE `orders` SET sid = '$sid' WHERE pid = '$pid'";
try {
$DBH = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
$STH=$DBH->prepare($query);
$STH->execute();
}
catch(PDOException $e) {
echo $e->getMessage();
}
$DBH=null;
?>