我的html页面有3个按钮,点击事件显示各自隐藏的div格式。按钮的html为:
<button id="edituser" type="submit" onclick="toggle_visibility('c');" style="border:0;width:100px;margin-left: 74px;">
<img src="images/edituser.png" alt="">
</button><br><br>
<button id="companyprofile" type="submit" onclick="toggle_visibility('d');" style="border:0;width:100px;margin-left: 74px;">
<img src="images/companyprofile.png" alt="">
</button><br><br>
<button id="checkticket" type="submit" onclick="toggle_visibility('e');" style="border:0;width:100px;margin-left: 74px;">
<img src="images/checkticket.png" alt="">
</button><br><br>
点击这些按钮使用这个js代码,我们可以选择html div。
function toggle_visibility(id) {
var e = document.getElementById(id);
if(document.getElementById("c").id == id)
{
e.style.display = 'block';
document.getElementById("a").style.display='none';
document.getElementById("b").style.display='none';
document.getElementById("g").style.display='none';
document.getElementById("d").style.display='none';
document.getElementById("e").style.display='none';
document.getElementById("f").style.display='none';
document.getElementById("edituser").style.backgroundImage="url('images/edit_user_hover.png')";
}
if(document.getElementById("d").id == id)
{
e.style.display = 'block';
document.getElementById("a").style.display='none';
document.getElementById("b").style.display='none';
document.getElementById("c").style.display='none';
document.getElementById("g").style.display='none';
document.getElementById("e").style.display='none';
document.getElementById("f").style.display='none';
document.getElementById("companyprofile").style.backgroundImage="url('images/edit_company_hover.png')";
}
if(document.getElementById("e").id == id)
{
e.style.display = 'block';
document.getElementById("a").style.display='none';
document.getElementById("b").style.display='none';
document.getElementById("c").style.display='none';
document.getElementById("g").style.display='none';
document.getElementById("d").style.display='none';
document.getElementById("f").style.display='none';
document.getElementById("checkticket").style.backgroundImage="url('images/Check_ticket_hover.png')";
}
div的html如下:
<div class="col-lg-6" style="display:none" id="c" >
<form action="" method="post" name="Country_Filter" id="Country_Filter" >
<select name="id" id="id" class="span2" style="width:150px;" onchange="disp_div()" onchange="this.form.submit();" >
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "v";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$age = array();
$sql = "SELECT * FROM `tbl_user` ";
$result = mysqli_query($conn, $sql);
// echo "User name=" . $row["name"]. "<br>";
?>
<option value="">-select user-</option>
<?php if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$age[] = $row;
}
?>
<?php foreach($age as $key=>$row) {
echo "<option value='" . $row['id'] . "' " . (($_REQUEST['id'] == $row['id']) ? "selected": "") . ">" . $row["id"] . "</option>";
?>
<?php }
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
header('Location: webservices.php');
}
mysqli_close($conn);
?>
</select>
<form id="aa" action="" method="GET" >
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "v";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$age = array();
if(isset($_REQUEST['id'])){
$sql = "SELECT first_name ,last_name, phone, company_id, register_on FROM `tbl_user` where id=".$_REQUEST['id'] ." ";
$result = mysqli_query($conn, $sql);
// echo "User name=" . $row["name"]. "<br>";
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$age[] = $row;
?>
<br><br>
<br>
<input type="text" id="first_name" value="<?php echo $row["first_name"]; ?>" name="first_name" style="width: 460px;height: 50px;overflow: hidden;" placeholder="First Name*">
<br>
<br><br><br>
<input type="text" id="last_name" value="<?php echo $row["last_name"]; ?>" name="last_name" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Last Name*">
<br><br><br><br>
<input type="text" id="phone" value="<?php echo $row["phone"]; ?>" name="phone" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Phone*">
<br><br><br><br>
<input type="text" id="company_id" value="<?php echo $row["company_id"]; ?>" name="company_id" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Company ID*">
<br><br><br><br>
<input type="text" id="register_on" value="<?php echo $row["register_on"]; ?>" name="register_on" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Register On*">
<br><br><br><br>
<button name="edituser" id="edituser" type="submit" style="border:0;width:100px;margin-left: 45px;" >
<img src="images/save.png" alt="">
</button>
<button type="submit" style="border:0;width:100px;margin-left: 75px;">
<img src="images/cancel.png" alt="">
</button>
<?php
}
}
}
mysqli_close($conn);
?>
</form>
</div>
<div class="col-lg-6" style="display:none" id="d" >
<form action="" id="abc" method="post" >
<select name="id" id="id" class="span2" style="width:150px;" onchange="this.form.submit();">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "v";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$age = array();
$sql = "SELECT * FROM `tbl_companies` ";
$result = mysqli_query($conn, $sql);
// echo "User name=" . $row["name"]. "<br>";
?>
<option value="">-select company-</option>
<?php if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$age[] = $row;
}
?>
<?php foreach($age as $key=>$row) {
echo "<option value='" . $row['id'] . "' " . (($_REQUEST['id'] == $row['id']) ? "selected": "") . ">" . $row["id"] . "</option>";
?>
<?php }
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
header('Location: webservices.php');
}
mysqli_close($conn);
?>
</select>
<br><br>
<br>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "v";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$age = array();
if(isset($_REQUEST['id'])){
$sql = "SELECT company_name ,acess_code ,register_on FROM `tbl_companies` where id=".$_REQUEST['id'] ." ";
$result = mysqli_query($conn, $sql);
// echo "User name=" . $row["name"]. "<br>";
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$age[] = $row;
?>
<br><br><br>
<input type="text" id="company_name" value="<?php echo isset($row["company_name"])?$row["company_name"]:''; ?>" name="company_name" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Company Name*">
<br>
<br><br><br>
<input type="text" id="acess_code" value="<?php echo isset($row["acess_code"])?$row["acess_code"]:''; ?>" name="acess_code" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Acess Code*">
<br><br><br><br>
<input type="text" id="register_on" value="<?php echo isset($row["register_on"])?$row["register_on"]:''; ?>" name="register_on" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Register On*">
<br><br><br><br>
<button name="editcompany" id="editcompany" type="submit" style="border:0;width:100px;margin-left: 45px;" >
<img src="images/save.png" alt="">
</button>
<button type="submit" style="border:0;width:100px;margin-left: 75px;">
<img src="images/cancel.png" alt="">
</button>
<?php
}
}
}
mysqli_close($conn);
?>
</form>
</div>
<div class="col-lg-6" style="display:none" id="e" >
<form action="" method="post" name="Country_Filter" id="Country_Filter" >
<select name="id" id="id" class="span2" style="width:150px;" onchange="this.form.submit();">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "v";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$age = array();
$sql = "SELECT * FROM `tbl_tickets` ";
$result = mysqli_query($conn, $sql);
// echo "User name=" . $row["name"]. "<br>";
?>
<option value="">-select tickets-</option>
<?php if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$age[] = $row;
}
?>
<?php foreach($age as $key=>$row) {
echo "<option value='" . $row['id'] . "' " . (($_REQUEST['id'] == $row['id']) ? "selected": "") . ">" . $row["id"] . "</option>";
?>
<?php }
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
header('Location: webservices.php');
}
mysqli_close($conn);
?>
</select>
</form>
<form action="" method="post" id="e" >
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "v";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$age = array();
if(isset($_REQUEST['id'])){
$sql = "SELECT ticket_no ,user_id ,ticket_status ,register_on FROM `tbl_tickets` where id=".$_REQUEST['id'] ." ";
$result = mysqli_query($conn, $sql);
// echo "User name=" . $row["name"]. "<br>";
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$age[] = $row;
?>
<br><br><br>
<input type="text" name="FirstName" value="<?php echo $row["ticket_no"] ;?>" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Ticket Owner Name*" readonly>
<br>
<br><br><br>
<input type="text" name="LastName" value="<?php echo $row["user_id"]; ?>" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Registration Date*" readonly>
<br><br><br><br>
<input type="text" name="LastName" value="<?php echo $row["ticket_status"]; ?>" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Expire Date*" readonly>
<br><br><br><br>
<input type="text" name="LastName" value="<?php echo $row["register_on"]; ?>" style="width: 460px;height: 50px;overflow: hidden;" placeholder="Expire Time Status*" readonly>
<br><br><br><br>
<button name="chkticketstatus" id="chkticketstatus" type="submit" style="border:0;width:100px;margin-left: 45px;">
<img src="images/save.png" alt="">
</button>
<button type="submit" style="border:0;width:100px;margin-left: 75px;">
<img src="images/cancel.png" alt="">
</button>
<?php
}
}
}
mysqli_close($conn);
?>
</form>
</div>
我面临的问题是用户选择html div按钮点击使用功能(onclick =&#34; toggle_visibility(&#39; c&#39;);&#34;)组合框出现和值从组合框提交它刷新页面并加载默认div可见。如何在页面重新加载后使组合框提交值的html div可见?
答案 0 :(得分:0)
您可以通过更改表单提交方式来实现此目的。不要提交整个页面,您可以使用ajax方式提交表单。 基本上,ajax是一种可以在不重新加载整个页面的情况下提交表单的方法。 这样,您选择的div将被保留。
Ajax参考:
答案 1 :(得分:0)
确定! 如果您不想使用Ajax,可以在重新加载页面后调用 toggle_visibility()函数来实现此目的。
方法A:如果您不使用JQuery,可以通过将脚本标记放在html正文的底部来实现:
<html>
<head>...</head>
<body>
<div class="col-lg-6" style="display:none" id="c" >
<form action="" method="post" name="Country_Filter" id="Country_Filter" >
...
...
</form>
</div>
<script>
toggle_visibility('C'); // hence you can make the html div visible for which combo-box has submitted value after page reloads
</script>
</body>
</html>
方法B:如果您的网页上包含JQuery,只需将其放在您的java脚本文件中:
$(document).ready(function(){
toggle_visibility('C'); // hence you can make the html div visible for which combo-box has submitted value after page reloads
});
P.S:在这里你需要将div缩写传递给 toggle_visibility 函数。可以通过从db获取值并确定上次提交的内容来确定它。