英文:
Action on document.getElementById is not redirecting me to created upload link
问题
我有一个HTML页面，用户可以选择文件并通过点击提交按钮将它们上传到一个URL。这个按钮将用户重定向到URL，同时也将文件提交到URL。然而，目前我的页面没有重定向到上传的URL，而是保持在原始HTML页面上，没有提交任何内容。我在考虑是否移除submitForm中的e.preventDefault和return false，但它们是必需的，否则代码无法正常运行。我该怎么办？
HTML代码片段：
<form method="post" enctype="multipart/form-data" id="finalsubmit" onsubmit="submitForm(event)">
<label for="myfile"><strong>选择要上传的文件：</strong></label>
<input class="choosebutton" type="file" id="myfile" name="filename"><br>
<input class="uploadbutton" type="submit" onclick="finalSubmission()" value="上传文件">
</form>
JavaScript代码片段：
async function finalSubmission() {
const accessKey = await assignSas(); // 开发密钥的函数
let urlFinal = "https://<upload-link>" + "?accesskey=" + accessKey;
document.getElementById("finalsubmit").action = urlFinal;
}
async function submitForm(e) {
e.preventDefault();
await Promise.resolve();
return false;
}
如果您需要进一步的帮助，请告诉我。
英文:
I have an HTML page where users choose files and upload them to a URL through pressing a submit button. This button redirects the user to the URL while also submitting the file to the URL. Currently, however, my page is not redirecting to the upload URL and only stays on the original HTML page, not submitting anything. I was considering removing e.preventDefault and return false from submitForm however they are needed for the code to function. What should I do?
HTML snippet:
<form method = "post" enctype="multipart/form-data" id = finalsubmit onsubmit = "submitForm(event)">
<label for = "myfile"><strong>Select a file to be uploaded:</strong></label>
<input class = choosebutton type = "file" id = "myfile" name = "filename"><br>
<input class = uploadbutton type = "submit" onclick="finalSubmission()" value = "Upload File">
</form>
Javascript snippet:
async function finalSubmission () {
const accessKey = await assignSas(); // function to develop key
let urlFinal = "https://<upload-link> + "?accesskey=" + accessKey;
document.getElementById("finalsubmit").action = urlFinal;
}
async function submitForm(e) {
e.preventDefault();
await Promise.resolve();
return false
}
答案1
得分: 1
当你使用onclick调用这些函数时，它不会等待这些函数执行完毕。因此，如果你使用异步代码来更改表单的action，那么在完成之前表单就会被提交。
使用e.preventDefault()只是阻止表单自动提交。
你应该做的是更新action，然后显式调用form.submit()。你可以在一个函数中完成所有这些操作。
async function finalSubmission(e) {
e.preventDefault();
const accessKey = await assignSas(); // 用于生成密钥的函数
let urlFinal = `https://<upload-link>?accesskey=${accessKey}`;
e.target.action = urlFinal;
e.target.submit();
}
<form method="post" enctype="multipart/form-data" id="finalsubmit" onsubmit="finalSubmission(event)">
<label for="myfile"><strong>选择要上传的文件：</strong></label>
<input class="choosebutton" type="file" id="myfile" name="filename"><br>
<input class="uploadbutton" type="submit" value="上传文件">
</form>
希望这有帮助。
英文:
When you call the functions with onclick it doesn't await the functions. So if you use asynchronous code to change the action of the form, the form will be submitted before it finishes.
Using e.preventDefault() just prevents the form from being submitted automatically at all.
What you should do is update the action and then call form.submit() explicitly. You can do it all in one function.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
async function finalSubmission(e) {
e.preventDefault();
const accessKey = await assignSas(); // function to develop key
let urlFinal = `https://<upload-link>?accesskey=${accessKey}`;
e.target.action = urlFinal;
e.target.submit();
}
<!-- language: lang-html -->
<form method="post" enctype="multipart/form-data" id="finalsubmit" onsubmit="finalSubmission(event)">
<label for="myfile"><strong>Select a file to be uploaded:</strong></label>
<input class="choosebutton" type="file" id="myfile" name="filename"><br>
<input class="uploadbutton" type="submit"" value="Upload File">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论