Question

我已经设计了此脚本，以便根据广播选择将其重定向到特定页面，但它会继续转到已设置的旧链接。您有什么建议可以使它正常工作吗？

            <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/

Answer 1

好吧，所以这很有效，虽然有点过大，但可以将它用于任何未来的单选按钮形式，甚至包括很多选项的完全过大。

      <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”，它将是它自己的ID，因此该函数可以标识源； 2.一个名为“ options”的数组，其中包含ID需要对所有单选按钮进行评估以找到选中的按钮：

<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”会绕过使用“ 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:
       }

再一次，这太过分了，如果我在这里至少做了一个人造舞步，我也不会感到惊讶，但是这种设置的好处在于，您拥有的每个单选按钮形式都可以利用相同的功能，并且您可以根据需要选择多个选项。

您需要做的就是，每当用户单击“提交”按钮（假设在其他页面上）时，都将另一个“ case”添加到“ source.id”开关，并且您可以控制很多页面，重定向和一个功能可能具有的选项。这意味着每次单击将仅进行三个计算（用于语句，源切换和选项切换），从而避免在多个两个单选按钮的情况下连续出现多个“ else if”语句。

PS。 “ submitButton”的ID以大写的“ S”开头，尽管修复后对我来说没有用。

Answer 2

这是一种基于单选按钮选择来实现页面重定向的方法：

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>

基于无线电选择的Java语言重定向

2 个答案: