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

我想创建一个包含多行输入的表。 这个想法是每行输入都与后端的一个对象相关联。 一旦用户不再向其中输入数据，我希望“提交”一行。

我主要是后端工程师笨手笨脚的前端，所以我想知道有什么方法可以获得以下效果：

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

移出表格行时validation并提交。

这是一些代码和演示。 当您离开行时我触发了一个按钮，但您可以使用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!"); });