Question

我想创建一个包含大量输入行的表。这个想法是每行输入与后端的一个对象相关联。我想要提交一行＆＃34;提交＆＃34;一旦用户不再向其中输入数据。

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

我想打电话给后端＆＃34;行动＆＃34; （在MVC意义上）当用户停止在当前行中输入然后在下一行时。

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

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

任何讨论都会有所帮助，因为我试图了解更多关于前端解决方案的信息。如果有任何javascript框架可以让这更容易，请告诉我们。

Answer 1

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

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

移出表格行时验证并提交。

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

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

3 个答案: