我有一个模式，当你需要在我的web应用程序中报告一个单词时，它会弹出，看起来像这样。
我还有一个模态，在你按下提交按钮后会显示出来，并告诉你报告成功了。(两种模式均使用Bootstrap 5.0制作(
如果没有写单词，你就不能提交表单，因为提交需要文本输入，但是，即使文本输入中没有单词，第二个模态也会以任何方式出现(因为我也将其绑定在提交按钮上(。
经过一些研究，我认为解决这个问题的最好方法是禁用提交按钮，直到文本输入被填充，但我找到的都是jQuery答案，我不知道jQuery。
有JavaScript替代方案吗？我试图找到一些简单的东西，因为表单只有1个输入。
提前感谢，我正在阅读您对此的想法：(
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<div class="col-1"></div>
<h5 class="col-9 modal-title text-center" id="modalTitle">
⚠️ Reportar ⚠️
</h5>
<button
type="button"
class="btn-close col-1"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body text-center">
🗑️ ¿Sobra alguna palabra? ¡Envíamela para
eliminarla! 🗑️
</div>
<div class="row pb-4">
<div class="col"></div>
<div class="col-10">
<form
spellcheck="false"
method="POST"
action="/report"
id="reportForm"
>
<input
type="text"
required
autocomplete="off"
name="reportedWord"
maxlength="30"
class="form-control px-2 text-center"
/>
<button
type="submit"
class="form-control buttonhover mt-3"
data-bs-target="#reportConfirm"
data-bs-toggle="modal"
data-bs-dismiss="modal"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
class="bi bi-check-lg"
viewBox="0 0 16 16"
>
<path
d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
/>
</svg>
</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
</div>
</div>
<div
class="modal fade"
id="reportConfirm"
data-bs-backdrop="static"
tabindex="-1"
aria-labelledby="reportConfirm"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="col modal-title text-center" id="modalTitle">
❤️ Gracias por el Feedback
❤️
</h5>
</div>
<div class="modal-body text-center">
🚀 Tu reporte ha sido registrado correctamente
🚀
</div>
<div class="col"></div>
<div class="col-10"></div>
<div class="col"></div>
</div>
</div>
</div>
然后，我运行setTimeout，在提交后3秒刷新页面
let reportRedirect = function reportRedirect() {
window.setTimeout(function () {
location.href = "/";
}, 3000);
};
除了js代码，我没有更多的js，所有的前端都是用Bootstrap构建的。使用NodeJ和Express 处理后端
找到解决方案。删除了HTML文档中的引导模式切换，并编写了以下代码：
let reportRedirect = function reportRedirect() {
window.setTimeout(function () {
location.href = "/";
}, 3000);
};
let submitButton = document.getElementById("reportSubmit"); // Assign submit button to a variable
let ele = document.getElementById("reportForm"); // Assign form to a variable
// callback function that does :
// 1. Return the attributes who trigger the second modal to the button
// 2. Add a click() Since we have to click 2 times to display the second modal
// (the click user does just returns the attributes to the element)
// 3. refreshes the page after 3 seconds
let enableModal = function enableModal() {
submitButton.setAttribute("data-bs-toggle", "modal");
submitButton.setAttribute("data-bs-dismiss", "modal");
submitButton.click();
reportRedirect();
};
// this one (credits to @Unmitigated) checks for the submit event.
// if the form is submitted then we apply enableModal()
if (ele.addEventListener) {
ele.addEventListener("submit", enableModal, false); //Modern browsers
} else if (ele.attachEvent) {
ele.attachEvent("onsubmit", enableModal); //Old IE
}
改为收听表单上的submit事件。
document.querySelector('form').addEventListener('submit', function(e){
console.log('submitted, show success modal');
e.preventDefault(); // for demonstration
});<form>
<input type="text" required/>
<button>Submit</button>
</form>这取决于你是否在表单中，或者你是否有一个文本框和一个按钮
如果你有一张表格，你可以做的就是
<form onSubmit = "Submit_function();">
<input type="text" id = "form_text">
<button>Submit</button>
</form>
function Submit_function(){
if(document.getElementById('form_text') != ""){
//your code
}
else{
Alert("No text given");
}}
如果你有一个实际的按钮而不是一个表单，它看起来会非常相似，因为你基本上可以使用相同的方法，例如
<input type = "text" id = "text_input">
<button onClick = "Submit_function">
function Submit_function(){
if(document.getElementById('text_input') != ""){
//your code
}
else{
Alert("No text given");
}}
然而，你也可以使用其他方法，例如，当按下按钮时，你可以检查按钮是否是从javascript按下的，这将是
<form id = "form">
<input type="text" id = "form_text">
<button id = "Submit_button">Submit</button>
</form>
var submit_btn = document.getElementById("Submit_button");
submit_btn.addEventListner("click", function(){
if(document.getElementById('form_text') != ""){
//your code
}
else{
Alert("No text given");
}});
当然，就像我上面所做的那样，你可以将同样的方法应用于按钮，但它是不言自明的
<input type="text" id = "form_text">
<button id = "Submit_button">Submit</button>
var submit_btn = document.getElementById("Submit_button");
submit_btn.addEventListner("click", function(){
if(document.getElementById('form_text') != ""){
//your code
}
else{
Alert("No text given");
}});
然而，我不明白你为什么不使用表格，因为在这种情况下它要好得多。
找到了解决方案。删除了HTML文档中的引导模式切换，并编写了以下代码：
let reportRedirect = function reportRedirect() {
window.setTimeout(function () {
location.href = "/";
}, 3000);
};
let submitButton = document.getElementById("reportSubmit"); // Assign submit button to a variable
let ele = document.getElementById("reportForm"); // Assign form to a variable
// callback function that does :
// 1. Return the attributes who trigger the second modal to the button
// 2. Add a click() Since we have to click 2 times to display the second modal
// (the click user does just returns the attributes to the element)
// 3. refreshes the page after 3 seconds
let enableModal = function enableModal() {
submitButton.setAttribute("data-bs-toggle", "modal");
submitButton.setAttribute("data-bs-dismiss", "modal");
submitButton.click();
reportRedirect();
};
// this one (credits to @Unmitigated) checks for the submit event.
// if the form is submitted then we apply enableModal()
if (ele.addEventListener) {
ele.addEventListener("submit", enableModal, false); //Modern browsers
} else if (ele.attachEvent) {
ele.attachEvent("onsubmit", enableModal); //Old IE
}