Member Avatar for lucy1997

Please help I've written this code and it works until i asked it to check if the radio buttons were checked and if none of them were checked to come up with an error alert and if one of them was checked to ask the user to confirm if it was the level they wanted. Please help!!

<head>
<title>Exam entry</title>

<script language="javascript" type="text/javascript"> 
 var level;
    result = true;
    msg="";

function validateForm() 
{
     var result = true;
    msg="";

    if (document.ExamEntry.name.value=="") 
    {
        msg+="You must enter your name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }

    if (document.ExamEntry.subject.value=="") 
    {
        msg+="You must enter the subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result = false;
    }

    //this will check to see if the examNo field is filled out
    if (document.ExamEntry.examNo.value=="") 
    {
        msg+="You must enter the exam number \n";
        document.ExamEntry.examNo.focus();
        document.getElementById('examNo').style.color="red";
        result = false;
    }

    //this will check to see if what you've typed in the examNo field is 4 characters long
    if (document.ExamEntry.examNo.value.length !=4 ) 
    {
        msg+="Your exam number must be 4 numbers long \n";
        document.ExamEntry.examNo.focus();
        document.getElementById('examNo').style.color="red";
        result = false;
    }


    var level = 0;
    lvlResult = true;
    answer;

    if (document.ExamEntry.group1[0].checked==true) 
    { 
        level = document.ExamEntry.group1[0].value;
        confirmLevel(level);
            } 

    if (document.ExamEntry.group1[1].checked==true)
    {
    level = document.ExamEntry.group1[1].value;
    confirmLevel(level);
    } 

    if (document.ExamEntry.group1[2].checked==true)
    {
        level = document.ExamEntry.group1[2].value;
    confirmLevel(level);
    }


    if(msg=="")
    {
        return result;
    }
        else
    {
        alert(msg);
        return result;
    }


}

function confirmLevel()
{

var answer;


 answer=confirm("You have chosen "+ level + " is this correct?")
if (answer==0)
  {
  level = 0;
  }
else
  {
  alert("Please choose an exam level");
    document.ExamEntry.level.focus();
    document.getElementById('level').style.color="red";
    lvlResult = false;
    return lvlResult;
  }

}

</script>

</head>

<body>

<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.htm">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<!--the following section of code puts in a new row and 2 new cells in the table one with Exam Number written in it the other with a text field in it -->
<tr>
<td id="examNo">Exam Number</td>
<td><input type="text" name="examNo" /></td>
</tr>
<tr>
<td id="level">Level</td>
<td><input type="radio" name="group1" id="GCSE" value="GCSE" onClick="return confirmLevel">GCSE<input type="radio" name="group1"  id="AS" value="AS" onClick="return confirmLevel">AS<input type="radio" name="group1" id="A2" value="A2" onClick="return confirmLevel">A2</td>

</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();"  /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>

</form>

</body>
  • 2 Contributors
  • 3 Replies
  • 181 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

When you do the submit, use onsubmit() from the form instead of onclick at the button.

<form name="ExamEntry" method="post" action="success.htm" onsubmit="return validateForm()">
  ...
  <input type="submit" name="Submit" value="Submit">
  ...
</form>

You are attempting to use global variable (level) in different functions, but you never declare or initilize it first. As a result, the onclick function of each radio button couldn't find what you are looking fore because the variable is actually assigned after the form is submit... What you should do is to pass in the current radio object, and then use that to pop up a confirmation.

// your JS function 
function confirmLevel(obj) {
  var answer;
  answer=confirm("You have chosen "+ obj.value + " is this correct?")
  if (answer) {
    level = obj.value
  }
  else {
    alert("Please choose an exam level");
    document.ExamEntry.level.focus();
    document.getElementById('level').style.color="red";
    level = ""
  }
}

// your HTML portion
<td>
<input type="radio" name="group1" id="GCSE" value="GCSE" onClick="confirmLevel(this)">GCSE
<input type="radio" name="group1" id="AS" value="AS" onClick="confirmLevel(this)">AS
<input type="radio" name="group1" id="A2" value="A2" onClick="confirmLevel(this)">A2
</td>

Then lines 49~69 can be replaced with...

if (level=="") {
  msg += "Please choose an exam level"
}

There are better ways to optimize this issue, but this is just a sample.

Edited by Taywin
Member Avatar for lucy1997

Thanks that worked for the confirm box really well do you know how i could (when the submit button is clicked) check to see if one of the radio buttons is checked and if none of them are have an alert box pop up telling them to fill one in? thanks again :)

Member Avatar for Taywin

Please follow my previous post. You need to update your submit button to not use onclick() event. You also need to add onsubmit() to your current form tag. Your lines 72~80 should be...

if (msg=="") {
  return true;
}
else {
  alert(msg);
  return false;
}
Edited by Taywin
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.