Javascript 使用“值来自”下拉列表显示两个不同的窗体_Javascript_Html_Forms

Javascript 使用“值来自”下拉列表显示两个不同的窗体

javascript html forms

Javascript 使用“值来自”下拉列表显示两个不同的窗体,javascript,html,forms,Javascript,Html,Forms,如果选择的下拉值为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, ch

如果选择的下拉值为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>


$（'p select[name=asset\u sim]'）。更改（函数（）{
if（$（this）.val（）=='asset'）{
$（“#资产_形式”）.show（）；
}否则{
$（'sim#u form'）.show（）；
}
});
$（'p select[name=asset\u sim]'）。更改（函数（）{
if（$（this）.val（）=='sim'）{
$（'sim#u form'）.show（）；
}否则{
$（“#资产_形式”）.hide（）；
}
});
资产和SIM卡管理
输入资产详细信息
资产或Sim卡详细信息：
--选择一个选项--
输入资产详细信息
输入SIM卡详细信息

设备名
笔记本电脑
可移动的
数据卡
公司名称
型号
操作系统版本
提交
重置
类型
预付款的
后付费
Simcard号码
服务提供商
提交
重置
$（文档）.ready（函数（）{
$（'#数据表示例'）。数据表({
回答：对
});
});

在这里，您可以看到一个工作片段：

$（文档）.ready（函数（）{
var选择器=$（“#形式选择器”）；
var last=null；
函数更新（）{
var selected=selector.val（）；
如果（最后）
$（#form#+last）.css（'display'，'none'）；
$（“#表单”+选中）。css（'display'，'block'）；
最后一个=已选择；
}
更新（）；
选择器。打开（“更改”，更新）；
});
表单{
显示：无；
}

1.
2.









一些评论，请清理代码，有很多不必要的信息。其次，html上面的代码不适用于下面的html，因为jquery是在编写html之前执行的。因此，要么将其放在html下面，要么添加$（document）.ready（function（））{谢谢，它正在工作。但是现在如果我想在数据库中存储相同的数据，那么我如何区分哪些数据是哪种形式的…在@Alekos answer中，您可以看到submit按钮有两个不同的值。提交时，数据也将发送到服务器。因此，您可以看到提交了哪种形式。