[英]How to hide a div until a certain field(s) value is greater than nothing
So, what I want to accomplish here is to prevent people from entering the rest of the form until they focus on the first section by hiding the last section until the value of a certain field is greater than nothing. 因此,我要在此处完成的工作是通过隐藏最后一部分直到某个字段的值大于零,从而防止人们进入表格的其余部分,直到他们专注于第一部分为止。
Here is my HTML: 这是我的HTML:
<div class="fieldcontainer">
<label>E-mail:</label>
<input type="email" name="email" maxlength="100" id="email" required>
</div>
<br><br>
<div id="projectinformation" style="display:none">
<h3>Project Information</h3>
<div class="fieldcontainer">
<label>Project Name:</label>
<input type="text" name="project_name" maxlength="70" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Project Number:</label>
<input type="text" name="project_number" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Business Unit:</label>
<select name="business_unit" required>
<option>--Select--</option>
</select>
</div>
<br><br>
<div class="fieldcontainer">
<label>Project Address:</label>
<input type="text" name="address" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Number of users on site:</label>
<select id="numberofstaff">
<option class="staffselection" value="">--Select--</option>
<option class="staffselection" value="smalljobsite">1-3 staff</option>
<option class="staffselection" value="mediumjobsite">4-7 staff</option>
<option class="staffselection" value="largejobsite">8+ staff</option>
</select>
</div>
</div>
Here is my JS: 这是我的JS:
while (document.getElementById('email').value > ""){
document.getElementById('projectinformation').style.display = 'initial';
}
You'd probably want an event handler for that, and check the inputs value length, then show the rest of the form 您可能想要一个事件处理程序,并检查输入值的长度,然后显示表单的其余部分
document.getElementById('email').addEventListener('input', function() {
if ( this.value.length > 0 ) {
document.getElementById('projectinformation').style.display = 'block';
}
}, false);
or in jQuery 或在jQuery中
$('#email').on('input', function() {
if (this.value.length > 0) $('#projectinformation').show();
});
Here is jQuery solution: 这是jQuery解决方案:
$("#email").keyup(function() {
if($(this).val().length)
$('#projectinformation').show();
else
$('#projectinformation').hide();
});
If you want to validate if it is a valid email and then show the form, you can do this: ( https://stackoverflow.com/a/2855946/1845408 ): 如果要验证是否是有效的电子邮件然后显示该表格,可以执行以下操作:( https://stackoverflow.com/a/2855946/1845408 ):
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
$("#email").keyup(function() {
if(isValidEmailAddress($(this).val())) {
$('#projectinformation').show();
else
$('#projectinformation').hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.