Form Submission with correct input displays new window

Question

I'm trying to open a window whenever you submit a form with the correct values but it's not opening, can you help me with this? I've tried messing around with it trying some stuff but I just can't get it to work.

<form>
        <div class="box">
            <input name="name" class="form-tag" placeholder="Name" disabled/>
            <input type="text" name="name" id="fullname" class="form-control" required/>
            <input type="email" name="email" class="form-tag" placeholder="Email" disabled/>
            <input type="email" name="email" id="emailaddress" class="form-control" required/>
            <div class="button">
                <button id="button" type="submit" class="btn btn-light btn-lg modal-button">Submit</button>
            </div>
        </div>
    </form>
        
        <div class="modal-bg">
            <div class="modal">
                <h5>congratulations!</h5>
                <span class="modal-close">x</span>
            </div>
         </div>

var modalButton = document.querySelector('.modal-button');
var modalBg = document.querySelector('.modal-bg');
var modalClose = document.querySelector('.modal-close');
            
document.getElementById("button").onsubmit = checkForm();
            
function checkForm(){
            
    if (document.getElementById('fullname').value == "" && document.getElementById('emailaddress').value == ""){
        return;
    }
    else{
        return modalButton.addEventListener('click',function(){
            modalBg.classList.add('bg-active');
        });
        modalClose.addEventListener('click',function(){
            modalBg.classList.remove('bg-active');
            })
        }       
}

Answer 1

In the below code, we have a form. And whenever we submit the form, and fields are not empty, it displays the modal window. Incase fields are empty it shows an alert window.

Please note that the button doesn't submit the form. Instead, it only validates the fields and displays the modal window. If you want to submit the form, you can add document.forms("myForm").submit(); in your script.

 // Get the modal var modal = document.getElementById("myModal"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal document.getElementById("button").onclick = function() { if(document.getElementById("fullname").value === "" || document.getElementById("emailaddress").value === ""){ alert("Fields Empty"); }else{ modal.style.display = "block"; //Display modal if fields has some value } return false; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

 body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */.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 */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

 <html> <head> </head> <body> <h2>Please fill out the form</h2> <form id="myForm"> <div class="box"> <label for="fullname" class="form-tag" >Name:</label> <input type="text" name="name" id="fullname" class="form-control" required/></br> <label for="email" class="form-tag" >Email:</label> <input type="email" name="email" id="emailaddress" class="form-control" required/></br> <div class="button"> <button id="button" class="btn btn-light btn-lg modal-button">Submit</button> </div> </div> </form> <;-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Congrats!!</p> </div> </div> </body> </html>

Form Submission with correct input displays new window

Question

1 answers

solution1
0 2020-07-29 11:45:18

Form Submission with correct input displays new window

Question

1 answers

solution1 0 2020-07-29 11:45:18

solution1
0 2020-07-29 11:45:18