library_db/edit.html at main · owen666-sudo/library_db · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
  <title>Edit Book</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<body class="container mt-4">
  <h2>Edit Book</h2>
  <form id="editForm" enctype="multipart/form-data">
    <input type="text" name="book_title" class="form-control mb-3" placeholder="Book Title" required />
    <input type="text" name="author_name" class="form-control mb-3" placeholder="Author Name" required />

    <div class="mb-3 d-flex align-items-center">
      <label for="bookCover" class="form-label me-3 mb-0" style="min-width: 100px;">Book Cover</label>
      <input type="file" id="bookCover" name="book_cover" style="display:none;" />
      <button type="button" id="uploadBtn" class="btn btn-outline-secondary">Choose File</button>
      <span id="fileName" class="ms-2 text-muted">No file chosen</span>
    </div>

    <div class="mb-3">
      <select name="genre" class="form-select" required>
        <option value="" selected disabled>Select Genre</option>
        <option value="Fiction">Fiction</option>
        <option value="Non-Fiction">Non-Fiction</option>
        <option value="Science">Science</option>
        <option value="History">History</option>
        <option value="Biography">Biography</option>
        <option value="Technology">Technology</option>
        <option value="Other">Other</option>
      </select>
    </div>

    <input type="number" name="publication_year" class="form-control mb-3" placeholder="Publication Year" required />
    <input type="number" name="quantity" class="form-control mb-3" placeholder="Quantity" required />

    <button class="btn btn-primary">Update</button>
  </form>

  <script>
    // 文件上传按钮
    const fileInput = document.getElementById('bookCover');
    const uploadBtn = document.getElementById('uploadBtn');
    const fileNameSpan = document.getElementById('fileName');

    uploadBtn.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', () => {
      fileNameSpan.textContent = fileInput.files.length > 0 ? fileInput.files[0].name : 'No file chosen';
    });

    // 读取图书数据填充表单
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');

    fetch(`http://localhost:8000/library_project/books.php?id=${id}`)
      .then(res => res.json())
      .then(data => {
        for (const key in data) {
          const input = document.querySelector(`[name="${key}"]`);
          if (input) input.value = data[key];
        }
      });

    // 表单提交，PUT请求更新
    document.getElementById('editForm').addEventListener('submit', async function(e) {
      e.preventDefault();
      const formData = new FormData(this);

      const res = await fetch(`http://localhost:8000/library_project/books.php?id=${id}`, {
        method: 'PUT',
        body: formData
      });

      const result = await res.json();
      alert(result.status === 'success' ? 'Book updated!' : 'Update failed!');
      if (result.status === 'success') {
        window.location.href = 'index.html';
      }
    });
  </script>
</body>
</html>