2015-07-13 74 views
-1

如果選擇的下拉值是1,我想要顯示錶格1,如果選擇的下拉值是2,則同樣顯示錶格2。使用下拉值顯示兩種不同的形式

我正在使用JS來做到這一點。這裏是代碼。請幫助我。

我不知道的jQuery,請幫我從基礎知識,如果解決方案是JQuery的

<!DOCTYPE html> 
    <!-- 
    To change this license header, choose License Headers in Project Properties. 
    To change this template file, choose Tools | Templates 
    and open the template in the editor. 
    --> 
    <html> 
     <head> 
      <meta charset="UTF-8"> 
      <title></title> 
      <link rel="stylesheet" type="text/css" href="asset_sim.css"> 
      <script> 
       $('p select[name=asset_sim]').change(function() { 
        if ($(this).val() == 'asset') { 
         $('#asset_form').show(); 
        } else { 
         $('#sim_form').show(); 
        } 
       }); 


       $('p select[name=asset_sim]').change(function() { 
        if ($(this).val() == 'sim') { 
         $('#sim_form').show(); 
        } else { 
         $('#asset_form').hide(); 
        } 
       }); 
      </script> 
     </head> 
     <body> 
      <?php 
      include 'header.php'; 
      include 'footer.php'; 
      include 'config.php'; 
      // 
      //if (isset($_POST['sub'])) { 
      // $username = filter_input(INPUT_POST, 'User_name'); 
      // $fullname = filter_input(INPUT_POST, 'Full_name'); 
      // $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); 
      // $roll = filter_input(INPUT_POST, 'role'); 
      // $contact = filter_input(INPUT_POST, 'contact_no'); 
      // 
      // 
      // if (($sql = $conn->prepare("insert into tmtool.user_master (Username,Full_name,Email,Role,Contact_no)" 
      //   . "values (?,?,?,?,?)")) == FALSE) { 
      //  echo "false"; 
      // } 
      // $sql->bind_param('sssss', $username, $fullname, $email, $roll, $contact); 
      // 
      // // 2nd query for execution 
      // 
      // if (($sql1 = $conn->prepare("insert into tmtool.login (Username,Password) values (?,?)")) == FALSE) { 
      //  echo "false"; 
      // } 
      // $sql1->bind_param('ss', $username, $tmppass); 
      // 


    //inserting userdetails into database 
      } 
      ?> 



      <div id="page-wrapper"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <h1 class="page-header">Assets and SIM Management</h1> 
        </div> 
       </div> 




       <div class="row"> 
        <div class="col-lg-12"> 
         <div class="panel panel-default"> 
<div class="panel-heading"> 
    <label>Enter Asset Details</label> 
</div> 
<div class="panel-body"> 
    <p>Asset or Sim details : 
     <select name="asset_sim" required="required"> 
      <option value="">-- Select an Option --</option> 
      <option value="asset">Enter Asset Details</option> 
      <option value="sim">Enter SIM Details</option> 

     </select> 
    </p> 

    <div class="dataTable_wrapper"> 
      <div id="asset_form"> 
     <form action="AssetMaster.php" method="POST" role="form"> 


       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Device Name</label> 
         <select name="device_name"> 

<option>Laptop</option> 
<option>Mobile</option> 
<option>Data Card</option> 
         </select> 
        </div> 




        <div class="form-group"> 
         <label>Company name</label> 
         <input class="form-control" name="company_name" type="text" id="company_name" required="required" placeholder="Enetr Company name" title="Please Enetr company name of Device"> 
        </div> 


        <div class="form-group"> 
         <label>Model Number</label> 
         <input class="form-control" name="Model_number" type="text" id="model_number" required="required" placeholder="Enetr Model number" title="Enter model number of Your Device "> 
        </div> 



        <div class="form-group"> 
         <label>OS version</label> 
         <input class="form-control" name="OS_version" required="required" id="Os-versionid" placeholder="Enter OS version detail" oninvalid="setCustomValidity('Enter OS version details')" onchange="try { 
     setCustomValidity('') 
    } catch (e) { 
    }"/> 
        </div> 
       </div> 

       <div class="col-lg-12"> 
        <button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button> 
        <button type="reset" class="btn btn-primary">Reset</button> 
       </div> 

     </form> 
       </div> 

    </div> 


    <div class="dataTable_wrapper"> 
      <div id="sim_form"> 
     <form action="AssetMaster.php" method="POST" role="form"> 


       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Type</label> 
         <select name="sim_type"> 
<option>Prepaid</option> 
<option>Postpaid</option> 
         </select> 
        </div> 

        <div class="form-group"> 
         <label>Simcard Number</label> 
         <input class="form-control" name="simcard_no" type="text" id="simcard_name" required="required" placeholder="Enetr Simcard Number" title="Please Enter Simcard Number"> 
        </div> 


        <div class="form-group"> 
         <label>Service Provider</label> 
         <input class="form-control" name="service_provider" type="text" id="service_provider" required="required" placeholder="Enter Service provider name" title="Enter Service provider name "> 
        </div> 




       </div> 
       <div class="col-lg-12"> 
        <button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button> 
        <button type="reset" class="btn btn-primary">Reset</button> 
       </div> 

     </form> 
        </div> 


    </div> 
</div> 

         </div> 


        </div> 
       </div> 
      </div> 

      <!-- jQuery --> 
      <!--<script src="../bower_components/jquery/dist/jquery.min.js"></script>--> 

      <!-- Bootstrap Core JavaScript --> 
      <!--<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>--> 

      <!-- Metis Menu Plugin JavaScript --> 
      <script src="../../bower_components/metisMenu/dist/metisMenu.min.js"></script> 

      <!-- DataTables JavaScript --> 
      <script src="../../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script> 
      <script src="../../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script> 

      <!-- Custom Theme JavaScript --> 
      <script src="../../dist/js/sb-admin-2.js"></script> 

      <!-- Page-Level Demo Scripts - Tables - Use for reference --> 
      <script> 
$(document).ready(function() { 
    $('#dataTables-example').DataTable({ 
     responsive: true 
    }); 
}); 
      </script> 
     </body> 
    </html> 
+0

一些評論,請清理代碼,有很多不必要的信息。其次,html上面的代碼不能用於下面的html,因爲jquery已經在html寫入之前執行了。因此,要麼你把它放在html下面,要麼你添加$(document).ready(function(){ – OSDM

+0

謝謝你正在工作。但是現在,如果我想在數據庫中存儲相同的數據,那麼我將如何區分哪些數據是其中... – yogi

+0

在@Alekos答案中,您可以看到提交按鈕有兩個不同的值,提交時也將數據發送到服務器,因此您可以看到提交的表單。 – OSDM

回答

0

在這裏你可以看到一個工作片段:

$(document).ready(function(){ 
 
    
 
    var selector = $("#form_selector"); 
 
    
 
    var last = null; 
 
    
 
    function update(){ 
 
     var selected = selector.val(); 
 

 
     if (last) 
 
      $("#form_" + last).css('display', 'none'); 
 
     
 
     $("#form_" + selected).css('display', 'block'); 
 
     last = selected; 
 
    } 
 
    
 
    update(); 
 
    
 
    selector.on("change", update); 
 
});
form { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="form_selector"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 

 
<hr> 
 

 
<form name="form" id="form_1"> 
 
    <input type="text" name="username" placeholder="Your Username"></input><br> 
 
    <input type="submit" value="Submit Form 1"></input><br> 
 
</form> 
 
    
 
<form name="form" id="form_2"> 
 
    <input type="email" name="email" placeholder="Your Email"></input><br> 
 
    <input type="submit" value="Submit Form 2"></input><br> 
 
</form>