как заполнить таблицу текстовыми полями формы, используя jQuery?

Question

У меня есть две формы. Первая форма #form1 содержит два текстовых поля (месяц и год) и кнопку поиска. Вторая форма #form2 содержит таблицу.

Я хочу, когда я нажимаю на кнопку поиска, скрываю форму1 и показываю форму2, то есть хочу заполнить эту таблицу по годам и месяцам полей формы 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", они не будут показано на рисунке.