表单提交前的Jquery函数

我试图在单击表单提交按钮时使用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);
});

我已经使用了

submit

函数，但是这些值不会保存在字段中，因为该函数在表单提交时启动，而不是在提交之前启动

---

非常感谢。

您可以使用onsubmit功能

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

---

啊。。。我第一次尝试.submit函数时缺少一些代码

这项工作：

$('#create-card-process.design').submit(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);
});

---

谢谢你的评论

您可以使用一些div或span来代替按钮，然后单击call，调用最后提交表单的函数

<form id="my_form">
   <span onclick="submit()">submit</span>
</form>

<script>
   function submit()
   {   
       //do something
       $("#my_form").submit();
   }
</script>

提交
函数提交（）
{   
//做点什么
$（“#我的表格”）.submit（）；
}

以上内容在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
})

---

只是因为我每次使用提交功能时都犯了这个错误

这是您需要的完整代码：

将id“yourid”添加到HTML表单标记中

<form id="yourid" action='XXX' name='form' method='POST' accept-charset='UTF-8' enctype='multipart/form-data'>

---

根据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
  })  
}

---

通过引用“beforeSubmit”jquery表单事件，您可以执行如下操作。我禁用并启用submit按钮以避免重复请求，通过ajax提交，返回一条json数组消息，并在pNotify中显示信息：

jQuery('body').on('beforeSubmit', "#formID", function() {
    $('.submitter').prop('disabled', true);
    var form = $('#formID');
    $.ajax({
        url    : form.attr('action'),
        type   : 'post',
        data   : form.serialize(),
        success: function (response)
        {
            response = jQuery.parseJSON(response);
            new PNotify({
                text: response.message,
                type: response.status,
                styling: 'bootstrap3',
                delay: 2000,
            });
            $('.submitter').prop('disabled', false);
        },
        error  : function ()
        {
            console.log('internal server error');
        }
    });
});

---

submit

事件（在表单上）应该在您单击submit按钮时运行，并且它将在表单本机提交之前运行。您也可以尝试在提交按钮本身上使用

单击

事件。您对

提交

功能有什么问题，我不明白您的最后一句话。“字段中未保存值”是什么意思？表单上还有其他JavaScript（可能是验证）吗？你能给我们一把小提琴吗？如果要确保在提交之前运行动画，还可以使用

超时

选项。您可以使用

.val（）

函数从字段中获取值。值应该存在。请小心，当用户在其中一个字段上点击[Enter]时，此操作将失败。此操作不会失败。它根本不会被称为；-）Firefox还是这样吗？这个答案是5年前给出的。我只是安装了Firefox来测试它。我是87版的。简单的

submit

很好，不需要

preventDefault

。我使用的是jQuery3.5.1。提交回调函数中的代码有效吗？在表格提交之前？如果不使用已接受答案中提到的return false？submit（）实际上用于提交表单，因此，如果您希望在提交之前运行代码，那么您需要在仅使用

return false

时避免使用默认值，您无法在函数运行后继续提交表单。。。但是通过组合使用

preventDefault

和

unbind

，您可以在运行函数后继续使用submit。submit回调函数中的代码是否有效对在提交表格之前？-对如果返回false，则不会提交表单？-对

$('#yourid').submit(function() {
  // do something
});

$('#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
  })  
}

jQuery('body').on('beforeSubmit', "#formID", function() {
    $('.submitter').prop('disabled', true);
    var form = $('#formID');
    $.ajax({
        url    : form.attr('action'),
        type   : 'post',
        data   : form.serialize(),
        success: function (response)
        {
            response = jQuery.parseJSON(response);
            new PNotify({
                text: response.message,
                type: response.status,
                styling: 'bootstrap3',
                delay: 2000,
            });
            $('.submitter').prop('disabled', false);
        },
        error  : function ()
        {
            console.log('internal server error');
        }
    });
});