Блог

Главная - Вопросы по программированию - Как мне подключить , и слайдер к кнопке в HTML?

Как мне подключить , и слайдер к кнопке в HTML?

#html

#HTML

Вопрос:

Мне нужно подключить тег, три тега и a, который содержит ползунок, к a, который подключен к базе данных.

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

Вот форма, в которой пользователь вводит свои точки:

  <form id="pointsform">
    Points:<input type="number">
    </form>

Затем я прошу пользователя выбрать тему:

 <select id="subject-selection">
  <option value="Math">Math</option>
  <option value="Physics">Physics</option>
  <option value="Chemistry">Chemistry</option>
  <option value="English">English</option>
</select>

Затем они выбирают год:

 <select id="year-selection">
  <option value="2019">2019</option>
  <option value="2018">2018</option>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
</select>

Затем они выбирают сезон:

 <select id="season-selection">
  <option value="Spring">Kevät</option>
  <option value="Fall">Syksy</option>
</select>

Затем они могут выбрать значение из ползунка:

 <div class="slidecontainer">
    <p id="slider">How strictly did your teacher grade:</p>
    <input type="range" min="1" max="100" value="50">

Под всем этим есть кнопка:

 <button id="compare-button">Compare</button>

Я хотел бы подключить все введенные пользователем ответы к кнопке, поэтому, когда я нажимаю на кнопку, она взаимодействует с базой данных.

Ответ №1:

Вам просто нужно обернуть все в одну форму, подобную этой:

 <form id="pointsform">
    <input type="number">
    <select id="subject-selection">
        <option value="Math">Math</option>
        <option value="Physics">Physics</option>
        <option value="Chemistry">Chemistry</option>
        <option value="English">English</option>
    </select>
    <select id="year-selection">
        <option value="2019">2019</option>
        <option value="2018">2018</option>
        <option value="2017">2017</option>
        <option value="2016">2016</option>
    </select>
    <select id="season-selection">
        <option value="Spring">Kevät</option>
        <option value="Fall">Syksy</option>
    </select>
    <div class="slidecontainer">
        <p id="slider">How strictly did your teacher grade:</p>
        <input type="range" min="1" max="100" value="50">
    </div>
    <input type="submit" value="Compare">
</form>

Комментарии:

1. Спасибо! Но теперь, когда я нажимаю на кнопку, ничего не происходит. Как я могу заставить кнопку взаимодействовать с базой данных, используя предоставленную пользователем информацию?

2. @JukkaK18 Пожалуйста, отметьте этот ответ как принятый и не стесняйтесь задавать новый вопрос о вашем новом запросе (взаимодействие с базой данных) на сайте, но я бы посоветовал вам изучить jQuery и AJAX и попробовать это самостоятельно, прежде чем обращаться за помощью.

Ответ №2:

Поместите все элементы управления формой внутри <form> элемента, а не только <input type="number"> .

Метки: ,