Input the latest data into the Bootstrap form

Question

Input the latest data into the Bootstrap form

Implementing the bootstrap4 framework in my web application, I have a table displaying various values. Each row includes an edit button at the end of the row (last column). The requirement is that when this edit button is clicked, a form should pop up with the existing data from that specific row, allowing the user to modify only the necessary fields. While I understand that JavaScript is needed to fill the text boxes within the form, I am unsure of the correct method to achieve this using the bootstrap4 framework.


      <div class="table-responsive">
          <table class="table table-hover table-dark">
            <thead>
              <tr>
                <th scope="col">Channel No</th>
                <th scope="col">Channel Name</th>
                <th scope="col">Description</th>
                <th scope="col">Recording Status</th>
                <th scope="col">Edit</th>
              </tr>
            </thead>
            <tbody>
              ...
            </tbody>
          </table>

This is the edit button


      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
        Edit
      </button>

This is the POP form(modal) for the edit button


      <div id="ModalLoginForm" class="modal fade">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  ...
              </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

javascript html css bootstrap-4

Answer 1

Answer №1

Presented below is a fully functional sample code, offering an enhanced and more dynamic solution tailored to your requirements. This code snippet demonstrates how you can leverage the native bootstrap jQuery function to display your modal when the "edit" button in your row is clicked.

You have the ability to monitor which button triggered the modal, enabling you to retrieve all relevant data using jQuery functions such as closest() and find()

Upon obtaining the necessary data from the respective row, you can then populate it into the input fields within the modal.

Furthermore, an additional feature has been incorporated where if the recording status is set to Y, the checkbox in the modal will be automatically checked; conversely, if it's set to N, the checkbox will remain unchecked.

Experience the Live Working Demo:

$("#ModalLoginForm").on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) //Button that triggered the modal

  // Extracting data
  var cId = button.closest('tr').find('th').text() //1st th
  var cName = button.closest('tr').find('th').next().text() //2nd th
  var cDesc = button.closest('tr').find('th').next().next().text() //3 th
  var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th

  // Applying the retrieved data
  $('[name="channelid"]').val(cId);
  $('[name="channel"]').val(cName);
  $('[name="description"]').val(cDesc);

  // Checking the checkbox status
  if (isRecord == 'Y') {
    $('[name="remember"]').prop('checked', true);
  } else {
    $('[name="remember"]').prop('checked', false);
  }
})

<!-- Incorporating the Latest Compiled and Minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Importing the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS Integration -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Utilizing the Latest Compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
  <table class="table table-hover table-dark">
    <thead>
      <tr>
        <th scope="col">Channel No</th>
        <th scope="col">Channel Name</th>
        <th scope="col">Description</th>
        <th scope="col">Recording Status</th>
        <th scope="col">Edit</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table entries with 'Edit' button -->
    </tbody>
  </table>
  <div id="ModalLoginForm" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <form role="form" method="POST" action="">
            <!-- Form Inputs for Channel Information -->
          </form>
        </div>
      </div>
      <!-- Ending the Modal Content Section -->
    </div>
    <!-- Closing the Modal Dialog Box -->
  </div>
  <!-- End of Modal Section-->

Answer 2

Presented below is a fully functional sample code, offering an enhanced and more dynamic solution tailored to your requirements. This code snippet demonstrates how you can leverage the native bootstrap jQuery function to display your modal when the "edit" button in your row is clicked.

You have the ability to monitor which button triggered the modal, enabling you to retrieve all relevant data using jQuery functions such as closest() and find()

Upon obtaining the necessary data from the respective row, you can then populate it into the input fields within the modal.

Furthermore, an additional feature has been incorporated where if the recording status is set to Y, the checkbox in the modal will be automatically checked; conversely, if it's set to N, the checkbox will remain unchecked.

Experience the Live Working Demo:

$("#ModalLoginForm").on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) //Button that triggered the modal

  // Extracting data
  var cId = button.closest('tr').find('th').text() //1st th
  var cName = button.closest('tr').find('th').next().text() //2nd th
  var cDesc = button.closest('tr').find('th').next().next().text() //3 th
  var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th

  // Applying the retrieved data
  $('[name="channelid"]').val(cId);
  $('[name="channel"]').val(cName);
  $('[name="description"]').val(cDesc);

  // Checking the checkbox status
  if (isRecord == 'Y') {
    $('[name="remember"]').prop('checked', true);
  } else {
    $('[name="remember"]').prop('checked', false);
  }
})

<!-- Incorporating the Latest Compiled and Minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Importing the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS Integration -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Utilizing the Latest Compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
  <table class="table table-hover table-dark">
    <thead>
      <tr>
        <th scope="col">Channel No</th>
        <th scope="col">Channel Name</th>
        <th scope="col">Description</th>
        <th scope="col">Recording Status</th>
        <th scope="col">Edit</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table entries with 'Edit' button -->
    </tbody>
  </table>
  <div id="ModalLoginForm" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <form role="form" method="POST" action="">
            <!-- Form Inputs for Channel Information -->
          </form>
        </div>
      </div>
      <!-- Ending the Modal Content Section -->
    </div>
    <!-- Closing the Modal Dialog Box -->
  </div>
  <!-- End of Modal Section-->

Answer 3

Answer №2

$(".table .btn-info").on("click", function(){ //applying to every .btn-info in every .table, consider creating a new class or id for your table
    var thContentFromClickedRow = $(this).closest("tr").find("th").html(); // copying data from the TH in the same ROW as the clicked button

    $('[name="channelid"]').val(thContentFromClickedRow); //selecting desired input by name and using .val to insert data
});

This code demonstrates how to easily retrieve inner HTML from a specific column in the same row where the button is clicked. For more in-depth knowledge, consider studying JavaScript/jQuery basics on platforms like W3Schools. This example uses jQuery due to the presence of Bootstrap.

Answer 4

$(".table .btn-info").on("click", function(){ //applying to every .btn-info in every .table, consider creating a new class or id for your table
    var thContentFromClickedRow = $(this).closest("tr").find("th").html(); // copying data from the TH in the same ROW as the clicked button

    $('[name="channelid"]').val(thContentFromClickedRow); //selecting desired input by name and using .val to insert data
});

This code demonstrates how to easily retrieve inner HTML from a specific column in the same row where the button is clicked. For more in-depth knowledge, consider studying JavaScript/jQuery basics on platforms like W3Schools. This example uses jQuery due to the presence of Bootstrap.

Input the latest data into the Bootstrap form

Answer №1

Answer №2

Similar questions

JavaScript: inscribe in a specific cell

What could be causing the data-price values of my alternative select options to not add up correctly when running this function?

Guide on debugging Express.js server code on Node with Visual Studio Code by Attaching to a live process

The CSS :lang() selector targets elements within documents that do not specify a particular language

"The incredible power of the spread operator in conjunction with EsLint

An error occurs when using e.slice function

Is it possible to automatically access the most recent Beta build through package.json and npm?

Glitch Uncovered in Excel Spreadsheet I Exported

Switch between various components using multiple buttons in Next.js

Identifying browser compatibility for date input type with Angular 2 and above

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

Have you not heard of the greatness of Selenium before?

Discovering a value that aligns with one of the values in an array using Javascript

Leveraging Handlebars Object within JavaScript

Ways to create a URL path that is not case-sensitive in NextJs using JavaScript

What could be the reason behind receiving an "undefined" message when attempting to access db.collection in the provided code snippet?

Avoid navigating through hidden tab indexes

html table displaying incorrect data while using dynamic data in vue 3

Html5 declares that the statuses of values are not defined

Creating a React table with customizable columns and rows using JSON data sources