Перенаправление Javascript на основе выбора радио - PullRequest
1 голос
/ 30 мая 2019

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

            <div class="col-12" style="margin-top">
            <label><strong>What Is Your Business Currently Generating?</strong></label>
            <div class="d-flex m-t--20">
                <div class="p--relative check">
                    <input type="radio" id="o5kradio" name="income" value="o5k" checked required/>
                    <label for="diy">Over $5k Per Month</label>
                </div>
                <div class="p--relative check">
                    <input type="radio" id="u5kradio" name="income" value="u5k" required/>
                    <label for="hands-on">Under $5k Per Month</label>
                </div>
            </div>
        </div>



        <script>
        var o5kradio = document.getElementById("o5kradio"),
        u5kradio = document.getElementById("u5kradio"),
        submitButton = document.getElementById("SubmitButton");

         submitButton.addEventListener("click", function () {
         if (o5kradio.checked) {
         alert('o5k');
         window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
         } else {
         alert('u5k');
         window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now-2/";
    }
    }, false);
    </script>

        <!--ERROR/SUCCESS MESSAGE-->
        <div class="message js-message"></div>
        <button type="submit" value="submit" id="SubmitButton" class="btn txt--shadow-smaller">Click TO SUBMIT APPLICATION</button>
    </form>

Отправляет сюда пользователей независимо от выбора: https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/

Ответы [ 2 ]

1 голос
/ 30 мая 2019

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

      <div class="col-12" style="margin-top">
        <label><strong>What Is Your Business Currently Generating?</strong></label>
        <div class="d-flex m-t--20">
            <div class="p--relative check">
                <input type="radio" id="o5kradio" name="income" value="o5k" checked required/>
                <label for="diy">Over $5k Per Month</label>
            </div>
            <div class="p--relative check">
                <input type="radio" id="u5kradio" name="income" value="u5k" required/>
                <label for="hands-on">Under $5k Per Month</label>
            </div>
        </div>
    </div>

  <script>
    // No need for declaring global variables here
    function submit(source,options){
    // First, this segment finds the checked element in the array:
      for (var i = 0; i < options.length; i++){
        if (options[i].checked){
          break;
        }
      }
    // Next, the source switch determines which button element called the function:
    switch(source.id){  
   case 'submitButton':
    // The options switch then determines what happens when the checked option is submitted:
      switch(options[i].id){
        case 'o5kradio':
          alert('over5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          break;
        case 'u5kradio':
          alert('under5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now-2/";
          break;
          //  The default option for the options switch
        default:
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          }
        break;
        // The default option for the source switch
        default:
       }
    }
</script>

    <!--ERROR/SUCCESS MESSAGE-->
    <div class="message js-message"></div>
    <button type="submit" value="submit" id="submitButton" onclick="submit(this,options=[o5kradio,u5kradio])" class="btn txt--shadow-smaller">Click TO SUBMIT APPLICATION</button>
</form>

Итак, чтобы уточнить, вот что я делаю ...

Для начала, я предпочитаю функции "onclick" в кнопках, потому что это дает больше свободы.Я создал функцию под названием «submit», и она передает два значения из HTML: 1. «this», который будет собственным идентификатором, чтобы функция могла идентифицировать источник, и 2. массив с именем «options», который содержит идентификаторывсе переключатели, которые нужно будет оценить, чтобы найти проверенный:

<button type="submit" value="submit" id="submitButton" onclick="submit(this,options=[o5kradio,u5kradio])" class="btn txt--shadow-smaller">Click TO SUBMIT APPLICATION</button>

Затем первая часть функции находит проверенный переключатель, циклически перемещаясь по массиву.Поскольку всегда может быть только одна отмеченная кнопка, это легко сделать:

function submit(source,options){
  for (var i = 0; i < options.length; i++){
    if (options[i].checked){
      break;
    }
  } ...etc.

Далее я использовал вложенный переключатель, чтобы решить, как обрабатывать результаты.Обратите внимание, что добавление «.id» после «source» и «options» обходит необходимость использовать «getElementById»:

 // The source switch  
    switch(source.id){  
   case 'submitButton':
      // The options switch, currently the first "case" of the source switch, but you can add as many cases as needed
      switch(options[i].id){
        case 'o5kradio':
          alert('over5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          break;
        case 'u5kradio':
          alert('under5k');
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now-2/";
          break;
          //  The default option for the options switch
        default:
          window.location = "https://vincedelmonte7figuremastermind.com/sit-in/schedule-now/";
          }
        break;
        // The default option for the source switch
        default:
       }

Еще раз, это излишне, и я не удивлюсь, если я 'Мы сделали здесь хотя бы одну ложную ошибку, но прелесть этой настройки в том, что каждая форма переключателя, которую вы используете, может использовать одну и ту же функцию, и вы можете иметь столько вариантов, сколько пожелаете.

Все, что вам нужносделать, это добавить еще один «случай» к переключателю «source.id» каждый раз, когда пользователь нажимает кнопку «отправить» (я полагаю, на дополнительных страницах), и вы можете контролировать любое количество страниц, перенаправлений и параметров, которые могут у вас бытьс одной функцией.Это означает, что каждый щелчок будет когда-либо выполнять только три вычисления (для оператора, переключателя источника и переключателя опций), чтобы избежать нескольких операторов «else if» подряд для более чем двух переключателей.

PS.Идентификатор для «submitButton» начинается с заглавной буквы «S», хотя исправление этого не помогло мне.

0 голосов
/ 30 мая 2019

Вот один подход к достижению перенаправления страниц, основанный на выборе переключателя:

const incomeRadioButtons = document.querySelectorAll('[name="income"]');

incomeRadioButtons.forEach((radioButton) => {

  radioButton.onchange = function(){
    
    window.location.href = window.location.href + radioButton.dataset.url;
  }
});
.default {
display: none;
}
<form>
<h2>What Is Your Business Currently Generating?</h2>

<label class="default"><input type="radio" id="default" name="income" value="default" checked required />Default</label>
<label><input type="radio" id="o5kradio" name="income" value="o5k" data-url="/o5k/" required  />
Over $5k Per Month</label>
<label><input type="radio" id="u5kradio" name="income" value="u5k" data-url="/u5k/" required/>
Under $5k Per Month</label>
</form>
...