jQuery 提交表单前的jQuery函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21938788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery function BEFORE form submission
提问by Matt Price
I am trying to fire a function using Jquery when the form submit button is clicked, but the function needs to fire BEFORE the form is actually submitted.
我试图在单击表单提交按钮时使用 Jquery 触发一个函数，但该函数需要在实际提交表单之前触发。
I am trying to copy some div tag attributes into hidden text fields upon submission, and then submit the form.
我试图在提交时将一些 div 标签属性复制到隐藏的文本字段中，然后提交表单。
I have managed to get this to work using the mouseover function (when the submit button is hovered over) but this will not work on mobile devices using touch.
我已经设法使用鼠标悬停功能（当提交按钮悬停在上方时）使其工作，但这在使用触摸的移动设备上不起作用。
$("#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);
});
I have played around with the .submit function, but the values are not saved within the fields as the function fires when the form is submitted and not before.
我玩过 .submit 函数，但值没有保存在字段中，因为该函数在提交表单时而不是之前触发。
Many thanks
非常感谢
回答by kartikluke
回答by Waqas Bukhary
$('#myform').submit(function() {
// your code here
})
The above is NOTworking in Firefox. The form will just simply submit without running your code first. Also the similar issues are mentioned elsewhere... such as this question. The work around will be
以上不适用于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 response and move to next line.)
$(this).unbind('submit').submit(); // continue the submit unbind preventDefault
})
回答by Matt Price
Aghhh... i was missing some code when i first tried the .submit function.....
啊……我第一次尝试 .submit 函数时遗漏了一些代码……
This works:
这有效：
$('#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);
});
Thanks for all the comments.
感谢所有的评论。
回答by Skriptotajs
You can use some div or span instead of button and then on click call some function which submits form at he end.
您可以使用一些 div 或 span 而不是按钮，然后单击调用一些在他结束时提交表单的函数。
<form id="my_form">
<span onclick="submit()">submit</span>
</form>
<script>
function submit()
{
//do something
$("#my_form").submit();
}
</script>
回答by SoMa
Based on Wakas Bukhary answer, you could make it async by puting the last line in the response scope.
根据 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
})
}
回答by Fi Horan
You can do something like the following these days by referencing the "beforeSubmit" jquery form event. I'm disabling and enabling the submit button to avoid duplicate requests, submitting via ajax, returning a message that's a json array and displaying the information in a pNotify:
这些天您可以通过引用“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');
}
});
});
回答by meck373
Just because I made this mistake every time when using the submit function.
只是因为我每次使用提交功能时都会犯这个错误。
This is the full code you need:
这是您需要的完整代码：
Add the id "yourid" to the HTML form tag.
将 id “ yourid”添加到 HTML 表单标签中。
<form id="yourid" action='XXX' name='form' method='POST' accept-charset='UTF-8' enctype='multipart/form-data'>
the jQuery code:
jQuery 代码：
$('#yourid').submit(function() {
// do something
});
