Question

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

Answer 1

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

$(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>

使用下拉列表中的值显示两种不同的表单

1 个答案: