\u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n<\/title>\n<link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>\u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n<\/h1>\n <form id=\"registrationForm\">\n <label for=\"date\">Ng\u00e0y:<\/label>\n <input type=\"date\" id=\"date\" name=\"date\" required>\n <label for=\"participant\">Ng\u01b0\u1eddi tham gia:<\/label>\n <input type=\"text\" id=\"participant\" name=\"participant\" required>\n <button type=\"submit\">\u0110\u0103ng k\u00fd<\/button>\n <\/form>\n <p id=\"notification\"><\/p>\n <div id=\"registrations\">\n <h2>Danh s\u00e1ch \u0111\u0103ng k\u00fd<\/h2>\n <table>\n <thead>\n <tr>\n <th>Ng\u00e0y<\/th>\n <th>Ng\u01b0\u1eddi tham gia<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"registrationList\">\n <\/tbody>\n <\/table>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<style>body {\n font-family: Arial, sans-serif;\n}\n\nform {\n margin-top: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 5px;\n}\n\ninput {\n width: 100%;\n padding: 8px;\n margin-bottom: 10px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n width: 100%;\n margin-top: 20px;\n}\n\nth, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\n\nth {\n background-color: #f2f2f2;\n}\n\n<\/style>\n<script>const form = document.getElementById(\"registrationForm\");\nconst notification = document.getElementById(\"notification\");\nconst registrationList = document.getElementById(\"registrationList\");\n\nlet registrations = {};\n\nform.addEventListener(\"submit\", function(event) {\n event.preventDefault();\n\n const date = form.elements.date.value;\n const participant = form.elements.participant.value;\n\n if (!registrations[date]) {\n registrations[date] = [];\n }\n\n if (registrations[date].length >= 8) {\n notification.innerText = \"Ng\u00e0y n\u00e0y \u0111\u00e3 \u0111\u1ee7 8 ng\u01b0\u1eddi \u0111\u0103ng k\u00fd.\";\n return;\n }\n\n registrations[date].push(participant);\n notification.innerText = \"\";\n\n updateRegistrationList();\n addToGoogleSheets(date, participant); \/\/ G\u1ecdi h\u00e0m th\u00eam d\u1eef li\u1ec7u sau khi c\u1eadp nh\u1eadt danh s\u00e1ch\n});\n\nfunction updateRegistrationList() {\n registrationList.innerHTML = \"\";\n for (const date in registrations) {\n registrations[date].forEach(participant => {\n const row = document.createElement(\"tr\");\n const dateCell = document.createElement(\"td\");\n dateCell.innerText = date;\n const participantCell = document.createElement(\"td\");\n participantCell.innerText = participant;\n row.appendChild(dateCell);\n row.appendChild(participantCell);\n registrationList.appendChild(row);\n });\n }\n}\n\nfunction addToGoogleSheets(date, participant) {\n const spreadsheetId = 'YOUR_SPREADSHEET_ID'; \/\/ Thay b\u1eb1ng ID c\u1ee7a b\u1ea3ng t\u00ednh Google Sheets c\u1ee7a b\u1ea1n\n const apiKey = 'AIzaSyBEhfuSrNoM_RZS1ULL23F8RW-nJzHgC4A'; \/\/ Thay b\u1eb1ng API Key c\u1ee7a b\u1ea1n\n \n const values = [[date, participant]];\n const body = {\n values: values\n };\n \n fetch(`https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${1hIzAvDgcpD-90frAs38y9aj-PB1y6aDlx7MrMg6ch_8}\/values\/Sheet1?key=${AIzaSyBEhfuSrNoM_RZS1ULL23F8RW-nJzHgC4A}}\/values\/Sheet1?key=${AIzaSyBEhfuSrNoM_RZS1ULL23F8RW-nJzHgC4A}`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(body),\n })\n .then(response => response.json())\n .then(data => {\n console.log('D\u1eef li\u1ec7u \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o Google Sheets th\u00e0nh c\u00f4ng:', data);\n })\n .catch(error => {\n console.error('L\u1ed7i khi th\u00eam d\u1eef li\u1ec7u v\u00e0o Google Sheets:', error);\n });\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n \u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n Ng\u00e0y: Ng\u01b0\u1eddi tham gia: \u0110\u0103ng k\u00fd Danh s\u00e1ch \u0111\u0103ng k\u00fd Ng\u00e0y Ng\u01b0\u1eddi tham gia<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-3884","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/comments?post=3884"}],"version-history":[{"count":2,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3884\/revisions"}],"predecessor-version":[{"id":3887,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3884\/revisions\/3887"}],"wp:attachment":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/media?parent=3884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/categories?post=3884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/tags?post=3884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3884,"date":"2023-08-11T08:10:05","date_gmt":"2023-08-11T01:10:05","guid":{"rendered":"https:\/\/khoahocthethao.vn\/?p=3884"},"modified":"2023-08-11T08:23:40","modified_gmt":"2023-08-11T01:23:40","slug":"form-test","status":"publish","type":"post","link":"https:\/\/khoahocthethao.vn\/index.php\/2023\/08\/11\/form-test\/","title":{"rendered":"Form test"},"content":{"rendered":"\n\n\n\n\n\n\u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n<\/title>\n<link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>\u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n<\/h1>\n <form id=\"registrationForm\">\n <label for=\"date\">Ng\u00e0y:<\/label>\n <input type=\"date\" id=\"date\" name=\"date\" required>\n <label for=\"participant\">Ng\u01b0\u1eddi tham gia:<\/label>\n <input type=\"text\" id=\"participant\" name=\"participant\" required>\n <button type=\"submit\">\u0110\u0103ng k\u00fd<\/button>\n <\/form>\n <p id=\"notification\"><\/p>\n <div id=\"registrations\">\n <h2>Danh s\u00e1ch \u0111\u0103ng k\u00fd<\/h2>\n <table>\n <thead>\n <tr>\n <th>Ng\u00e0y<\/th>\n <th>Ng\u01b0\u1eddi tham gia<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"registrationList\">\n <\/tbody>\n <\/table>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<style>body {\n font-family: Arial, sans-serif;\n}\n\nform {\n margin-top: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 5px;\n}\n\ninput {\n width: 100%;\n padding: 8px;\n margin-bottom: 10px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n width: 100%;\n margin-top: 20px;\n}\n\nth, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\n\nth {\n background-color: #f2f2f2;\n}\n\n<\/style>\n<script>const form = document.getElementById(\"registrationForm\");\nconst notification = document.getElementById(\"notification\");\nconst registrationList = document.getElementById(\"registrationList\");\n\nlet registrations = {};\n\nform.addEventListener(\"submit\", function(event) {\n event.preventDefault();\n\n const date = form.elements.date.value;\n const participant = form.elements.participant.value;\n\n if (!registrations[date]) {\n registrations[date] = [];\n }\n\n if (registrations[date].length >= 8) {\n notification.innerText = \"Ng\u00e0y n\u00e0y \u0111\u00e3 \u0111\u1ee7 8 ng\u01b0\u1eddi \u0111\u0103ng k\u00fd.\";\n return;\n }\n\n registrations[date].push(participant);\n notification.innerText = \"\";\n\n updateRegistrationList();\n addToGoogleSheets(date, participant); \/\/ G\u1ecdi h\u00e0m th\u00eam d\u1eef li\u1ec7u sau khi c\u1eadp nh\u1eadt danh s\u00e1ch\n});\n\nfunction updateRegistrationList() {\n registrationList.innerHTML = \"\";\n for (const date in registrations) {\n registrations[date].forEach(participant => {\n const row = document.createElement(\"tr\");\n const dateCell = document.createElement(\"td\");\n dateCell.innerText = date;\n const participantCell = document.createElement(\"td\");\n participantCell.innerText = participant;\n row.appendChild(dateCell);\n row.appendChild(participantCell);\n registrationList.appendChild(row);\n });\n }\n}\n\nfunction addToGoogleSheets(date, participant) {\n const spreadsheetId = 'YOUR_SPREADSHEET_ID'; \/\/ Thay b\u1eb1ng ID c\u1ee7a b\u1ea3ng t\u00ednh Google Sheets c\u1ee7a b\u1ea1n\n const apiKey = 'AIzaSyBEhfuSrNoM_RZS1ULL23F8RW-nJzHgC4A'; \/\/ Thay b\u1eb1ng API Key c\u1ee7a b\u1ea1n\n \n const values = [[date, participant]];\n const body = {\n values: values\n };\n \n fetch(`https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${1hIzAvDgcpD-90frAs38y9aj-PB1y6aDlx7MrMg6ch_8}\/values\/Sheet1?key=${AIzaSyBEhfuSrNoM_RZS1ULL23F8RW-nJzHgC4A}}\/values\/Sheet1?key=${AIzaSyBEhfuSrNoM_RZS1ULL23F8RW-nJzHgC4A}`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(body),\n })\n .then(response => response.json())\n .then(data => {\n console.log('D\u1eef li\u1ec7u \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o Google Sheets th\u00e0nh c\u00f4ng:', data);\n })\n .catch(error => {\n console.error('L\u1ed7i khi th\u00eam d\u1eef li\u1ec7u v\u00e0o Google Sheets:', error);\n });\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n \u0110\u0103ng k\u00fd s\u1ef1 ki\u1ec7n Ng\u00e0y: Ng\u01b0\u1eddi tham gia: \u0110\u0103ng k\u00fd Danh s\u00e1ch \u0111\u0103ng k\u00fd Ng\u00e0y Ng\u01b0\u1eddi tham gia<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-3884","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/comments?post=3884"}],"version-history":[{"count":2,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3884\/revisions"}],"predecessor-version":[{"id":3887,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3884\/revisions\/3887"}],"wp:attachment":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/media?parent=3884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/categories?post=3884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/tags?post=3884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}