JavaScript Radio Buttons not working and need assistance

Question

function validateStudent() {
  //retrieve Last Name, First Name, Email values
  var lastName = document.getElementById("lastName").value;
  var firstName = document.getElementById("firstName").value;
  var email = document.getElementById("email").value;
  var resident = document.getElementById("resident").value;

  //retrieve index value of Advisor
  advisorIndex = document.getElementById("advisor").selectedIndex;
  //Validate and determine class value
  classChecked = false;
  for (var i = 0; i < document.frmStudent.class.length; i++) {
    if (document.frmStudent.class[i].checked == true) {
      classChecked = true;
      vClass = document.frmStudent.class[i].value;
    }
  }


  //Determine resident status
  if (document.getElementById("resident").checked == true) {
    alert("KY Resident:Yes.")
    resident = "Yes";
  } else {
    alert("KY Resident:No.")
    resident = "No";
  }

  //Validate student data entries
  if (lastName == "") {
    alert("Please enter your last name.");
    document.frmOrder.lastName.select();
    return false;
  } else if (firstName == "") {
    alert("Please enter your first name.");
    document.frmOrder.firstName.select();
    return false;
  } else if (email == "") {
    alert("Please enter a valid email address");
    document.frmOrder.email.select();
    return false;
  } else if (classChecked == false) {

    return false;
  } else if (advisorIndex == -1) {


    return false;
  } else {
    //determine Advisor name based on advisor index value
    vAdvisor = document.frmStudent.advisor.options[advisorIndex].value;
    //Prepare and display student entries
    studentEntries =
      alert(studentEntries);
    return false;
  }
}

fieldset {
  width: 50%;
  margin: 0px 0px 10px 1%;
}

legend {
  padding: 2px;
  text-indent: 5px;
}

p {
  margin-left: 1%;
}

#contactEntry label {
  clear: left;
  display: block;
  float: left;
  width: 30%;
  margin: 7px 5px;
}

#contactEntry input {
  display: block;
  float: left;
  width: 60%;
  margin: 7px 5px;
}

input[type="submit"],
input[type="reset"] {
  display: inline;
  float: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>EKU Student Information</title>
</head>

<body>
  <form name="frmStudent" id="frmStudent" action=" " method="post" onsubmit="return validateStudent();">
    <fieldset id="contactEntry">
      <legend>Contact Information</legend>
      <label for="lastName">Last Name:</label>
      <input type="text" name="lastName" id="lastName" />
      <label for="firstName">First Name:</label>
      <input type="text" name="firstName" id="firstName" />
      <label for="email">E-Mail:</label>
      <input type="text" name="email" id="email" />
    </fieldset>
    <fieldset id="fieldClass">
      <legend>Class Classification</legend>
      <input type="radio" name="class" id="freshman" value="Freshman" checked="checked" /> &nbsp;&nbsp;Freshman
      <br/>
      <input type="radio" name="class" id="sophomore" value="Sophomore" checked="checked" /> &nbsp;&nbsp;Sophomore
      <br/>
      <input type="radio" name="class" id="junior" value="Junior" checked="checked" /> &nbsp;&nbsp;Junior
      <br/>
      <input type="radio" name="class" id="senior" value="Senior" checked="checked" /> &nbsp;&nbsp;Senior
    </fieldset>

    <fieldset id="fieldAdvisor">
      <legend>My Advisor</legend>
      <select size="5" name="advisor" id="advisor">
        <option>Mike Hawksley</option>
        <option value="Chang-Yang Lin">CY Lin</option>
        <option>Steve Loy</option>
        <option>Bob Mahaney</option>
        <option>Ted Randles</option>
      </select>
    </fieldset>
    <p> <input type="checkbox" name="resident" id="resident" />&nbsp;&nbsp;
      <label for="resident">Kentucky Resident</label>
    </p>
    <p><input type="submit" value="Submit" onclick="onsubmit" />&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" value="Reset" /></p>
  </form>
</body>

</html>

I'm tasked with the below and I'm issues getting the code to work. All help is greatly appreciated.

Create a form validation function that confirms that the user:
1. Enters values in the Last Name, First Name, and Email.
2. Specifies a Class value by selecting one of the Class radio buttons.
3. Selects an Advisor from the form selection list.
If any of the validation fail, display an alert with an appropriate message. If one of the text input values is not entered, select the current value of the associated input.
Call the form validation function using a form onsubmit even handler.
After the form validates all of the form inputs, display the alert to summarize the user inputs. If the Kentucky resident check box is checked, display the message "KY Resident: Yes." If the Kentucky resident check box is cleared, display the message "KY Resident:No."

It's not clear exactly what you're having a problem with. Can you explain what error messages you're seeing or what is happening? Stack Overflow is about helping find answers to specific problems rather than doing tasks for you. Take a look at the SO guidance and see if you can rephrase the problem better and perhaps reduce the code to the specific problem area. https://stackoverflow.com/help/how-to-ask — Tim Croydon, Mar 30 '20 at 18:16
First you need to remove the errant start curly bracket `{` after `resident = "No";` -- Then you need to *close* your function at the end of your script with a closing curly `}` -- Do you net have an IDE that will point this out for you? It is immeasurably helpful. Mots IDE's (even free ones) will denote syntactical errors like missing brackets and misaligned code .. — Zak, Mar 30 '20 at 18:22
Only *after* these things are fixed can one diagnose your issue — Zak, Mar 30 '20 at 18:23
I need assistance figuring out how to get the "form to validate all functions" to display an alert to summarize all the user inputs — PleaseHelp, Mar 30 '20 at 18:35

Nicolas Trudel · Accepted Answer · 2020-03-30T19:44:12.260

0

By looking at your code I can see that the resident condition doesn't close. Ex.:

    {
        alert("KY Resident:Yes.")
        resident = "Yes";
    }
    else
    {
        alert("KY Resident:No.")
        resident = "No";
    {
change it to 

if (document.getElementById("resident").checked == true)
    {
        alert("KY Resident:Yes.")
        resident = "Yes";
    }
    else
    {
        alert("KY Resident:No.")
        resident = "No";
    }

To make your code loop through your form validator, I suggest to replace the <p><input type="submit" value="Submit" onclick = "onsubmit"/> to <p><input type="submit" value="Submit" onclick = "validateStudent"/>

For the array, you can create it at the start of your validateStudent function and in a condition you can push the message.

function validateStudent() {
  var output = [];

  // change these kind of if statement
  if (document.getElementById("resident").checked == true) {
    alert("KY Resident:Yes.")
    resident = "Yes";
  }
  // to something like this
  if (document.getElementById("resident").checked == true) {
    output.push("KY Resident:Yes.");
    resident = "Yes";
  }

  // at the end of the function
  alert(output.join('\n'))
}

edited Mar 30 '20 at 19:44

answered Mar 30 '20 at 18:30

Nicolas Trudel

70
6

What I need assistance with is figuring out how to get an alert that summarizes the user inputs after the validation function validates the form inputs. – PleaseHelp Mar 30 '20 at 18:42
I recommend using an array and you push your strings ("messages") in it and you output it in the alert prompt. – Nicolas Trudel Mar 30 '20 at 18:50
That's what was suggested by my teacher (I'm new at all this and learning) suggested but I don't understand where to put this array. I really appreciate your help so far. The alerts messages are at least working now! – PleaseHelp Mar 30 '20 at 18:53
You can lookup this [answer](https://stackoverflow.com/a/3006676/6450666) – Nicolas Trudel Mar 30 '20 at 18:54
Does the above array got before the below function? function validateStudent() { – PleaseHelp Mar 30 '20 at 19:14
actually I see where the if statement goes – PleaseHelp Mar 30 '20 at 19:18
You can place it with your other variables declaration. – Nicolas Trudel Mar 30 '20 at 19:20
The if statement is simply an exemple of how you push the data in the output array – Nicolas Trudel Mar 30 '20 at 19:23
Would my condition look something like: If (lastName = true, firstName = true, email = true) – PleaseHelp Mar 30 '20 at 19:26
@PleaseHelp Updated the my example to cover your question – Nicolas Trudel Mar 30 '20 at 19:45
@PleaseHelp since you're new to programming I highly suggest that you look at how arrays in Javascript work, [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) – Nicolas Trudel Mar 30 '20 at 19:47
Nicolas, thanks for your help. It's greatly appreciated. – PleaseHelp Mar 30 '20 at 23:17

JavaScript Radio Buttons not working and need assistance

1 Answers1