[英]How to create a modal only if the required fields are filled out before submitting form
I am trying to make a modal appear thanking the user for submitting the form but only if they completely filled out all the required inputs. 我试图使模式出现,感谢用户提交表单,但前提是他们完全填写了所有必需的输入。 I like the built in required feature in HTML but currently both pop ups happen when the submit button is pressed. 我喜欢HTML内置的必需功能,但是当前两个弹出窗口均在按下“提交”按钮时发生。 I know an if else statement is required but cannot figure out how to show that the required field is satisfied in JS before popping up the modal. 我知道是否需要if else语句,但无法在弹出模式之前弄清楚如何显示JS中的必需字段是否满足。
<!-- THIS IS THE CONTACT FORM SECTION -->
<section class="contact-form">
<h1 class="uptop">CONTACT ME</h1>
<form method="get">
<input type="text" class = "name required" id="name" placeholder="NAME" required>
<input type="email" class="email required" id="email" placeholder="EMAIL" required>
<textarea id="message" class="message required" rows="5" cols="300" placeholder="MESSAGE"></textarea>
<input type="submit" class="submit" id="submit" value="Tell Me Something Good" >
</form>
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class ="modal-message">THANKS FOR THAT!</p>
</div>
</div
JavaScript: JavaScript的:
var modal = document.getElementById('myModal');
var btnSubmit = document.getElementById("submit");
var spanClose = document.getElementsByClassName("close")[0];
var requiredFields = document.getElementsByClassName("required").required;
btnSubmit.onclick = function() {
modal.style.display = "block";
}
spanClose.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I think this could help The innerHTML
will do the job 我认为这可以帮助innerHTML
胜任
function check(){ var name = document.getElementById('name').value; if(name!=''){ setStatus("Success"); }else{ setStatus("Error"); } } function setStatus(message){ var inputStatus = document.getElementById('msg'); inputStatus.innerHTML = message; }
<input id='name' name='name' /><span id="msg"></span> <button type="submit" onClick="check()">Send</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.