Need to display an alert when hitting submit via radio choices

Question

edit: I don't think the similar question mentinoed in the comments can help :(. Unless I'm just really bad at this... I can get a simple alert message to come up but can't get the alert for the the individual radio button to show.

I'm just doing a simple form with radio buttons with Javascript to give an alert after hitting submit when one of the choices is chosen. I'm brand new to Javascript so I'm not sure what else I can do...

The HTML works but the function inside of it doesn't at all. I'm lost on what else to do. Any advice would be really appreciated.

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

Possible duplicate of [JavaScript Form Submit - Confirm or Cancel Submission Dialog Box](http://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box) — roberrrt-s, Oct 18 '16 at 12:39
awww such a cute code. You'll get there eventually. Keep it up :) — shanks, Oct 18 '16 at 12:41

score 1 · Answer 1 · answered Oct 18 '16 at 12:41

1

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

You need to associate an event known as onsubmit which will call gender() function when form is submitted.

You can prevent the submission by returning false via function and for that you will need to do something like this

onsubmit="return gender()"

If you want to submit form, change the button type to button and associate an event as onclick='gender()' and keep rest of the code unchanged.

answered Oct 18 '16 at 12:41

Danyal Sandeelo

12,196
10
47
78

what kind of sense does your comment make? @shanks – Danyal Sandeelo Oct 18 '16 at 12:44
Is there anything else I might be missing? I used your suggestions but still getting no alert box. Should I choose a different way to go about doing this? @Danyal – Colton Horvath Oct 18 '16 at 13:11

Weedoze · Accepted Answer · 2016-10-18T13:30:56.337

The errors were :

You used document.form[0].element[1] instead of document.form[1]
You wrote onsubmite instead of onsubmit
All your radio input had the same name attribute thus you were able to select multiple choices. You should use the same name for each radio button of the same group
You can reduce male.checked == true with male.checked alone

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>

NOTE

Instead of document.form[0]; (first element of the form) you can use document.form.choice[0] which will look for the list of radio and select the first one [0]

Need to display an alert when hitting submit via radio choices

2 Answers2