时间戳

首页 > 解决方案 > 正确输入的表单提交显示新窗口

javascript - 正确输入的表单提交显示新窗口

问题描述

每当您提交具有正确值的表单但它没有打开时，我都会尝试打开一个窗口，您能帮我解决这个问题吗？我试过弄乱它尝试一些东西，但我就是无法让它工作。

<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');
            })
        }       
}

标签： javascripthtmlforms

解决方案

在下面的代码中，我们有一个表单。并且每当我们提交表单并且字段不为空时，它都会显示模态窗口。万一字段为空，它会显示一个警报窗口。

请注意，该按钮不会提交表单。相反，它只验证字段并显示模式窗口。如果要提交表单，可以添加document.forms("myForm").submit();脚本。

// 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>

推荐阅读