Submitting Data Without Clicking A Submit Button

I want to create a table with rows full of inputs. The idea is that each row of inputs ties to one object on the backend. I want a row to be 'submitted' once the user is no longer

Solution 1:

you can use javascript to submit a form when ever you want. You can attach the submit form function to any event (like user ideal, blur any other event you want). Then if any of the event happens, you can call that function which will submit the form. see the example below

function idealUser(){//you call that function according to requirementsetTimeout(function(){
  submitForm();
 },5000);
}
function submitForm(){
document.getElementByID('formId').submit();
}

Solution 2:

You could store the starting values of each row in javascript. Add a function for the onfocus event to the rows to check if the focused row changes.

Then when the focused row changes, the js can check if any other row has different values than the saved values. If a row that is out of focus does have different values than what was previously saved, then submit the changed row info to the backend.

Also update the stored row values in the js after the change is sent to the server.

Solution 3:

Validate and submit when moving out of the table row.

Here's some code and a demo. I triggered a button click when you leave the row but you may use ajax to call your server side code.

$("table").on("blur", ".row", function(e){
	//check if all input fields are filled 	var cols = $(this).find(".col");
  var filled = true;
  cols.each(function(i, v){
  	if($(v).val().length==0){
    	filled = false;
    }
  });
  
  //if not moving out of the last input field then don't submitif(e.target !== $(this).find("input").last()[0]){
  	return;
  }
  
  //If filled trigger click for submissionif(filled){
  	//in reality, you may use ajax here to call your backend code
  	$("#submit-btn").trigger("click");
  }	
});


$("#submit-btn").on("click", function(){
	alert("Submit Clicked!");
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table><trid="row1"class="row"><td><inputclass="col"value=""></td><td><inputclass="col"value=""></td><td><inputclass="col"value=""></td></tr><trid="row2"class="row"><td><inputclass="col"value=""></td><td><inputclass="col"value=""></td><td><inputclass="col3"value=""></td></tr></table><inputtype=buttonvalue=submitid=submit-btn>