表单动作来切换功能？答案

【问题标题】：form action to toggle a function?表单动作来切换功能？
【发布时间】：2018-04-01 02:06:20
【问题描述】：

<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 ()...

没有任何作用。我想我需要一些动作标签的东西，但我只能找到链接到其他网站/页面的示例，这不是我想要的。是否可以使用表单切换功能？

谢谢！

【问题讨论】：

您将操作值视为位置的原因是因为表单需要知道在触发提交事件时将其数据发送到哪里。是的，有一种非常简单的切换功能的方法，它是按条件：if/else。定义您的函数，然后使用if/else 调用函数
使用 input type=button 代替提交

标签： javascript html forms

【解决方案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() 来防止表单提交（重定向页面）。

【讨论】：

我阅读了您的回答并作为一个附带问题：为什么 OP 需要“提交”按钮？他可以使用 input type=button 然后 onclick 他的功能。
你是对的，不需要[type="submit"]。（虽然使用addEventListener 比使用onclick 更好）
我同意。这只是为了说明这个概念。

【解决方案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>

【讨论】：