用于切换功能的表单操作？

Question

<form action="" method="get" >
    <input type="radio" name="gender" id="male_sub">male<br>
    <input type="radio" name="gender" id="female_sub">female<br>
    <input type="submit" value="Let's Start!" id="start"><br>
<form>

我有以下收音机表格，当我点击提交时，我希望它在我的js脚本中切换一些功能。 但是，如果我这样做：

document.getElementById("start").addEventListener('click',function ()...

什么都行不通。 我认为我需要一些动作标签，但我只能找到链接到其他网站/页面的示例，这不是我想要的。 是否可以使用表格切换功能？

谢谢！

Answer 1

你走在正确的轨道上：

 document.getElementById("start").addEventListener('click', function(e) { e.preventDefault(); console.log('start!!'); const selected = document.querySelector('input[name="gender"]:checked'); console.log('you selected: ' + (selected ? selected.nextSibling.textContent : 'null')); // your code here }); 

 <form> <input type="radio" name="gender" id="male_sub">male<br> <input type="radio" name="gender" id="female_sub">female<br> <input type="submit" value="Let's Start!" id="start"><br> <form> 

您不需要action或method属性。 如果您想自己处理表单的值，请确保使用e.preventDefault()来阻止表单提交（重定向页面）。

Answer 2

您可以使用onsubmit在form标记上定义提交函数。如果您在同一页面上有多个form标记，则此解决方案也是准确的。

 function submitForm(form, event) { event.preventDefault(); var val; var radios = form.elements['gender']; // loop through list of radio buttons for (var i = 0, len = radios.length; i < len; i++) { if (radios[i].checked) { // radio checked? val = radios[i].value; // if so, hold its value in val alert(val); break; // and break out of for loop } } alert("nothing selected"); return false; } 

 <form onsubmit="return submitForm(this,event)"> <label><input type="radio" name="gender" id="male_sub" value="male">male</label><br> <label><input type="radio" name="gender" id="female_sub" value="female">female</label><br> <input type="submit" value="Let's Start!" id="start"><br> </form>