如何根据使用 JavaScript 功能的单选按钮选择使我的表单提交按钮打开不同的 URL？

Question

我是 JavaScript 的新人，很抱歉，如果这真的很简单...

我想要完成的事情：

有一个包含 10 个不同单选按钮选项的表单。单击“提交”按钮时，应根据用户的选择将用户重定向到新的 URL。

这是我的 HTML 表格：

<form onsubmit="myFunction()" class="final_question">
    <div class="question-container">
        <div class="form-box first-answer">
        <label for="Option1">Option 1</label>
        <input type="radio" id="Option1" name="option">
        </div>

        <div class="form-box second-answer">
        <label for="Option2">Option 2</label>
        <input type="radio" id="Option2" name="option">
        </div>

        <div class="form-box third-answer">
        <label for="Option3">Option 3</label>
        <input type="radio" id="Option3" name="option">
        </div>

        <div class="form-box fourth-answer">
        <label for="Option4">Option 4</label>
        <input type="radio" id="Option4" name="option">
        </div>

        <div class="form-box fifth-answer">
        <label for="Option5">Option 5</label>
        <input type="radio" id="Option5" name="option">
        </div>

        <div class="form-box sixth-answer">
        <label for="Option6">Option 6</label>
        <input type="radio" id="Option6" name="option">
        </div>

        <div class="form-box seventh-answer">
        <label for="Option7">Option 7</label>
        <input type="radio" id="Option7" name="option">
        </div>

        <div class="form-box eighth-answer">
        <label for="Option8">Option 8</label>
        <input type="radio" id="Option8" name="option">
        </div>

        <div class="form-box ninth-answer">
        <label for="Option9">Option 9</label>
        <input type="radio" id="Option9" name="option">
        </div>

        <div class="form-box tenth-answer">
        <label for="Option10">Option 10</label>
        <input type="radio" id="Option10" name="option">
        </div>
        
        <div class="form-box submit-button">
        <input type="submit" class="final_question_submit" id="mysubmit">
        </div>
    </div>
</form>

这是我的 JavaScript 函数（插入了虚拟 URLs）：

function myFunction() {
    if(document.getElementById('Option1').checked) {
        document.getElementById('mysubmit').href = "https://www.google.com";
    }
    else if(document.getElementById('Option2').checked) {
        document.getElementById('mysubmit').href = "https://facebook.com";
    }
    else if(document.getElementById('Option3').checked) {
        document.getElementById('mysubmit').href = "https://www.instagram.com";
    }
    else if(document.getElementById('Option4').checked) {
        document.getElementById('mysubmit').href = "https://www.twitter.com";
    }
    else if(document.getElementById('Option5').checked) {
        document.getElementById('mysubmit').href = "https://www.whosebug.com";
    }
    else if(document.getElementById('Option6').checked) {
        document.getElementById('mysubmit').href = "https://www.w3cschools.com";
    }
    else if(document.getElementById('Option7').checked) {
        document.getElementById('mysubmit').href = "https://www.freecodecamp.org";
    }
    else if(document.getElementById('Option8').checked) {
        document.getElementById('mysubmit').href = "https://www.edabit.com";
    }
    else if(document.getElementById('Option9').checked) {
        document.getElementById('mysubmit').href = "https://www.scrimba.com";
    }
    else(document.getElementById('Option10').checked) {
        document.getElementById('mysubmit').href = "https://www.javascript.com";
    }
}

Answer 1

使用value=""选项属性
停止使用内联 on*="" 属性，就像您（希望）不使用内联 style="" 属性一样。它很难调试，JS 应该只放在一个地方，那就是你的脚本标签或文件。
看看Document location
看看Event.preventDefault()
不要在不需要时使用 for=""。
在JS的.querySelector()

:checked

const EL_finalForm = document.querySelector("#final_question");

EL_finalForm.addEventListener("submit", (ev) => {
  ev.preventDefault();
  const EL_checked = EL_finalForm.querySelector('input[name="option"]:checked');
  if (!EL_checked) return alert("Select an option");
  document.location = EL_checked.value;
});

<form id="final_question">
  <div class="question-container">
    <label class="form-box">
        <span>Option 1</span>
        <input type="radio" value="https://www.google.com" name="option">
    </label>
    <label class="form-box">
        <span>Option 2</span>
        <input type="radio" value="https://www.facebook.com" name="option">
    </label>
    <label class="form-box">
        <span>Option 3</span>
        <input type="radio" value="https://www.instagram.com" name="option">
    </label>
    <label class="form-box">
      <input type="submit" class="final_question_submit">
    </label>
  </div>
</form>

Answer 2

尝试使用：

window.open("https://your.url")

而不是使用：

document.getElementById('mysubmit').href = "https://www.javascript.com";

如果您想在同一标签页中打开 window：

window.open("https://www.youraddress.com","_self")

Answer 3

表单使用元素名称

const 
  direction = 
    {
    Option1: 'https://www.google.com"',
    Option2: 'https://facebook.com',
    Option3: 'https://www.instagram.com',
    Option4: 'https://www.twitter.com',
    Option5: 'https://www.whosebug.com',
    Option6: 'https://www.w3cschools.com',
    Option7: 'https://www.freecodecamp.org',
    Option8: 'https://www.edabit.com',
    Option9: 'https://www.scrimba.com"',
    Option10: 'https://www.javascript.com'
    }
, myForm = document.getElementById('my-form')
  ;
myForm.onsubmit=e=>
  {
  e.preventDefault()
  if (myForm.option.value) 
     document.location = direction[ myForm.option.value  ]
  }

label, button {
  display: block;
  float: left;
  clear: both;
  width: 7em;
  margin: .5em;
  }
input[type=radio] {
  float: right;
  }

<form action="" id="my-form">
  <label> Option 1  <input type="radio" name="option" value="Option1" > </label>
  <label> Option 2  <input type="radio" name="option" value="Option2" > </label>
  <label> Option 3  <input type="radio" name="option" value="Option3" > </label>
  <label> Option 4  <input type="radio" name="option" value="Option4" > </label>
  <label> Option 5  <input type="radio" name="option" value="Option5" > </label>
  <label> Option 6  <input type="radio" name="option" value="Option6" > </label>
  <label> Option 7  <input type="radio" name="option" value="Option7" > </label>
  <label> Option 8  <input type="radio" name="option" value="Option8" > </label>
  <label> Option 9  <input type="radio" name="option" value="Option9" > </label>
  <label> Option 10 <input type="radio" name="option" value="Option10"> </label>
  <button type="submit">submit</button>
</form>

如何根据使用 JavaScript 功能的单选按钮选择使我的表单提交按钮打开不同的 URL？

How can I make my form submit button open a different URL based on radio button selection using JavaScript function?

javascript

html

forms

submit