[英]Hide/ unhide text fields based on user type using javascript?
加載表單頁面時,它會自動將用戶帳戶的類型從數據庫中提取到名為 check_type 的文本字段中。 我想根據用戶帳戶類型隱藏/取消隱藏文本字段。 如果是管理員帳戶,則顯示 textfield1,對於任何其他帳戶,鍵入 hide textfield1。
這是我寫的代碼; 但是,它不起作用。 也許,我使用了不正確的語法。
<?php
// Include config file
require_once "config.php";
$sql="SELECT * FROM users WHERE username = '$user' ";
$result = mysqli_query($mysqli,$sql);
while($row = mysqli_fetch_array($result)) {
$type = $row['acct_type'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hide/ Unhide</title>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var check_type = document.getElementById("check_type");
var atype = document.getElementById("atype");
if(check_type == 'Admin')
{
atype.style.display = "block";
}
else
{
atype.style.display = "none";
}
});
</script>
</head>
<body>
<form>
<div>
<input name="check_type" id="check_type" type="hidden" value="<?php echo $type; ?>">
</div>
<div class="form-group">
<label>Account Type</label>
<select type="text" name="atype" id="atype" class="form-control" value="<?php echo $atype; ?>">
<option value="<?php echo $atype; ?>" selected><?php echo $atype; ?></option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
<span></span>
</div>
<div>
<input type="submit" id="submit" value="Submit"/>
</div>
</form>
</body>
</html>
您需要檢查check_type的值。 但這取決於您用於 check_type 的元素類型。 如果它的輸入類型那么值,否則為innerHTML
更新
類型:管理員
$(document).ready(function() { // Input Type var check_type = document.getElementById("check_type"); var textfield1 = document.getElementById("atype"); if(check_type.value == 'Admin') { textfield1.style.display = "block"; } else { textfield1.style.display = "none"; } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div> <input name="check_type" id="check_type" type="hidden" value="Admin"> </div> <div class="form-group"> <label>Account Type</label> <select type="text" name="atype" id="atype" class="form-control"> <option value="User">User</option> <option value="Admin">Admin</option> </select> </div> <div> <input type="submit" id="submit" value="Submit"/> </div> </form>
類型:用戶
$(document).ready(function() { // Input Type var check_type = document.getElementById("check_type"); var textfield1 = document.getElementById("atype"); if(check_type.value == 'Admin') { textfield1.style.display = "block"; } else { textfield1.style.display = "none"; } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div> <input name="check_type" id="check_type" type="hidden" value="User"> </div> <div class="form-group"> <label>Account Type</label> <select type="text" name="atype" id="atype" class="form-control"> <option value="User">User</option> <option value="Admin">Admin</option> </select> </div> <div> <input type="submit" id="submit" value="Submit"/> </div> </form>
只需在您的 get 元素中添加值即可獲取元素值嘗試:
check_type.value
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var check_type = document.getElementById("check_type");
var textfield1 = document.getElementById("textfield1");
if(check_type.value == 'Admin')
{
textfield1.style.display = "block";
}
else
{
textfield1.style.display = "none";
}
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.