Results 1 to 1 of 1

Thread: Form update with multiple submit buttons

  1. #1
    Join Date
    Feb 2013
    Location
    California
    Posts
    86
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default Form update with multiple submit buttons

    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.

    Code:
    			// 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
    Last edited by jdadwilson; 02-25-2014 at 09:17 PM. Reason: Update Subscription Info

Similar Threads

  1. Replies: 0
    Last Post: 01-14-2009, 02:05 AM
  2. form with 2 submit buttons
    By d-machine in forum PHP
    Replies: 1
    Last Post: 10-02-2008, 05:46 AM
  3. Replies: 2
    Last Post: 04-15-2008, 07:20 PM
  4. Input Form with 2 Submit Buttons
    By kuau in forum HTML
    Replies: 8
    Last Post: 04-05-2008, 02:15 AM
  5. Replies: 2
    Last Post: 03-07-2006, 01:26 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •