Question

我有两种形式。第一种形式#form1包含两个文本字段（月和年）和一个搜索按钮。第二种形式#form2包含一个表格。

我想当我单击按钮搜索时，隐藏form1并显示form2，表示要按表格1的字段的年和月填充此表。

index.balde.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row" id="form1">
        <div class="col-md-12">
            <div class=" col-md-10 col-md-offset-1">
                <div class="form-group col-md-3">
                    <label for="titre">Annee</label>
                </div>
                <div class="form-group col-md-5">
                    <input type="text" name="annee" id="annee" class="form-control">
                </div>
           </div>

           <div class=" col-md-10 col-md-offset-1">
               <div class="form-group col-md-3">
                   <label for="titre">Mois</label>
               </div>
               <div class="form-group col-md-5">
                   <input type="text" name="mois" id="mois" class="form-control">
               </div>
           </div>
           <div class="col-md-2 col-md-offset-5">
               <button class="btn btn-theme " type="submit" id="hide" >cherche</button>
           </div>
       </div>
       <div class="row" id="form2">
           <table id="example" class="table table-striped table-bordered" style="width:100%">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>year</th>
                       <th>month</th>
                   </tr>
               </thead>
               <tbody id="b">
                   @foreach($salaries as $salarie)
                   <tr>
                       <td>{{ $salarie->nom }}</td>
                       <td><input type="hidden" class='year' class="form-control" /></td>
                       <td><input type="hidden" class='month' class="form-control" /></td>
                   </tr>
                   @endforeach
               </tbody>
           </table>
       </div>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

jQuery

$(document).ready(function() { 
    $("#form2").hide();
    let now = new Date();
    let year = now.getFullYear();
    let month = ("0" + (now.getMonth() + 1)).slice(-2);
    $('#annee').val(year);
    $('#mois').val(month); 

    $("#hide").click(function(){
        $("#form2").show();
        $("#form1").hide();
        let annee = $("#annee").val();
        let mois = $("#mois").val();
        $('#year').val(annee);
        $('#month').val(annee); 
    });
});

Answer 1

在您提供的HTML代码中，#form2位于#form1内部。因此，隐藏#form1也会隐藏#form2。

此外，当您单击#hide按钮时，您正在选择带有$('#year')和$('#month')的表格单元，但是您应该按类别进行选择，因为您的输入是：

<td><input type="hidden" class='year' class="form-control" /></td>
<td><input type="hidden" class='month' class="form-control" /></td>

因此，满足以下条件：

$("#hide").click(function(){
    $("#form2").show();
    $("#form1").hide();
    let annee = $("#annee").val();
    let mois = $("#mois").val();
    $('.year').val(annee);
    $('.month').val(annee); 
});

还请注意，由于表输入具有type="hidden"，因此将不会显示它们。

如何使用jQuery使用表单的文本字段填充表格？

1 个答案: