无需单击提交按钮即可提交数据

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.

当用户停止在当前行中输入然后在下一行时,我想调用后端“动作”(在MVC意义上)。

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.

我读过onblur和onfocusout,但似乎都没有做我想要的。 Onblur基于每个输入,即使用户在同一行中进行制表,每次输入时都会触发onfocusout。此外,firefox还不支持onfocusout。

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.

我的应用程序是grails,但我愿意绕开标准的g:form(grails form)练习并使用某种javascript解决方案。我只是不知道会是什么。

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.

任何讨论都会有所帮助,因为我正在尝试更多地了解前端解决方案。如果有任何javascript框架使这更容易,请让我知道它们。

3 个解决方案

#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

您可以随时使用javascript提交表单。您可以将提交表单功能附加到任何事件(例如用户理想,模糊您想要的任何其他事件)。然后,如果发生任何事件,您可以调用将提交表单的函数。见下面的例子

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

#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.

您可以在javascript中存储每行的起始值。将onfocus事件的函数添加到行以检查焦点行是否更改。

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.

然后,当聚焦行改变时,js可以检查是否有任何其他行具有与保存值不同的值。如果失焦的行确实具有与先前保存的值不同的值,则将更改的行信息提交到后端。

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

在将更改发送到服务器后,还会更新js中存储的行值。

#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.

这是一些代码和演示。当您离开行时我触发了一个按钮,但您可以使用ajax来调用服务器端代码。

$("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>

#1

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

#2