jQuery - 防止默认，然后继续默认

时间：2013-01-17 08:47:02

标签： javascript jquery

我有一个表单，在提交之后，我需要在提交表单之前进行一些额外的处理。我可以阻止默认表单提交行为，然后执行我的额外处理（它基本上调用Google Maps API并在表单中添加一些隐藏字段） - 然后我需要提交表单。

有没有办法“防止默认”，稍后某点“继续默认？”

10 个答案:

答案 0 :(得分：46)

当您将.submit()事件绑定到表单，并且在返回之前执行您想要执行的操作（true）时，这些事情会在实际提交之前发生。

例如：

$('form').submit(function(){
    alert('I do something before the actual submission');
    return true;
});

Simple example

jquery.com上的另一个例子：http://api.jquery.com/submit/#entry-examples

答案 1 :(得分：38)

使用jQuery.one()

  

将处理程序附加到元素的事件。每个事件类型

每个元素最多执行一次处理程序 
$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

它可以满足您的需求，您无需担心多次提交。

答案 2 :(得分：23)

我会这么做.. 

 $('#submiteButtonID').click(function(e){
     e.preventDefault();
     //do ur stuff.
     $('#formId').submit();
 });

首先致电preventDefault并稍后使用submit()功能..如果您只是需要提交表单

答案 3 :(得分：16)

使用这种方式你将在你的JS上做一个无限循环。 要做得更好，可以使用以下

var on_submit_function = function(evt){
    evt.preventDefault(); //The form wouln't be submitted Yet.
    (...yourcode...)

    $(this).off('submit', on_submit_function); //It will remove this handle and will submit the form again if it's all ok.
    $(this).submit();
}

$('form').on('submit', on_submit_function); //Registering on submit.

我希望它有所帮助！ 谢谢！

答案 4 :(得分：3)

这是恕我直言，最通用和最强大的解决方案（如果您的操作是用户触发的，例如'用户点击按钮'）：

  • 第一次调用处理程序时检查WHO是否触发了它：
    • 如果用户晃动它 - 做你的东西，然后再次触发它（如果你想） - 以编程方式
    • 否则 - 什么都不做（=“继续默认”）

作为一个例子，请注意添加“你确定吗？”这个优雅的解决方案。只需通过装饰具有属性的按钮弹出到任何按钮。 如果用户不选择退出，我们将有条件地继续默认行为。

1。 让我们为每个按钮添加一个“你确定”弹出一个警告文本：

<button class="btn btn-success-outline float-right" type="submit"  ays_text="You will lose any unsaved changes... Do you want to continue?"                >Do something dangerous</button>

2。 将处理程序附加到所有这些按钮：

$('button[ays_text]').click(function (e, from) {
    if (from == null) {  // user clicked it!
        var btn = $(this);
        e.preventDefault();
        if (confirm() == true) {
            btn.trigger('click', ['your-app-name-here-or-anything-that-is-not-null']);
        }
    }
    // otherwise - do nothing, ie continue default
});

就是这样。

答案 5 :(得分：2)

您可以使用e.preventDefault()来停止当前操作。

比$("#form").submit(); 

 $('#form').submit(function (e)
{
    return !!e.submit;
});
if(blabla...)
{...
}
else
{
    $('#form').submit(
    {
        submit: true
    });
}

答案 6 :(得分：2)

以纯Javascript方式，您可以在防止默认后提交表单。

这是因为HTMLFormElement.submit() never calls onSubmit()。因此，我们依赖于该规范的奇怪性来提交表单，就像它在这里没有自定义的onsubmit处理程序一样。

var submitHandler = (event) => {
  event.preventDefault()
  console.log('You should only see this once')
  document.getElementById('formId').submit()
}

有关同步请求，请参阅this fiddle。

等待异步请求完成同样容易：

var submitHandler = (event) => {
  event.preventDefault()
  console.log('before')
  setTimeout(function() {
    console.log('done')
    document.getElementById('formId').submit()
  }, 1400);
  console.log('after')
}

您可以查看我的小提琴，查看example异步请求。

如果你对承诺感到沮丧：

var submitHandler = (event) => {
  event.preventDefault()
  console.log('Before')
    new Promise((res, rej) => {
      setTimeout(function() {
        console.log('done')
        res()
      }, 1400);
    }).then(() => {
      document.getElementById('bob').submit()
    })
  console.log('After')
}

这是that request。

答案 7 :(得分：2)

使用jQuery和@Joepreludian的上述答案的一个小变化：

要记住的重要要点：

  • .one(...)代替.on(...) or .submit(...)
  • named函数而不是anonymous function函数，因为我们将在callback中引用它。
$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

您可以将以下代码段中的allIsWell变量的值更改为true或false以测试功能：

$('form#my-form').one('submit', function myFormSubmitCallback(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var $this = $(this);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="my-form">
  <input name="./fname" value="John" />
  <input name="./lname" value="Smith" />
  <input type="submit" value="Lets Do This!" />
  <br>
  <label>
    <input type="checkbox" value="true" id="allIsWell" />
    All Is Well
  </label>
</form>

祝你好运...

答案 8 :(得分：1)

“没有提交循环的验证注入”：

我只想在HTML5验证之前检查reCaptcha和其他一些东西，所以我做了类似的事情（验证函数返回true或false）：

$(document).ready(function(){
   var application_form = $('form#application-form');

   application_form.on('submit',function(e){

        if(application_form_extra_validation()===true){
           return true;
        }

        e.preventDefault();

   });
});

答案 9 :(得分：0)

function invokeBackend(args, proc){
WL.Logger.info("Invoking Backend procedure " + proc);
WL.Logger.info(args);

var path = "SEB-Middleware/api/" + proc;
var input = {
        method : 'post',
        returnedContentType : 'json',
        path : path,
        body : {
            contentType:"application/json; charset=UTF-8",
            content: JSON.stringify(args)
        }
    };

var response = WL.Server.invokeHttp(input);
if(response &&
        (response['isSuccessful'] && response.isSuccessful) && 
        (response['statusCode'] && response.statusCode == 200)){
    return response;
}else{
    WL.Logger.warn("Invocation Error: " + proc);
    var locale = 'en';
    if(args && args['LOCALE']) locale = args.LOCALE;

    var resp = null;
    if(response['statusCode']){
        resp =  com.seb.mfp.utility.ResponseUtil.getErrorResponse(response.statusCode, locale);
    }else{
        resp = com.seb.mfp.utility.ResponseUtil.getErrorResponse(locale);
    }

    WL.Logger.warn(resp);

    return resp;
}
 }
相关问题
最新问题