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

你走在正确的轨道上：

＆＃13;

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
});

＆＃13;

<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>

＆＃13;

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

Answer 2

您可以使用form在onsubmit代码上定义提交功能。如果您在同一页面上有多个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>

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

2 个答案: