Как получить раскрывающийся список, чтобы сохранить его в базе данных

В своем html я создал таблицу и извлек данные из БД. Цель этой таблицы — предоставить мнение ученого для каждого ученика, поэтому я создал раскрывающийся список выбора для каждого типа школы с возможностью выбора разных мнений.

<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>BTS</th>
        <th>IUT</th>
        <th>Licence</th>
        <th>CPGE</th>
        <th>Ecole</th>
    </tr>
<!-- PHP CODE TO FETCH DATA FROM ROWS -->
<?php 
// LOOP TILL END OF DATA
while($rows=$result->fetchArray(SQLITE3_ASSOC))
{
?>
    <tr>
        <!-- FETCHING DATA FROM EACH
            ROW OF EVERY COLUMN -->
        <td><?php echo $rows['NOM'];?></td>
        <td><?php echo $rows['PRENOM'];?></td>
        <td><select name = "Avis" id = "avis_BTS" onchange = "change()">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
            </select>
        </td>
        <td><select name = "Avis" id = "avis_IUT" onchange = "change()">>
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
            </select>
        </td>
        <td><select name = "Avis" id = "avis_Licence" onchange = "change()">>
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
            </select>
        </td>
        <td><select name = "Avis" id = "avis_CPGE" onchange = "change()">>
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
            </select>
        </td>
        <td><select name = "Avis" id = "avis_Ecole" onchange = "change()">>
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
            </select>
        </td>
    </tr>
<?php
    }
?>
</table>

Я также создал файл сценария Java, но он не работает.

Импортировать в html

<!DOCTYPE html>
<html lang = "fr">
 
<head>
    <meta charset = "utf-8">
    <script type = "text/javascript" src = "script.js"></script>
    <title>Avis Terminales</title>

JS-файл

// Initialisation des variables
var avis = "";

// fonction pour bien montrer visuellement au professeur que e choix a été validé
function change() 
{
    if (document.getElementsByID("avis_BTS").value != ""){
        document.getElementById("avis_BTS").style.backgroundColor = "green";
    }
}

// Pour récuperer les avis et les mettres dans une variable pour chaque élève
function save() 
{
    //var avis_bts = document.getElementById("avis_BTS").value;
    // document.write(avis_bts);
    //document.write(5+6);

    let selection = document.getElementById('avis_BTS');
    if (selection.selectedIndex == 1){
        a = "Très Favorable";
    }
    else if (selection.selectedIndex == 2){
        a = "Favorable";
    }
    else{
        a = "Avis";
    }

    document.getElementById('reponse2').innerHTML = "hello";
}

На моей веб-странице ничего не изменилось

Идентификаторы должны быть уникальными, но с выходными данными, которые вы создаете в своем цикле, ваши идентификаторы не будут уникальными - так что это самое первое, что вам нужно исправить здесь.

— CBroe 04.04.2024 09:12

В консоли браузера нет ошибок? getElementsByID — опечатка!

— brombeer 04.04.2024 09:12

@CBroe, ты знаешь, как это исправить?

— moise_don't know 04.04.2024 09:13

@brombeer в консоли браузера ошибок нет, но спасибо, я исправил

— moise_don't know 04.04.2024 09:17

Немного сложно сказать, чего вы на самом деле хотите здесь достичь (и комментарии в коде на французском языке тоже не особо полезны). Прямо сейчас мы даже не можем увидеть, где будет вызываться эта save функция.

— CBroe 04.04.2024 09:20

@brombeer Да, это очень странно. Я думаю, что между моим браузером и моим кодом существует реальная проблема.

— moise_don't know 04.04.2024 09:21

Функция сохранения @CBroe предназначена для получения значений из таблицы и сохранения изменений для каждого ученика в базе данных. Функция вызывается при нажатии на кнопку «Валидер».

— moise_don't know 04.04.2024 09:24
javascript php html database sqlite
04.04.2024 09:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Делегирование поможет, если вам нужно обработать изменения при каждом выборе.

Как уже упоминалось, идентификаторы должны быть уникальными. Если вы удалите встроенное изменение, добавите thead и tbody и получите что-то вроде этого, идентификаторы не будут использоваться сценарием.

Если вы измените id на data-avisid, ваш HTML будет действительным, и вместо этого вы сможете получить avis, используя select.dataset.avisid. Альтернативно измените имена выбранных элементов, чтобы они соответствовали avis.

window.addEventListener('DOMContentLoaded', () => {
  const table = document.querySelector('table tbody');
  const rows = table.querySelectorAll('tr');
  table.addEventListener('change', (e) => { // on change of any select
    const tgt = e.target;
    if (!tgt.matches('select[name=Avis')) return; // not a select
    const avis = Array.from(rows).map(row => {
      const name = Array.from(row.querySelectorAll('td'))
        .slice(0, 2)
        .map(cell => cell.textContent)
        .join(', '); // name
      const avis = Array.from(row.querySelectorAll('select'))
        .map(select => ({ [select.dataset.avisid]: select.value }));
      return { "Nom": name, avis };
    });
    console.info(avis); // here you can AJAX the values
  });
});
<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Prénom</th>
      <th>BTS</th>
      <th>IUT</th>
      <th>Licence</th>
      <th>CPGE</th>
      <th>Ecole</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nom1</td>
      <td>Prenom1</td>
      <td>
        <select name = "Avis" data-avisid = "avis_BTS">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_IUT">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_Licence">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_CPGE">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_Ecole">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Nom2</td>
      <td>Prenom2</td>
      <td>
        <select name = "Avis" data-avisid = "avis_BTS">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_IUT">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_Licence">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_CPGE">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_Ecole">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Nom3</td>
      <td>Prenom3</td>
      <td>
        <select name = "Avis" data-avisid = "avis_BTS">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_IUT">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_Licence">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_CPGE">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
      <td>
        <select name = "Avis" data-avisid = "avis_Ecole">
          <option value = "">Avis</option>
          <option value = "TF">Très Favorable</option>
          <option value = "F">Favorable</option>
          <option value = "R">Réservé</option>
          <option value = "D">Défavorable</option>
        </select>
      </td>
    </tr>

  </tbody>
</table>

Тот же код, но с использованием кнопки отправки

window.addEventListener('DOMContentLoaded', () => {
  const table = document.querySelector('table tbody');
  const rows = table.querySelectorAll('tr');
  document.getElementById('avisForm').addEventListener('submit', (e) => { // submitting
    e.preventDefault(); // cancel the submit
    const avis = Array.from(rows).map(row => {
      const name = Array.from(row.querySelectorAll('td'))
        .slice(0, 2)
        .map(cell => cell.textContent)
        .join(', '); // name
      const avis = Array.from(row.querySelectorAll('select'))
        .map(select => ({ [select.name]: select.value }));
      return { "Nom": name, avis };
    });
    console.info(avis); // here you can AJAX the values
  });
});
<form id = "avisForm">
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>BTS</th>
        <th>IUT</th>
        <th>Licence</th>
        <th>CPGE</th>
        <th>Ecole</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Nom1</td>
        <td>Prenom1</td>
        <td>
          <select name = "BTS">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "IUT">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "Licence">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "CPGE">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "Ecole">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Nom2</td>
        <td>Prenom2</td>
        <td>
          <select name = "BTS">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "IUT">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "Licence">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "CPGE">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "Ecole">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Nom3</td>
        <td>Prenom3</td>
        <td>
          <select name = "BTS">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "IUT">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "Licence">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "CPGE">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
        <td>
          <select name = "Ecole">
            <option value = "">Avis</option>
            <option value = "TF">Très Favorable</option>
            <option value = "F">Favorable</option>
            <option value = "R">Réservé</option>
            <option value = "D">Défavorable</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
  <input type = "submit" value = "Sauvegarder" />
</form>
04.04.2024 09:20

Другие вопросы по теме

Вставить ссылку PHP в текстовое значение типа ввода
Скрытие наложенного платежа, если промежуточный итог меньше определенной суммы в WooCommerce, проблема со свойством «промежуточный итог»
SFTP в PHP с ключом
Получите длину массива, используя проверку закрытия
CakePHP 5 получает данные тела POST-запроса
Как сериализовать вложенный объект в Symfony
Используйте функцию PHP mail() при установке докера с помощью mailcatcher
Amazon S3 (PHP) Копирование файлов размером более 5 ГБ
Динамическое количество столбцов из строк в PHP
PHP проверяет, отображается ли имя файла страницы, если index.php эхо или ничего

Похожие вопросы

Как добавить динамическую защиту маршрута в angular из значения JSON?
Проверьте, существует ли текстовое поле в ячейке таблицы или нет
Я хочу получить продолжительность аудиофайла, используя nodejs
Стили не применяются при динамическом изменении classList
Невозможно перехватить событие FCM notificationclick в сервисном работнике, используя обмен сообщениями Firebase с Nuxt.js и Vue.js
Как добавить счетчик загрузки в MaterialUI DataTable, не задавая родительскому компоненту фиксированную высоту?
Преобразование 2d-массива в график
Добавляйте и удаляйте элементы в списке перетаскивания
Как отправить файл cookie на автономный сервер trpc
От getElementById до getElementsByClassName и получите тот же результат?