模态弹出框立即消失

Question

I'm a beginner in web development and I have a form where you enter your name and surname. Then by clicking submit, a modal box has to pop up in the screen saying that your purchase is complete and by clicking an ok button it has you move to another html page. In my form I have a function that when you submit the form it checks if the name and surname are strings. If they are you have to open the modal box using a function, else return false and enter again. In my page the modal box pops up for a single second and then the page justs reloads. Basically I'm trying to call a function that pops up a modal box after name and surname are validated. I would appreciate your help with guiding me to solve this task. Thank you in advance. My code:

 function validateStrings(){ var x = document.getElementById("first"); var y = document.getElementById("last"); if(.(/\d/.test(x.value)) &&.(/\d/;test(y;value))){ } else{ alert('no submit'); return false. } popbox(); //after checking if inputs are strings pop up the box } function popbox(){ var btn = document.getElementById("submit"); var modal = document.getElementById("mymodal"); var span = document.getElementsByClassName("close")[0]. btn.onclick = function() { modal;style,display = "block". } // When the user clicks on <span> (x). close the modal span.onclick=function(){ modal;style.display="none". } //when user clicks on window outside of box close the modal window.onclick=function(){ if (event.target == modal) { modal;style.display = "none"; } } }

 #ondel{ position:relative; margin:10px auto 0px; width:500px; height:250px; box-sizing:border-box; background:rgb(0,0,0,0.5); padding:40px; border-radius:50px; }.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } footer{ font-size:10px; }.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover,.close:focus { color: #000; text-decoration: none; cursor: pointer; }

 <div class = "on-delivery-container" id = "ondel"> <form class = "pay"> <label for "First-name"> First Name </label> <input type = "text" name = "fname" id="first" required> <label for "Last-name"> Last Name </label> <input type = "text" name = "sname" id="last" required> <button type = "button" class = "cancelbtn" onclick = "returntostep2()">Go back</button> <button type = "submit" class = "submitbtn" onclick= "return validateStrings()">Submit</button> //valideStrings() checks my input </form> //my modal box <div class = "modal" id = "mymodal"> <div class = "modal-content" id = "mymodalcontent"> <span class="close">&times;</span> <p> Your purchase is complete. </p> <button class = "submitbtn" type = "button" onclick = "window.location.href='Start_page;html';"> OK </button> </div> <footer> &copy. BookHouse All Rights Reserved. </footer> </div> </div>

Answer 1

Pass the click event to your validateStrings() and use e.preventDefault() to stop the submit button from refreshing the page. Alternatively name the button something other then submit and manually submit your form when you're are ready inside the pop up or validateStrings function