Comboboxes onsubmit更改给出结果但刷新javascript设置

时间:2014-11-27 06:15:33

标签: javascript jquery html css combobox

我的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可见?

2 个答案:

答案 0 :(得分:0)

您可以通过更改表单提交方式来实现此目的。不要提交整个页面,您可以使用ajax方式提交表单。 基本上,ajax是一种可以在不重新加载整个页面的情况下提交表单的方法。 这样,您选择的div将被保留。

Ajax参考:

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

http://api.jquery.com/jquery.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获取值并确定上次提交的内容来确定它。