Question

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

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

我已设法使用鼠标悬停功能（当提交按钮悬停时）使其工作，但这不适用于使用触摸的移动设备。

$("#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函数，但是这些值不会保存在字段中，因为函数在提交表单时触发，而不是之前。

非常感谢

Answer 1

您可以使用onsubmit功能。

如果您返回false，表单将无法提交。阅读它here。

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

Answer 2

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

上述不在 Firefox 中工作。表单只需提交而无需先运行代码。其他地方也提到了类似的问题......例如this question。解决方法将是

$('#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 response and move to next line.)

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

Answer 3

Aghhh ......当我第一次尝试使用.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);
});

感谢所有评论。

Answer 4

您可以使用一些div或span而不是按钮然后点击调用一些在结尾处提交表单的函数。

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

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

Answer 5

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

这是您需要的完整代码：

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

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

jQuery代码：

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

Answer 6

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

这几天，您可以通过引用“ beforeSubmit” jquery表单事件来执行类似的操作。我禁用并启用了提交按钮，以避免重复的请求，通过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');
        }
    });
});

表单提交时，Jquery函数BEFORE

7 个答案: