Как добавить несколько выпадающих форм с помощью кнопки «Отправить», объедините значение и создайте другое html-имя страницы, чтобы перейти к ней - PullRequest
Новая
       1

Как добавить несколько выпадающих форм с помощью кнопки «Отправить», объедините значение и создайте другое html-имя страницы, чтобы перейти к ней

0 голосов
/ 03 ноября 2019

Я хочу, чтобы кнопка отправки действовала на объединенные значения в двух выпадающих меню в форме. Это будет имя html-страницы.

Например ... Запад и зима - другой варианткоторый создаст "westwinter.html", тогда west и summer - это другая опция, которая создаст "westsummer.html". и нажав кнопку «Отправить», загрузится созданная страница. Я уже создал такие типы HTML-страниц с именем (например, westwinter.html).

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

Это код, который я использую. Когда я заменяю значение на имя страницы (например, westsummer.html). Страница будет загружена при отправке. Я хочу, чтобы значения первого раскрывающегося списка и второго раскрывающегося списка были подсчитаны, и результатом должно быть имя страницы при отправке. Наконец, должно быть 16 различных названий HTML-страниц. Хочу это решение с помощью jQuery или javascript. 

  <div class="selCont">
  <h2>pick an option</h2>

  <select id="selection" name="selection">
  <option value="1">West</option>
  <option value="2">East</option>
  <option value="3">North</option>
  <option value="4">South</option>
  </select>

  <select id="selection" name="selection">
  <option value="1">Winter</option>
  <option value="2">Spring</option>
  <option value="3">Summer</option>
 <option value="4">Fall</option>

 </select>
 <button class="go-btn" type="submit">Go</button>
 </div>

1 Ответ

1 голос
/ 03 ноября 2019

Во-первых, давайте установим уникальные идентификаторы для тегов select и позволим установить значения для реальных строк (мы могли бы сохранить их в числовом формате и выполнить переключение на них позже, чтобы определить их значение, но это проще сделать таким образом): 

<select id="direction" name="selection">
    <option value="west">West</option>
    <option value="east">East</option>
    <option value="north">North</option>
    <option value="south">South</option>
</select>

<select id="season" name="selection">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

Далее, давайте напишем функцию для создания ссылки, используя значения из этих тегов выбора. Я использовал document.querySelector здесь, но вы можете легко изменить его для jQuery, если хотите: 

function getLink() {
    var direction = document.querySelector("#direction").value;
    var season = document.querySelector("#season").value;
    //Assuming that the html files are in the same folder as the current page
    return "./" + direction + season + ".html";
}

Наконец, давайте обновим нашу кнопку, чтобы при нажатии нажимать на местоположение страницы с новой ссылкой. : 

<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>

Здесь все в целом: 

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="selCont">
        <h2>pick an option</h2>
            
        <select id="direction" name="selection">
            <option value="west">West</option>
            <option value="east">East</option>
            <option value="north">North</option>
            <option value="south">South</option>
        </select>

        <select id="season" name="selection">
            <option value="winter">Winter</option>
            <option value="spring">Spring</option>
            <option value="summer">Summer</option>
            <option value="fall">Fall</option>
        </select>

        <button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
    </div>
</body>
<script>
    function getLink() {
        var direction = document.querySelector("#direction").value;
        var season = document.querySelector("#season").value;
        return "./" + direction + season + ".html";
    }
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...