表单提交之前，我可以改变HTML

Question

我试图阻止表单自动提交，然后使用JavaScript用文本替换表单，告诉用户服务器正在处理表单，并在服务器上的'post'路由中的回调中，用户在一些处理完成后收到来自表单的信息发送到结果页面。但是在span出现在HTML中之前，表单已经提交，页面正在等待服务器的响应。如果我插入一个超时函数，我可以强制span元素在提交表单之前出现，但必须有更好的方法来做到这一点。我尝试使用async await .then()，但也没有工作-也许加载跨度不能完成渲染之前提交的形式?——谢谢

HTML和JS:

var proc = async () => {
var form = document.getElementById('form');
form.style.display = 'none';
var span = document.getElementById('testSpan');
span.style.display = 'block';
//using this timeout I can get the span element to appear
//window.setTimeout(() => {
//document.getElementById('form').submit()
//}, 500);
}
var btn = document.getElementById('submitBTN');
btn.addEventListener('click', async () => {
await proc().then(document.getElementById('form').submit());
})

<span style='display : none' id="testSpan">processing...</span>
<form method="POST" action="/submit-form" id="form" onsubmit="event.preventDefault();">
<input required id="linkInput" type="text" name="name" />
<input id='submitBTN' type="button" value="Submit"/>
</form>

Answer 1

如果您希望在发送到服务器之后和显示结果页面之前继续处理，Ajax是最简单的方法。通常，人们宁愿在发布之前进行预处理，然后让服务器几乎立即初始化一个新页面。

无论如何，在间隔中，要在运行进程或预处理期间呈现任何新的显示，您必须使该运行停止并继续。最简单的方法是使用技巧setTimeout的0毫秒:你修改你想要显示的，做一个setTimeout的剩余进程和结束主进程;有点像:

// Change to display
form.style.display = 'none';
span.style.display = 'block';
// Put the remain of process as an after rendering
setTimeout( () => {
// remaining process
}, 0 );
// End of main process, so the browser renders

如果你想让多次渲染在此过程中，我建议你在这里找到一个更完整的答案。

Answer 2

使用async和await不会让事情变成承诺。你必须返回一个承诺才能使用一个承诺。

在您的cause中，您仍然必须使用超时。最后，这与在超时时调用submit并没有什么不同。

var proc = async() => {
document.body.classList.add("submitting");
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 500);
});
}
var btn = document.getElementById('submitBTN');
btn.addEventListener('click', () => {
proc().then(() => document.getElementById('form').submit());
})

#testSpan,
.submitting form {
display: none;
}

.submitting #testSpan {
display: block;
}

<span id="testSpan">processing...</span>
<form method="POST" action="/submit-form" id="form" onsubmit="event.preventDefault();">
<input required id="linkInput" type="text" name="name" />
<input id='submitBTN' type="button" value="Submit" />
</form>