Как направить пользователя на конкретную страницу c в зависимости от выбора, сделанного им после отправки формы? - PullRequest
Новая
       75

Как направить пользователя на конкретную страницу c в зависимости от выбора, сделанного им после отправки формы?

1 голос
/ 14 июля 2020

Я создал список из 6 вариантов, и пользователи могут выбрать только один. Я хочу, чтобы всякий раз, когда пользователь выбирает вариант из списка после отправки формы, он направляет его на определенную страницу c в зависимости от того, какой выбор.

Например. У меня есть 3 варианта

  1. Facebook
  2. Youtube
  3. Twitter

Если пользователь выберет вариант 1 после отправки, он направит их на страницу Facebook, если они выберут вариант 2, они будут перенаправлены на страницу YouTube .. et c

Ответы [ 2 ]

1 голос
/ 14 июля 2020 
<body>
<form>
    <select name="" id="target">
        <option value="facebook">Facebook</option>
        <option value="youtube">Youtube</option>
        <option value="twitter">Twitter</option>
    </select>
    <button type="button" id="sub_button">submit</button>
</form>

<script>
    const data = {
        facebook: 'https://facebook.com',
        youtube: 'https://youtube.com',
        twitter: 'https://twitter.com',
    }
    document.querySelector('#sub_button').onclick = function() {
        let target = document.querySelector('#target').value;
        window.location.href = data[target];
    }
</script>
</body>
1 голос
/ 14 июля 2020

Это довольно просто. Вам просто нужно получить значение из селектора и использовать JS, чтобы открыть эту ссылку.

Проверьте мое решение для справки -

решение на JS Fiddle 

function myFunction() {
let link = 
    document.getElementById("social").value
  let fb = "https://facebook.com"
  let tw = "https://twitter.com"
  if(link == 'fb') {
    window.open(fb);
  } else if (link == 'tw') {
    window.open(tw);
  }
}
<select id="social">
  <option value="fb">Facebook</option>
  <option value="tw">Twitter</option>
</select>
<button onclick="myFunction()">
go to site
</button>

Тут как-то не работает, работает на JS Fiddle

...