表单提交之前的jQuery函数

Question

我试图在单击表单提交按钮时使用Jquery启动一个函数，但该函数需要在表单实际提交之前启动。

我试图在提交时将一些div标记属性复制到隐藏的文本字段中，然后提交表单。

我已经通过使用mouseover功能（当提交按钮悬停在上方时）成功实现了这一点，但这在使用触摸的移动设备上不起作用。

$("#create-card-process.design #submit").on("mouseover", function () {
    var textStyleCSS = $("#cover-text").attr('style');
    var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
    $("#cover_text_css").val(textStyleCSS);
    $("#cover_text_background_css").val(textbackgroundCSS);
});

我玩过提交函数，但是当表单提交时，而不是之前，函数会触发，所以值不会保存在字段中。

非常感谢。

Answer 1

根据Wakas Bukhary的答案，您可以通过将最后一行放入响应范围来实现异步。

$('#myform').submit(function(event) {

  event.preventDefault(); //this will prevent the default submit
  var _this = $(this); //store form so it can be accessed later

  $.ajax('GET', 'url').then(function(resp) {

    // your code here 

   _this.unbind('submit').submit(); // continue the submit unbind preventDefault
  })  
}

Answer 2

$('#myform').submit(function() {
  // your code here
})

上述内容在Firefox中不起作用。表单只需提交，无需先运行代码。此外，其他地方也提到了类似的问题。。。比如这个问题。解决办法将是

$('#myform').submit(function(event) {

 event.preventDefault(); //this will prevent the default submit

  // your code here (But not asynchronous code such as Ajax because it does not wait for a response and move to the next line.)
  
 $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
})

Answer 3

您可以使用onsubmit函数。

如果返回false，则不会提交表单。在这里读一下。

$('#myform').submit(function() {
  // your code here
});