I have a table of data that is populated by an ajax call to a mysql database as shown in the below image. Each row item has a select item with a status which can either be: 'Not Started, Waiting or Complete'. What I would like to happen is when a status is changed on the select item that status is written back to that particular row of the mysql database. Each select item in each row has a unique name which uses the rows id as an identifier so the HTML looks like this:
<tr><td><select class="statusselect" name="status_1">
<option value="Not Started" selected>Not Started</option>
<option value="Waiting">Waiting</option>
<option value="Complete">Complete</option>
</select></td></tr>
<tr><td><select class="statusselect" name="status_2">
<option value="Not Started">Not Started</option>
<option value="Waiting" selected>Waiting</option>
<option value="Complete">Complete</option>
</select></td></tr>
etc. etc. etc.
I know I have to use jquery to make the database call when the select changes so my call looks like this: (I am new to coding so please be nice to my examples that aren't working!)
$('.statusselect').change(function(e) {
var postData = $(this).val();
var formURL = "updatetaskstatus.php";
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$('div#taskdisplay').hide();
$('div#updateddisplay').load('taskdisplay.php').fadeIn(3000);
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
});
and then in updatetaskstatus.php this file looks like this (which I know also isn't right):
require_once 'connectionsettings.php'; // Gets connection settings
$sql = "UPDATE DesignProjects
SET status='$_POST['status']'
WHERE id='$_POST['id']'";
if ($mysqli->query($sql) === TRUE) {
echo "status updated successfully";
} else {
echo "Error updating status" . $mysqli->error;
}
$mysqli->close();
Sorry for the large post, I know I am probably doing a few basic things wrong so your help is heaps appreciated!
There are a few things missing. In your sql query you reference $_POST['status'] and $_POST['id'] but neither value is included in the ajax request.
You can add the ID to the select as a data attribute such as data-id="1"
<tr><td><select class="status select" data-id="1" name="status_1">
<option value="Not Started" selected>Not Started</option>
<option value="Waiting">Waiting</option>
<option value="Complete">Complete</option>
</select></td></tr>
Then in your ajax you need to get the ID value and include in the request.
$('.statusselect').change(function(e) {
var status = $(this).val();
var id = $(this).attr("data-id");
var formURL = "updatetaskstatus.php";
$.ajax(
{
url : formURL,
type: "POST",
data : {status: status, id: id},
success:function(data, textStatus, jqXHR)
{
$('div#taskdisplay').hide();
$('div#updateddisplay').load('taskdisplay.php').fadeIn(3000);
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
});
Backend you need to escape your data to prevent mysql injection or use mysql prepare.
You may also like to include the result as json and validate the result front end. Such as:
echo json_encode(array('result' => 1, 'html' => 'status updated successfully'),true);
And in your ajax
success:function(data, textStatus, jqXHR)
{
if (data.result === 1) {
// success message
} else {
// error message
}
}