text: Q:
  
  display two different forms using value from dropdown
  
  I want to display form 1 if drop down value selected is one and similarly display form 2 if drop down value selected is two . 
  I am using JS to do this. Here is the code .please HELP ME. 
  I am not aware of JQuery so please help me from basics if the solution is in 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>
  
  A:
  
  Here you can see a working snippet:
  
  $(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>
  
  