Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – How to show the table after i submitted the button

Im using laravel and i’ve done hide the table using css. After that, I’m use javascript to show table that I’m following… Here what i done so far:

function checkData() {
    var button = document.getElementById("submit");
    var table = document.getElementById("controlTable");

// Then, add an event listener to the button
    button.addEventListener("click", function() {
    // When the button is clicked, show the table
    table.style.display = "block";
    });
    return button;

#controlTable{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }} Page </title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body>
    @yield('body')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="{{asset('js/index.js') }}"></script>
</body>
</html>

<!-- Table Section -->
    <div class="row mt-3">
        <div class="col-12">
            <table class="table table-bordered border border-secondary" id="controlTable">
                <tr>
                    <th>Client Name</th>
                    <th>January</th>
                    <th>February</th>
                    <th>March</th>
                    <th>April</th>
                    <th>May</th>
                    <th>June</th>
                    <th>July</th>
                    <th>August</th>
                    <th>September</th>
                    <th>October</th>
                    <th>November</th>
                    <th>December</th>
                </tr>
                @foreach ($calculates as $calculate)
                <tr>
                    <td>{{ $calculate->client_candidate }}</td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                </tr>
                @endforeach
            </table>
        </div>
    </div>

When i try that, table even not showing. I’ve been following tutorial many times and i try but still not working. Now I’m stuck, i don’t know what is wrong in my code that. Please help me.

Tags:

2

Answers


  1. 0

    Remove display:none in your CSS, then add d-none in your table instead

    <table class="table table-bordered border border-secondary d-none" id="controlTable">

    This will give your table a display:none style because of bootstrap

    Next is use toggle in your element

    var table = document.getElementById("controlTable");
... // some code here
button.addEventListener("click", function() {
    table.classList.toggle("d-none");
});

    This will toggle/add・remove class "d-none" everytime button is clicked.

    Login or Signup to reply.
  2. 0

    You can add id on div which has table and display it none and add id on the submit button and show the table using jquery.

    <div class="col-12" id="table" style="display:none;">
  <button class="btn btn-warning" id="show" type="submit">LATE</button>
</div>
 <script>
    $("#show").click(function() {
        $("#table").show();
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search