Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 7-Bài 8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 19/2/2025, 1:56

Lượt xem: 412

Yêu cầu:

Giao diện

Tạo giao diện như sau:

Hướng dẫn

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery | NenTang.vn</title>

  <style>
    body {
      height: 100vh;
      background-color: #89d4cf;
      background-image: linear-gradient(315deg, #89d4cf 0%, #6e45e1 74%);
    }

    .watermark {
      color: #fff;
      text-align: center;
    }

    #frmGhiDanh {
      width: 700px;
      margin: 0 auto;
    }

    #frmGhiDanh #thongtinDonGian {
      border: 1px solid red;
      background-color: #f1dfd1;
      background-image: linear-gradient(315deg, #f1dfd1 0%, #f6f0ea 74%);
    }

    #frmGhiDanh .tblThongTinCaNhan {
      border-collapse: collapse;
      width: 100%;
      border-color: red;
    }

    #frmGhiDanh #thongtinPhucTap {
      border: 1px solid red;
      background-color: #ebbe9b;
      background-image: linear-gradient(315deg, #ebbe9b 0%, #e7a977 74%);
    }

    #frmGhiDanh .tblThongTinCaNhan {
      border-collapse: collapse;
      width: 100%;
      border-color: red;
    }

    #frmGhiDanh .tblThongTinCaNhan td {
      padding: 5px;
    }

    #frmGhiDanh .tieude {
      font-weight: bold;
      text-align: right;
    }

    #frmGhiDanh #txtSoThichCaNhan {
      width: 90%;
    }

    #frmGhiDanh #btnGoiDuLieu {
      padding: 10px;
      color: #fff;
      font-weight: bold;
      border: 1px solid #fff;
      background-color: #27ae60;
      cursor: pointer;
    }

    #frmGhiDanh #btnXoaTrangDuLieu {
      padding: 10px;
      color: #fff;
      font-weight: bold;
      border: 1px solid #fff;
      background-color: #e74c3c;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->

  <h1 class="watermark">Nền tảng Kiến thức | https://nentang.vn</h1>

  <form name="frmGhiDanh" id="frmGhiDanh" method="post" action="#">
    <fieldset id="thongtinDonGian">
      <h3 align="center">Các thành phần nhập liệu (controls/fields) đơn giản (text, textarea, select)</h3>
      <table border="1" class="tblThongTinCaNhan">
        <tr>
          <td class="tieude" width="150px">Họ tên</td>
          <td>
            <input type="text" name="txtHoTen" id="txtHoTen" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Địa chỉ</td>
          <td>
            <input type="text" name="txtDiaChi" id="txtDiaChi" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Ngày/tháng/năm sinh</td>
          <td>
            Ngày sinh
            <select name="slNgaySinh" id="slNgaySinh">
              <script>
                for (var i = 1; i <= 31; i++) {
                  document.write('<option value="' + i + '">Ngày ' + i + '</option>');
                }
              </script>
            </select>

            Tháng sinh
            <select name="slThangSinh" id="slThangSinh">
              <script>
                for (var i = 1; i <= 12; i++) {
                  document.write('<option value="' + i + '">Tháng ' + i + '</option>');
                }
              </script>
            </select>

            Năm sinh
            <select name="slNamSinh" id="slNamSinh">
              <script>
                var objNgayGioHienTai = new Date();
                var namHienTai = objNgayGioHienTai.getFullYear();
                for (var i = namHienTai; i >= 1900; i--) {
                  document.write('<option value="' + i + '">Năm ' + i + '</option>');
                }
              </script>
            </select>
          </td>
        </tr>
        <tr>
          <td class="tieude">Sở thích cá nhân</td>
          <td>
            <textarea name="txtSoThichCaNhan" id="txtSoThichCaNhan" rows="5"></textarea>
          </td>
        </tr>
      </table>
    </fieldset>
    <fieldset id="thongtinPhucTap">
      <h3 align="center">Các thành phần nhập liệu (controls/fields) (radio/checkbox) </h3>
      <table border="1" class="tblThongTinCaNhan">
        <tr>
          <td class="tieude" width="150px">Giới tính</td>
          <td>
            <!--
                            Quy định trong dữ liệu
                            - 0: Nam
                            - 1: Nữ
                        -->
            <label><input type="radio" name="rdGioiTinh" id="rdGioiTinh_1" value="0" /> Nam </label>
            <br />
            <label><input type="radio" name="rdGioiTinh" id="rdGioiTinh_2" value="1" /> Nữ </label>
          </td>
        </tr>
        <tr>
          <td class="tieude">Đăng ký môn học</td>
          <td>
            <!--
                            Quy định trong dữ liệu
                            - W1: Khóa học Web căn bản HTML, CSS, JS
                            - W2: Khóa học Web nâng cao MySQL, PHP
                            - TD1: Khóa học Tư duy Giải thuật
                        -->
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_1" value="W1" /> Khóa học Web căn bản HTML,
              CSS, JS </label>
            <br />
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_2" value="W2" /> Khóa học Web nâng cao MySQL,
              PHP </label>
            <br />
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_3" value="TD1" /> Khóa học Tư duy Giải thuật
            </label>
          </td>
        </tr>
      </table>
    </fieldset>
    <center>
      <input type="button" name="btnGoiDuLieu" id="btnGoiDuLieu" value="Gởi dữ liệu" />
      <input type="reset" name="btnXoaTrangDuLieu" id="btnXoaTrangDuLieu" value="Xóa trắng dữ liệu" />
    </center>
  </form>

  <!-- Phần trình bày Giao diện HTML - END -->



  <!-- Phần xử lý code JavaScript - START -->
  <!-- Nên viết tất cả các đoạn xủ lý JavaScript vào phần cuối trang, trước khi đóng thẻ <body> là cách viết tốt nhất -->
  <!-- Liên kết thư viện Jquery -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- Viết code Jquery -->
  <script>
    // Tìm đối tượng (element) nào đó => yêu cầu thực thi Hành động gì đó (Action)
    // Cú pháp Jquery
    // $(selector).action();

    // Yêu cầu tiến trình Javascript đợi HTML render (vẽ ra giao diện) xong
    // -> JS mới thực thi
    $(document).ready(function (e) {

      // Hàm kiểm tra thông tin
      function kiemtrathongtin() {
        // 1. Thu thập các thông tin từ các thành phần nhập liệu (controls/fields) đơn giản (text, textarea, select) 
        var hoten = $('#txtHoTen').val();
        var diachi = $('#txtDiaChi').val();
        var ngaysinh = $('#slNgaySinh').val();
        var thangsinh = $('#slThangSinh').val();
        var namsinh = $('#slNamSinh').val();
        var sothichcanhan = $('#txtSoThichCaNhan').val();

        // 2. Ghép thành chuỗi và hiển thị hộp thoại thông báo
        var thongtinthuthap_dongian =
          'Họ tên: ' + hoten + '\n'
          + 'Địa chỉ: ' + diachi + '\n'
          + 'Ngày sinh: ' + ngaysinh + '\n'
          + 'Tháng sinh: ' + thangsinh + '\n'
          + 'Năm sinh: ' + namsinh + '\n'
          + 'Sở thích cá nhân: ' + sothichcanhan + '\n';

        // Hiển thị thông báo cáo thông tin Đơn giản thu thập được
        alert(thongtinthuthap_dongian);

        // 3. Thu thập các thông tin từ thành phần nhập liệu phức tạp (controls/fields) (radio/checkbox)
        // 3.1. Thu thập thông tin từ RADIO
        var giaTriGioitinh = 0; // Giả sử là 0: Nam

        // Sử dụng cú pháp bộ selector để tìm
        // - Các thẻ input
        // - Có thuộc tính name="rdGioiTinh"
        // - Đang ở trạng thái :checked
        giaTriGioitinh = $('input[name="rdGioiTinh"]:checked').val();

        // 3.2. Thu thập thong tin từ CHECKBOX
        var danhsachMonHoc = [];
        // Sử dụng cú pháp bộ selector để tìm
        // - Các thẻ input
        // - Có thuộc tính name="chkMonHoc"
        // - Đang ở trạng thái :checked
        // Do checkbox có khả năng lựa chọn 1 hoặc nhiều tùy chọn, chúng ta cần phải sử dụng vòng lặp $.each
        // để duyệt qua các đối tượng (element) tìm được, và đưa giá trị vào mảng muon muốn
        $.each($('input[name="chkMonHoc"]:checked'), function(){
          danhsachMonHoc.push($(this).val());
        });

        // 4. Ghép thành chuỗi và hiể thị hộp thoại thông báo
        var thongtinthuthap_phuctap = 
          'Giới tính: ' + giaTriGioitinh + '\n'
          + 'Các môn học đã chọn: ' + danhsachMonHoc.join(', ');

        // Hiển thị thông báo cáo thông tin Phức tạp thu thập được
        alert(thongtinthuthap_phuctap);
      }

      // Nhờ JQUERY tìm đối tượng (element) có id="btnGoiDuLieu" để đăng ký sự kiện click
      $('#btnGoiDuLieu').click(function() {

        // Gọi hàm kiểm tra thông tin
        kiemtrathongtin();

      });
    });
  </script>
  <!-- Phần xử lý code JavaScript - END -->
</body>

</html>