0

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
4
Views
5 Years
Discussion Span
Last Post by Taywin
0

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

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.