如何使用 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>

Answer 1

表单与元素名称一起使用const&nbsp;&nbsp; direction =&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; Option1: 'https://www.google.com"',&nbsp; &nbsp; Option2: 'https://facebook.com',&nbsp; &nbsp; Option3: 'https://www.instagram.com',&nbsp; &nbsp; Option4: 'https://www.twitter.com',&nbsp; &nbsp; Option5: 'https://www.stackoverflow.com',&nbsp; &nbsp; Option6: 'https://www.w3cschools.com',&nbsp; &nbsp; Option7: 'https://www.freecodecamp.org',&nbsp; &nbsp; Option8: 'https://www.edabit.com',&nbsp; &nbsp; Option9: 'https://www.scrimba.com"',&nbsp; &nbsp; Option10: 'https://www.javascript.com'&nbsp; &nbsp; }, myForm = document.getElementById('my-form')&nbsp; ;myForm.onsubmit=e=>&nbsp; {&nbsp; e.preventDefault()&nbsp; if (myForm.option.value)&nbsp;&nbsp; &nbsp; &nbsp;document.location = direction[ myForm.option.value&nbsp; ]&nbsp; }label, button {&nbsp; display: block;&nbsp; float: left;&nbsp; clear: both;&nbsp; width: 7em;&nbsp; margin: .5em;&nbsp; }input[type=radio] {&nbsp; float: right;&nbsp; }<form action="" id="my-form">&nbsp; <label> Option 1&nbsp; <input type="radio" name="option" value="Option1" > </label>&nbsp; <label> Option 2&nbsp; <input type="radio" name="option" value="Option2" > </label>&nbsp; <label> Option 3&nbsp; <input type="radio" name="option" value="Option3" > </label>&nbsp; <label> Option 4&nbsp; <input type="radio" name="option" value="Option4" > </label>&nbsp; <label> Option 5&nbsp; <input type="radio" name="option" value="Option5" > </label>&nbsp; <label> Option 6&nbsp; <input type="radio" name="option" value="Option6" > </label>&nbsp; <label> Option 7&nbsp; <input type="radio" name="option" value="Option7" > </label>&nbsp; <label> Option 8&nbsp; <input type="radio" name="option" value="Option8" > </label>&nbsp; <label> Option 9&nbsp; <input type="radio" name="option" value="Option9" > </label>&nbsp; <label> Option 10 <input type="radio" name="option" value="Option10"> </label>&nbsp; <button type="submit">submit</button></form>

Answer 2

使用value=""选项属性停止使用内联on*=""属性，就像您（希望）不使用内联style=""属性一样。它很难调试，JS 应该只放在一个地方，那就是你的脚本标签或文件。查看文档位置看看 Event.preventDefault()不要for=""在不需要的时候使用。:checked在JS中使用伪选择器.querySelector()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 3

尝试使用：window.open("https://your.url")而不是使用：document.getElementById('mysubmit').href&nbsp;=&nbsp;"https://www.javascript.com";如果你想在同一个选项卡中打开窗口：window.open("https://www.youraddress.com","_self")