Submitting data without clicking a submit button

Question

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 entering data into it.

I'm mostly a backend engineer bumbling with the front end, so I'm wondering what are some approaches to get the following effect:

I want to call a backend "action" (in the MVC sense) when a user stops inputting in a current row and is then on the next row.

I've read about onblur and onfocusout, but neither seem to do what I want. Onblur is on a per-input basis, and onfocusout is triggered each time an input is left even if a user is tabbing through the same row. Further, onfocusout isn't supported by firefox yet.

My app is grails, but I'm open to circumventing the standard g:form (grails form) practice and using some sort of javascript solution. I just don't know what that would be.

Any discussion would be helpful, as I'm trying to learn more about frontend solutions in general. If there are any javascript frameworks that make this easier, let me know about them.

Jagajit Prusty · Accepted Answer · 2016-05-22 05:12:27Z

2

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 requirement
 setTimeout(function(){
  submitForm();
 },5000);
}
function submitForm(){
document.getElementByID('formId').submit();
}

answered May 22, 2016 at 5:12

Jagajit Prusty

2,1103 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

curtwphillips · Accepted Answer · 2016-05-22 05:20:31Z

0

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.

answered May 22, 2016 at 5:20

curtwphillips

5,8811 gold badge23 silver badges19 bronze badges

Comments

Chintan · Accepted Answer · 2016-05-22 06:39:37Z

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 submit
  if(e.target !== $(this).find("input").last()[0]){
  	return;
  }
  
  //If filled trigger click for submission
  if(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!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="row1" class="row">
  <td><input class="col" value=""></td>
  <td><input class="col" value=""></td>
  <td><input class="col" value=""></td>
</tr>
<tr id="row2" class="row">
  <td><input class="col" value=""></td>
  <td><input class="col" value=""></td>
  <td><input class="col3"value=""></td>
</tr>

</table>
<input type=button value=submit id=submit-btn>

Collectives™ on Stack Overflow

Submitting data without clicking a submit button

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related