i have a modal that pops up when you need to report a word in my web app, looks like this.
I also have a modal that shows up after you press the Submit button and tells you the report was made successfully. (both modals are made using Bootstrap 5.0)
You cant submit the form if no word is written, becouse text input is required in order to submit, however, even if there is no word inside the text input, the second modal will show up anyways (becouse i have it binded on the submit button aswell).
After some research, i think the best way to solve this is to disable the submit button until text input is filled, but all i find are jQuery answers and i do not know jQuery.
Any JavaScript alternatives? I am trying to find something simple since the form only haves 1 input.
Thanks in advance, i am reading with atention your thoughts about this :)
<div >
<div >
<div >
<div ></div>
<h5 id="modalTitle">
⚠️ Reportar ⚠️
</h5>
<button
type="button"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div >
🗑️ ¿Sobra alguna palabra? ¡Envíamela para
eliminarla! 🗑️
</div>
<div >
<div ></div>
<div >
<form
spellcheck="false"
method="POST"
action="/report"
id="reportForm"
>
<input
type="text"
required
autocomplete="off"
name="reportedWord"
maxlength="30"
/>
<button
type="submit"
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"
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 ></div>
</div>
</div>
</div>
</div>
<div
id="reportConfirm"
data-bs-backdrop="static"
tabindex="-1"
aria-labelledby="reportConfirm"
aria-hidden="true"
>
<div >
<div >
<div >
<h5 id="modalTitle">
❤️ Gracias por el Feedback
❤️
</h5>
</div>
<div >
🚀 Tu reporte ha sido registrado correctamente
🚀
</div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</div>
Then, i am running a setTimeout to refresh the page after 3 seconds from submitting
let reportRedirect = function reportRedirect() {
window.setTimeout(function () {
location.href = "/";
}, 3000);
};
Besides that js code, i have no more JS, all the front end is built with Bootstrap. Backend is handled using NodeJs and Express
Found the solution. Removed Bootstrap modal togglers in the HTML document and wrote this code:
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
}
CodePudding user response：
Listen to the submit event on the form instead.
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>CodePudding user response：
well it depends if your in a form or if you have a text box and a button
if you had a form what you could do is
<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");
}}
if you were to have an actual button rather than a form it would look very similar as you could basically use the same method, for example
<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");
}}
there are other methods you could use however for example instead of running the function when the button is pressed you could be checking if the button is pressed from javascript which would be
<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");
}});
of course like I did above you could apply the same to a button but it's pretty self explanatory
<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");
}});
however I don't see why you wouldn't use a form as it is way better in this case.
CodePudding user response：
Found the solution. Removed Bootstrap modal togglers in the HTML document and wrote this code:
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
}