Question

我想要的是能够在用户按下某个键（如tab或输入）时提交表单（即，这会使他失去焦点），同时单击文本字段外部也应触发提交。然而，当他点击取消按钮时，它应该阻止提交

html结构看起来像这样

<form id="form">
  <input id="text" onblur="$(this).closest('form').submit();">
  <a id"submit">submit</a>
  <a id"cancel">cancel</a>
</form>

目前发生的情况是，当用户按下输入时，表单会被提交两次，并且只应提交一次。当他按下取消时，表格会在此之后提交并取消。

有没有人知道如何编写一些可以完成此行为的javascript代码（我的想法是采用jira内联编辑模式，我试图以类似的方式构建一些东西）

Answer 1

我将通过使用jQuery及其.change() event handler为您提供另一个可以解决此问题的方法。这样，当用户点击输入元素时，它会触发.change（）事件，您可以在其中提交表单的回调函数。如果用户取消，那么您可以正常处理该事件，与提交按钮单击相同。

表格：

<form id="form">
  <input id="text">
  <a id="cancel">cancel</a>
  <a id="submit">submit</a>
</form>

Javascript（jQuery）：

$(document).ready(function(){
    $('#submit').click(function(e){
        e.preventDefault();
        //submit the form
        console.log('form submitted by button click')
    });
    $('#cancel').click(function(e) {
        e.preventDefault();
        //close form?
        console.log('cancelled form');
    });

    $('#text').change(function(){
        //submit the form
        console.log('form submitted, maybe hide form now?');
    });
});

jsFiddle。

Answer 2

保留提交标记以防止表单提交重复。像that

这样的东西

<form id="form">
  <input id="text" onblur="submitForm('form');">
  <button onclick="submitForm('form');">submit</button>
  <button type="cancel">cancel</button>
</form>
<script>
  var submitFlag = {};

  function submitForm(id){
    if(!submitFlag[id]){
      submitFlag[id] = true;
      $('#' + id).submit();
    } else {
      // do nothing
      // alert('Form already submitted');
      return;
    } 
  }

</script>

根据javascript事件提交表单

2 个答案: