通过单选选择点击提交时需要显示警报

Need to display an alert when hitting submit via radio choices

本文关键字：显示 提交 单选 选择      更新时间：2023-09-26

edit：我认为评论中提出的类似问题对:(没有帮助。除非我真的很不擅长这个...我可以收到一条简单的警报消息，但无法收到要显示的单个单选按钮的警报。

我只是在做一个简单的表单，带有带有 Javascript 的单选按钮，以便在选择其中一个选项时点击提交后发出警报。我是Javascript的新手，所以我不确定我还能做什么......

HTML 有效，但其内部功能根本不起作用。我不知道还能做什么。任何建议将不胜感激。

<!DOCTYPE html>
<html>
<head>
    <title> Gender Check </title>
    <meta charset ="UTF-8">
</head>
<body>
    <form id= "form" name ="form" onsubmite="gender()">
        <label>Male
        <input type="radio" id="male" name="male"/>
        </label>
        <label>Female
        <input type="radio" id="female" name="female"/>
        </label>
        <label>Trans
        <input type="radio" id="trans" name="trans"/>
        </label>
        <label>Alien
        <input type="radio" id="alien" name="alien"/>
        </label>
        <label>Boeing AH-64 Apache Attack Helicopter
        <input type="radio" id="helicopter" name="helicopter"/>
        </label>
        <input type="submit" name="submit" value="Don't lie to me."/>
    </form>
    <script type="text/javascript">
    function gender() {
    var male=document.form[0].element[0];
    var female=document.form[0].element[1];
    var trans=document.form[0].element[2];
    var alien=document.form[0].element[3];
    var helicopter=document.form[0].element[4];
    if (document.getElementById('male').checked == true)
    {
    alert("You are a Male.")
    }
    else if (document.getElementById('female').checked == true)
    {
    alert("You are a Feale.")
    }
    else if (document.getElementById('trans').checked == true)
    {
    alert("You are Trans.")
    }
    else if (document.getElementById('alien').checked == true)
    {
    alert("You are an...uh...Alien?")
    }
    else if (document.getElementById('helicopter').checked == true)
    {
    alert("You are definitely not a four-blade, twin-turboshaft attack helicopter with a tailwheel-type landing gear arrangement and a tandem cockpit for a two-man crew.")
    }
    else
    {
    alert("Please pick a choice")
    }
}
    document.forms[0].onsubmit = gender;
    </script>
</body>
</html>

错误是：

  1. 您使用的是document.form[0].element[1]而不是document.form[1]
  2. 你写的onsubmite而不是onsubmit
  3. 您的所有无线电输入都具有相同的name属性，因此您可以选择多个选项。应为同一组的每个单选按钮使用相同的名称
  4. 您可以仅通过male.checked来减少male.checked == true

function gender() {
      
      var male = document.form[0];
      var female = document.form[1];
      var trans = document.form[2];
      var alien = document.form[3];
      var helicopter = document.form[4];
      if (male.checked) {
        alert("You are a Male.")
      } else if (female.checked) {
        alert("You are a Female.")
      } else if (trans.checked) {
        alert("You are Trans.")
      } else if (alien.checked) {
        alert("You are an...uh...Alien?")
      } else if (helicopter.checked) {
        alert("You are definitely not a four-blade, twin-turboshaft attack helicopter with a tailwheel-type landing gear arrangement and a tandem cockpit for a two-man crew.")
      } else {
        alert("Please pick a choice")
      }
    }
<!DOCTYPE html>
<html>
<head>
  <title>Gender Check</title>
  <meta charset="UTF-8">
</head>
<body>
  <form id="form" name="form" onsubmit="gender()">
    <label>Male
      <input type="radio" id="male" name="choice" />
    </label>
    <label>Female
      <input type="radio" id="female" name="choice" />
    </label>
    <label>Trans
      <input type="radio" id="trans" name="choice" />
    </label>
    <label>Alien
      <input type="radio" id="alien" name="choice" />
    </label>
    <label>Boeing AH-64 Apache Attack Helicopter
      <input type="radio" id="helicopter" name="choice" />
    </label>
    <input type="submit" name="submit" value="Don't lie to me." />
  </form>
</body>
</html>

注意

您可以使用document.form.choice[0]代替document.form[0];(表单的第一个元素(，它将查找无线电列表并选择第一个[0] 

 <form id= "form" name ="form" onsubmit="gender()">

您需要关联一个名为 onsubmit 的事件，该事件将在提交表单时调用gender()函数。

您可以通过函数返回 false 来阻止提交，为此您需要做这样的事情 

onsubmit="return gender()"

如果要提交表单，请将按钮类型更改为button并将事件关联为onclick='gender()'，并保持其余代码不变。

相关文章：