jdadwilson
02-24-2014, 02:02 AM
I have a form that contains submit buttons to "Add," "Edit," or "Delete" records from a database. I am using the following jQuery code to accomplish the desired action.
// Action to run on submit to add/edit/delete record from database
var request; // variable to hold request
// bind to the submit event of our form
$("#form_edit").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup local variables
var $form = $(this);
// select and cache all the fields
var $inputs = $form.find("input, select, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// disable the inputs for the duration of the ajax request
$inputs.prop("disabled", true);
// define constants to be passed as parameters
var updateType = "edt";
var tableName = "myTable";
var indexName = "myID";
var recNumber = formID.value;
// Build string for query input
var type = "?type=" + updateType;
var table = "&table=" + tableName;
var index = "&index=" + indexName;
var rec = "&rec=" + recNumber;
var getS = type + table + index + rec;
// execute request to update database
request = $.ajax({
url: "files_json/update_Record.php" + getS,
type: "post",
data: serializedData
});
// callback handler called on success
request.done(function (response, textStatus, jqXHR) {
console.log("Data record updated!"); // log success message to the console
});
// callback handler called on failure
request.fail(function (jqXHR, textStatus, errorThrown) {
console.error( "The following error occured: " + textStatus, errorThrown ); // log the error to the console
});
// callback handler called regardless if the request failed or succeeded
request.always(function () {
$inputs.prop("disabled", false); // reenable the inputs
});
// prevent default posting of form
event.preventDefault();
}); // End of submit function
The above script works fine for a single preset ('edt' in this case) type of submit. I need to determine the specific type of submit (add, edt, del) so that the update type variable can be changed to reflect the actual type.
Further, I would like to be able to somehow "pass" the "tableName" and "indexName" variables so that the script will work as a generic script for multiple forms (representing updates to multiple tables).
TIA for any assistance
jdadwilson
// Action to run on submit to add/edit/delete record from database
var request; // variable to hold request
// bind to the submit event of our form
$("#form_edit").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup local variables
var $form = $(this);
// select and cache all the fields
var $inputs = $form.find("input, select, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// disable the inputs for the duration of the ajax request
$inputs.prop("disabled", true);
// define constants to be passed as parameters
var updateType = "edt";
var tableName = "myTable";
var indexName = "myID";
var recNumber = formID.value;
// Build string for query input
var type = "?type=" + updateType;
var table = "&table=" + tableName;
var index = "&index=" + indexName;
var rec = "&rec=" + recNumber;
var getS = type + table + index + rec;
// execute request to update database
request = $.ajax({
url: "files_json/update_Record.php" + getS,
type: "post",
data: serializedData
});
// callback handler called on success
request.done(function (response, textStatus, jqXHR) {
console.log("Data record updated!"); // log success message to the console
});
// callback handler called on failure
request.fail(function (jqXHR, textStatus, errorThrown) {
console.error( "The following error occured: " + textStatus, errorThrown ); // log the error to the console
});
// callback handler called regardless if the request failed or succeeded
request.always(function () {
$inputs.prop("disabled", false); // reenable the inputs
});
// prevent default posting of form
event.preventDefault();
}); // End of submit function
The above script works fine for a single preset ('edt' in this case) type of submit. I need to determine the specific type of submit (add, edt, del) so that the update type variable can be changed to reflect the actual type.
Further, I would like to be able to somehow "pass" the "tableName" and "indexName" variables so that the script will work as a generic script for multiple forms (representing updates to multiple tables).
TIA for any assistance
jdadwilson