使用jQuery，如何在触发表单提交事件之前等待onChange事件完成
在使用jQuery时，可以通过以下步骤来实现在触发表单提交事件之前等待onChange事件完成：
- 首先，确保你已经引入了jQuery库，可以通过以下方式在HTML文件中引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>- 在表单元素上添加onChange事件处理程序，以便在表单值发生变化时执行相应的操作。例如，假设你有一个输入框元素：
<input type="text" id="myInput">你可以使用以下代码来监听onChange事件：
$('#myInput').on('change', function() {
// 在这里执行你的操作
});- 在表单提交事件处理程序中，使用jQuery的Deferred对象和Promise来等待onChange事件完成。Deferred对象可以用于异步操作的管理和控制。以下是一个示例：
$('form').on('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var deferred = $.Deferred(); // 创建一个Deferred对象
$('#myInput').trigger('change'); // 手动触发onChange事件
// 在onChange事件处理程序中，执行异步操作并在完成时解决Deferred对象
$('#myInput').on('change', function() {
// 执行你的异步操作
// ...
deferred.resolve(); // 异步操作完成后，解决Deferred对象
});
// 使用Promise对象来等待Deferred对象的解决
deferred.promise().done(function() {
// 在Deferred对象解决后，执行表单提交操作
$('form').off('submit').submit(); // 解除表单提交事件绑定并提交表单
});
});在上述代码中，我们创建了一个Deferred对象，并在onChange事件处理程序中执行异步操作。当异步操作完成后，我们解决了Deferred对象。然后，使用Promise对象来等待Deferred对象的解决。一旦Deferred对象解决，就会执行表单提交操作。
请注意，上述代码仅为示例，实际情况中，你需要根据具体的业务逻辑和需求进行相应的修改和调整。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云函数计算（SCF）、腾讯云数据库MySQL版、腾讯云对象存储（COS）等。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
1回答
在重定向后做事情之前等待-木偶人Node.js
javascript、node.js、web-scraping、puppeteer、ads
我试图用Puppeteer和Node js制作一个脚本，在我的个人电脑上的文本文件和图像上发布广告(比如ebay或gumtree)。
我已经完成了登录、填写表单和上传图片的所有内容，但是在提交表单后我不能做任何事情(我必须选中一个框并单击validate)。
错误日志显示没有为选择器newadSubmit、accept_rule和lbc_submit找到节点
var promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
upload(getInfo(absolutePath, &#
浏览 0提问于2018-11-01得票数 0
回答已采纳
2回答
如何使用$q.all跨多个异步函数处理$http.get的结果
javascript、promise、q、angular-promise
我有一个从$http.get返回的对象数组，我需要对这些对象执行三个不同的自动发布进程。我相信我可以使用$q.all并行执行post进程。
我看到了大量使用$timeout/setTimeout的示例，它们遵循以下模式：
function doSomethingAsync() {
var deferred = $q.defer();
setTimeout(function() {
deferred.resolve('hello world');
}, 500);
return deferred.promise;
}
doSo
浏览 3提问于2014-09-08得票数 1
回答已采纳
1回答
deferred.resolve()是否等到前一行完成？
javascript、jquery
deferred.resolve()会等到该行完成吗？我的代码可以工作，但我不知道deferred.resolve()实际上是在图像加载完成之后执行的，还是在图像请求启动后但在加载完成之前执行的。
test = function(deferred) {
$('<img src="https://upload.wikimedia.org/wikipedia/commons/7/72/%27Calypso%27_Panorama_of_Spirit%27s_View_from_%27Troy%27_%28Stereo%29.jpg">');
浏览 0提问于2018-02-23得票数 0
2回答
什么时候会有人需要创建一个延迟？
javascript、promise、ecmascript-6、bluebird、es6-promise
一般情况下，创建延迟对象现在通常不鼓励使用ES6风格的承诺构造函数。是否存在需要(或更好地)使用延迟的情况？
例如，在上，给出了以下示例作为使用延迟操作的理由：
function delay(ms) {
var deferred = Promise.pending();
setTimeout(function(){
deferred.resolve();
}, ms);
return deferred.promise;
}
但是，这也可以通过允诺构造函数来完成：
function delay(ms) {
return new Promis
浏览 2提问于2015-09-29得票数 6
回答已采纳
1回答
量角器E2E测试-异步Rest调用
angularjs、integration-testing、protractor
我想测试一个简单的端到端流-创建一个新的帐户-使用量角器。
我有一个AngularJS应用程序包含一个create页面，用户需要填写一个简单的表单，然后单击submit。
单击submit将触发调用异步方法以在我的服务器中创建帐户的方法。
当该函数返回时，用户将被定向到另一个页面。
下面是我的测试(creatAccount.spec.js)：
describe('Create Account Page Tests', function() {
it('createAccount success', function(){
browser
浏览 2提问于2015-06-22得票数 3
回答已采纳
4回答
超过jQuery允诺()的最大调用堆栈大小
javascript、jquery、promise
我试图在jQuery中应用一个简单的表单验证。如果表单字段为空，则添加类error。如果任何字段为空，则不要提交。我有以下几点：
$('#contact-form').submit(function(event) {
event.preventDefault();
var formValid = true;
$('input.required, textarea.required, select.required').each(function() {
if($(this).val() === '') {
浏览 0提问于2017-01-22得票数 0
回答已采纳
2回答
使用setTimeout创建jQuery延迟对象
javascript、jquery、deferred
我很难理解创建自己的延迟对象的价值。
假设您有以下jQuery
function doStuffFirst() {
var dfd = $.Deferred();
// do some stuff here
setTimeout(function() {
dfd.resolve();
},1);
return dfd.promise();
}
function doStuffAfter() {
//do some other stuff
}
浏览 0提问于2014-08-13得票数 0
3回答
使用jQuery延迟多次发布表单
javascript、jquery、jquery-deferred
我最近在jQuery中使用$.Deferred()进行了一些测试，得到了一个问题。虽然延迟和承诺对于只打算运行一次的ajaxcall来说很棒，但我也得到了一个表单，用于添加使用ajax发布的帖子需要多次运行的新用户。现在，这与延迟/promise的二进制(Ish)状态一起崩溃，因为一旦它们被解决或拒绝，它将保持该状态。所以我的问题是：
对于将被多次调用的任务，我使用-Can？-If可能，建议对此使用deferred，还是应该坚持使用旧方法，只使用$.ajax的成功/错误回调？
下面是我为发布表单而收集的一些代码，它只运行一次，但不会多次运行。
var submittingUser = new
浏览 0提问于2012-05-30得票数 1
回答已采纳
1回答
为什么Promise.all(数组)不能立即解析？
javascript、node.js、promise、settimeout、es6-promise
我在我的机器上运行代码示例(安装了Node 5.8.0 )并获得下一个结果(参见代码示例之后)。
代码示例：
'use strict'
var p1 = Promise.resolve();
var p2 = Promise.resolve();
var p12 = Promise.all([p1, p2]);
var cb = function() {
console.log(p12);
}
setTimeout(cb, 0);
console.log(p1);
console.log(p2);
console.log(p12);
结果：
承诺{未定义}
承诺{
浏览 0提问于2016-03-19得票数 3
回答已采纳
3回答
我有一个javascript链接，我将其用作弹出窗口上的按钮：
<a href="#" class="submit-action close-modal">Submit</a>
"submit-action“类有一个jQuery .click()绑定，该绑定在嵌入到模态中的表单上执行.submit()。“关闭模式”类有一个关闭模式的.click()绑定。
$(".submit-action").click(function() ($("#someForm").attr("action"
浏览 2提问于2012-08-14得票数 0
回答已采纳
2回答
手动onChange事件与JQuery冲突
javascript、jquery、onchange、dispatchevent
我有一个巨大的表单，它根据输入动态隐藏或显示元素。为此，我使用了许多onChange事件。表单可以提交给PHP服务器，并使用PHP服务器加载。表单本身使用Javascript和JQuery。加载表单时，不会自动触发onChange事件，因此我尝试使用以下代码手动执行此操作：
//Fires the event manually
echo 'var element = document.getElementsByName("'.$FieldName.'");';
echo 'event = new Event("ch
浏览 6提问于2022-01-25得票数 0
2回答
jQuery内部提交函数不起作用
jquery、forms、submit、onchange
我对这段jQuery代码有一个问题。它没有像预期的那样工作：
$('#select_dropdown').change ( function(){
$('#form_to_submit').submit( function(event){
$.post("process.php", { name: "John" },
function(data) {
alert("Data Loaded: " + data);
});
});
});
但是，这是可行的
浏览 2提问于2011-05-21得票数 2
回答已采纳
4回答
如何在AJAX调用之后继续表单提交？
javascript、ajax、jquery、jquery-post
我想在点击submit按钮时验证WordPress帖子上的用户条目，显示错误消息是有问题的，如果一切正常的话提交表单。我有一个PHP函数来进行检查，如果form_data中的数据没有问题，返回form_data，否则返回一些错误代码。以下JavaScript发出AJAX请求，并在成功检查时继续提交表单，但它没有：
jQuery(document).ready(function() {
jQuery('#post').submit(function() {
var form_data = jQuery(&#
浏览 3提问于2012-02-17得票数 3
回答已采纳
4回答
提交文本类型字段OnChange
php、javascript、html、forms、http-post
我试图在HTML中更改文本字段时提交一个表单。目前，我的代码如下所示：
echo("<form name=\"editAgendaItem" . $this->Id . "\" id=\"editAgendaItem" . $this->Id . "\" method=\"post\" action=\"./?module=meetings&preload=edit&function=editAgendaItem&agendaitem=" . $th
浏览 3提问于2012-03-01得票数 1
回答已采纳
1回答
如何在Mongo(ose)/Express应用程序中测试承诺？
express、mongoose、promise、mocha.js
我正在使用承诺在(expressJS)路由的末尾包装异步(Mongo) DB。我想试着找出如何测试以下代码。
userService
userService.findOne = function (id) {
var deferred = q.defer();
User.findOne({"_id" : id})
.exec(function (error, user) {
if (error) {
deferred.reject(error);
} else {
浏览 1提问于2014-04-02得票数 1
2回答
DOM不使用平均堆栈更新$http POST请求
javascript、angularjs、mongodb
我有一个应用程序，执行CRUD操作的一个蒙戈数据库。我有一个表单输入，并希望在添加时实时列出表单下面的元素。到目前为止，这些元素只出现在页面刷新中。但是，我有一个"x“，它调用一个ng-click来删除项目(然后从数据库中删除该项目)，这些项目将立即从DOM中消失(不需要页面刷新)。我正在以相同的方式执行POST和DELETE请求，使用对两者的承诺。我不知道为什么delete请求会自动更新DOM，但是post请求不会。
这是我的控制器：
app.controller('ListController', function($scope, PlaceService) {
浏览 3提问于2015-08-14得票数 0
1回答
承诺与RxJS的区别
javascript、promise
我试图理解以下的文本，但发现它很困难，因为我还没有承诺和计划开始RxJS的角度：
“使用承诺的缺点是它们无法处理产生多个值的数据源，例如文件流中的鼠标移动或字节序列”
在这个例子中
let promise = new Promise(function(resolve, reject) {
// the function is executed automatically when the promise is constructed
setTimeout(() => resolve("done"), 1000);
});
这是否意味着鼠标事件不能在此函数中调用？多
浏览 3提问于2020-07-14得票数 0
回答已采纳
1回答
未将文件上载设置为状态
javascript、reactjs、typescript、file-upload
我正在尝试实现一个文件上传按钮，然后将数据发送到API。由于输入字段不应该是可见的，只有按钮应该触发上传对话框，所以我已经这样实现了。
问题:文件没有设置为state，所以我不能通过onChange函数中的axios使用POST。
import React, { useState } from 'react';
import useAxios from 'axios-hooks';
export default function BusinessCalendar(props: Props): React.ReactElement {
const h
浏览 3提问于2021-05-31得票数 0
回答已采纳
3回答
在循环中解析所有承诺后返回值。
javascript、promise
给定这个ID数组：
var array = [1,2,3,4,5];
在循环中完成所有其他调用之后，我如何返回承诺？
var deferred = $q.defer(),
result = [];
for (var i = 0; i < array.length; i++) {
var id = array[i];
Tools.remove(campaignID).then(function(result) {
浏览 9提问于2015-02-19得票数 1
回答已采纳
1回答
阻止表单数据在http请求后提交
javascript、jquery、ajax、promise
下面的代码阻止提交表单数据
$('#dataForm').submit(function (e) {
e.preventDefault();
});
我的问题是，如果有一个ajax调用需要时间才能得到响应，该如何实现这一点。因此，表单不会等到请求得到响应
$('#dataForm').submit(function (e) {
ajaxCallAsPromise().then(function (data){
if (data == true)
{
e.preventDefault(); //this will
浏览 8提问于2018-02-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
