Как отправить после получения значения из поля выбора - PullRequest
Новая
       1

Как отправить после получения значения из поля выбора

0 голосов
/ 30 марта 2020

Я новичок с Javascript.

Я написал код для получения значений из выбранной опции, и он отлично работает.

Мой вопрос заключается в том, что после выбора всех трех опций, если я нажимаю кнопку «отправить», она должна go перейти на следующую страницу.

Может кто-нибудь помочь с этим?

Условие, которое будет выполнено при перенаправлении на другую страницу: 

if(strUser == 'AAA') && (strUser1 == 'DDD') && (strUser1 == 'GGG'))
    {
        window.location.replace("sample4.html");
    }
    else if(strUser == 'BBB') && (strUser1 == 'EEE') && (strUser1 == 'HHH'))
    {
        window.location.replace("sample5.html");
    }
    else
        {
        alert("please select all the 3 options");
        }
}

Код: 

<body
    style="background-image: url(./img/ford3.png); background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>

    <div class="box">
        <select name="select1" id="sys" onchange="showData();">
            <option value="1">AAA</option>
            <option value="2">BBB</option>
            <option value="3">CCC</option>
        </select>
    </div>
    <div class="box1">
        <select id="sub" onchange="showData();">
            <option value="4">DDD</option>
            <option value="5">EEE</option>
            <option value="6">FFF</option>
        </select>
    </div>
    <div class="box2">
        <select id="sub1" onchange="showData();">
            <option value="7">GGG</option>
            <option value="8">HHH</option>
            <option value="9">III</option>
        </select>
    </div>
    <input type="submit" value="Submit" id="button">
    <script>
    function showData() {
       var e = document.getElementById("sys");
    var e1 = document.getElementById("sub");
    var e2 = document.getElementById("sub1");
    var strUser = e.options[e.selectedIndex].text;
    alert(strUser);
    //var value = e1.options[e1.selectedIndex].value; //for index
    //alert(value);
    var strUser1 = e1.options[e1.selectedIndex].text;
    alert(strUser1);
    var strUser2 = e2.options[e2.selectedIndex].text;
    alert(strUser2);

     </script>

</body>

1 Ответ

1 голос
/ 30 марта 2020

Решение

В вашем коде было несколько ошибок:

Во-первых, вы хотите, чтобы переменные состояния (значения, которые могут изменяться) имели более высокую область видимости, чтобы вы могли делиться ими между вашими функциями. Это значения ваших <select> html элементов.

Поскольку все ваши значения по умолчанию имеют нулевой индекс, мы можем просто установить значение по умолчанию для выбранного значения индекса при инициализации страницы.

Мы можем извлечь элемент <select> DOM в переменную с помощью document.getElementById() и затем извлеките из него значение выбранного параметра следующим образом:

var strUser = document.getElementById("sys").options[0].text;.

Другое дело, что ваши операторы IF были написаны неправильно. Я исправил это, например, здесь:

if (strUser == 'AAA' && strUser1 == 'DDD' && strUser2 == 'GGG')

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

Кроме того, я переместил Javascript в отдельный файл и импортировал его через тег <script>. Это хорошее разделение проблем.

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

Надеюсь, это поможет.

HTML

<body
    style="background-image: url(./img/ford3.png); background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>

    <div class="box">
        <select name="select1" id="sys" onchange="showData();">
            <option value="1">AAA</option>
            <option value="2">BBB</option>
            <option value="3">CCC</option>
        </select>
    </div>
    <div class="box1">
        <select id="sub" onchange="showData();">
            <option value="4">DDD</option>
            <option value="5">EEE</option>
            <option value="6">FFF</option>
        </select>
    </div>
    <div class="box2">
        <select id="sub1" onchange="showData()">
            <option value="7">GGG</option>
            <option value="8">HHH</option>
            <option value="9">III</option>
        </select>
    </div>
    <input type="submit" value="Submit" id="button" onclick="goToNextPage()">
    <script src="./script.js"></script>
</body>

Javascript

var strUser = document.getElementById("sys").options[0].text;
var strUser1 = document.getElementById("sub").options[0].text;
var strUser2 = document.getElementById("sub1").options[0].text;

function showData() {
  var e = document.getElementById("sys");
  var e1 = document.getElementById("sub");
  var e2 = document.getElementById("sub1");

  strUser = e.options[e.selectedIndex].text;
  alert(strUser);

  strUser1 = e1.options[e1.selectedIndex].text;
  alert(strUser1);

  strUser2 = e2.options[e2.selectedIndex].text;
  alert(strUser2);
}

function goToNextPage() {
  if (strUser == 'AAA' && strUser1 == 'DDD' && strUser2 == 'GGG') {
    window.location.replace("sample4.html");
  }
  else if (strUser == 'BBB' && strUser1 == 'EEE' && strUser2 == 'HHH') {
    window.location.replace("sample5.html");
  }
  else {
    alert("please select all the 3 options");
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...