I'm programming a system and I want to know if this is the correct way or if there are a better way to do it.
Container:
I have more fields but I only added one to show you the container.
<form method="post" class="form-horizontal" onsubmit="return submitForm();" role="form" id="div-studentStatus">
<div class="form-group">
<label class="col-sm-3 control-label">Status:</label>
<div class="col-sm-5 text-primary" id="div-studentStatus">
<input type="hidden" value="<?php echo $_POST['id']; ?>" id="studentId">
<select class='form-control input-sm' id="studentStatus">
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-3" align="center"><button type="button" class="btn btn-success btn-block btn-sm" id="statusSaveButton">Guardar</button></div>
<div class="col-sm-1"> </div>
</div>
</form>
JS:
When the user click on statusSaveButton
, I append a confirmation button (statusSaveButtonYes
and statusSaveButtonNo
). I only add the action if the user clicks on YES.
$(document).on('click','#statusSaveButton',function() {
$('#studentStatus').attr('disabled', 'disabled');
$('#statusSaveButton').prop('disabled', true);
var studentStatus = $("#studentStatus").val();
if ($("#studentStatusConfirm").length) {
$("#studentStatusConfirm").html('<div class="col-sm-12">Are you sure you want to modify the record? <button type="button" class="btn btn-success btn-xs" id="statusSaveButtonYes" style="width:30px">Yes</button> <button type="button" class="btn btn-danger btn-xs" id="statusSaveButtonNo" style="width:30px">No</button></div>');
$("#studentStatusConfirm").show();
} else {
$("#div-studentStatus").append('<div class="form-group" id="studentStatusConfirm"><div class="col-sm-12">¿Estas seguro que deseas modificar el status del alumno? <button type="button" class="btn btn-success btn-xs" id="statusSaveButtonYes" style="width:30px">Si</button> <button type="button" class="btn btn-danger btn-xs" id="statusSaveButtonNo" style="width:30px">No</button></div></div>');
}
});
$(document).on('click','#statusSaveButtonYes',function() {
var studentId = $("#studentId").val();
var studentStatus = $("#studentStatus").val();
$.post("content/studentsAction.php", {action:"editStudentStatus", studentId:studentId, studentStatus:studentStatus}, function(data){
if (data != "Successful") {
$("#studentStatusConfirm").html('<div class="col-sm-12 text-danger">'+data+'</div>');
$("#statusSaveButtons").show();
$('#studentStatus').removeAttr('disabled');
$('#statusSaveButton').prop('disabled', false);
} else {
$("#studentStatusConfirm").html('<div class="col-sm-12 text-success">Success.</div>');
$("#statusSaveButtons").show();
$('#studentStatus').removeAttr('disabled');
$('#statusSaveButton').prop('disabled', false);
}
});
});
Action (content/studentsAction.php):
I have 8 different actions in this page (I only add one): change status, change level, change name, etc. I control the action with the $_POST["action"]
variable.
<?php
$regex_studentId = '/^[0-9]{1,12}$/';
$regex_studentStatus = '/^[01]{1}$/';
if (isset($_POST["action"])) {
if ($_POST["action"] == "editStudentStatus") {
if ((isset($_POST["studentId"])) and (isset($_POST["studentStatus"]))) {
if ((preg_match($regex_studentId, $_POST["studentId"])) and (preg_match($regex_studentStatus, $_POST["studentStatus"]))) {
$updateStudentStatus = updateStudentStatus($_POST["studentId"],$_POST["studentStatus"]);
if ($updateStudentStatus) {
echo "Successful";
} else {
echo "Error.";
}
} else {
echo "Error.";
}
} else {
echo "Error.";
}
} else {
echo "Error.";
}
?>
Database:
function updateStudentStatus($studentId,$studentStatus) {
include ("./businesslogic/dbconnection/cfg.php");
$db = new PDO('mysql:host='.$server.';dbname='.$db,$db_user,$db_password);
$string = "update students set student_status = :studentStatus where student_id = :studentId";
$sql = $db->prepare($string);
$sql->bindParam(':studentId',$studentId);
$sql->bindParam(':studentStatus',$studentStatus);
if ($sql->execute()) {
$db = null;
return TRUE;
} else {
$db = null;
return FALSE;
}
}