如何解决如何使用JavaScript函数根据单选按钮的选择使表单提交按钮打开其他URL？
我是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函数（插入了虚拟网址）：
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.stackoverflow.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";
}
}
解决方法
- 使用
value=""选项属性 - 停止使用内联
on*=""属性，就像您（希望）不使用内联style=""属性一样。很难调试，JS应该只放在一个地方，这就是您的Script标签或文件。 - 看看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>,
尝试使用：
window.open("https://your.url")
代替使用：
document.getElementById('mysubmit').href = "https://www.javascript.com";
如果要在同一选项卡中打开窗口，则：
window.open("https://www.youraddress.com","_self")
表单使用元素名称
const
direction =
{
Option1: 'https://www.google.com"',Option2: 'https://facebook.com',Option3: 'https://www.instagram.com',Option4: 'https://www.twitter.com',Option5: 'https://www.stackoverflow.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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。