CODEWITHSUNDEEP
javascripthtmlradio-button
user3302025
user3302025

Reputation:

Resetting Radio Buttons

Here is a fiddle containing my code - http://jsfiddle.net/jamiepollard28/sDLV4/8/

I am trying to make my code reset the radio buttons only when the user clicks cancel on the alert box of validation for the radio buttons.

When you click submt containing the required data with a radio button selected a alert box will come up confirming or rejecting the choice, when i click cancel on that alert box i want the radio button selection to reset.

Below is my code.

<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.onload=function(){
window.validateForm=function() {
    var result = true;
    var msg = "";
    var focusname="";
    if (document.ExamEntry.name.value == "") {
        msg += "You must enter your name \n";
        focusname="name";
        //document.ExamEntry.name.focus();
        document.getElementById('name1').style.color = "red";
        //result = false;
    }
    if (document.ExamEntry.subject.value == "") {
        msg += "You must enter the subject \n";
       // document.ExamEntry.subject.focus();
        if (focusname=="")
        {
        focusname="subject";
        }
        document.getElementById('subject1').style.color = "red";
        //result = false;
    }
    var Number = document.ExamEntry.Exam_Number.value
    if (Number == "") {
        msg += "You must enter the exam Number \n";
        //document.ExamEntry.Exam_Number.focus();
        if (focusname=="")
        {
        focusname="Exam_Number";
        }
        document.getElementById('Exam_Number1').style.color = "red";
        //result = false;
    }else if (Number.length != 4) {
        msg += "You must enter at least Four Numbers in the Exam Number \n";
         if (focusname=="")
        {
        focusname="Exam_Number";
        }
        //document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number1').style.color = "red";
        //result = false;
    }
else if (isNaN(Number)) {
        msg += "You must enter at least four numeric characters in the Exam Number feild \n";
     if (focusname=="")
        {
        focusname="Exam_Number";
        }   
    // document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number1').style.color = "red";
        //result = false;
    }
    var valchecked = '';
    var len = document.getElementsByName('examtype').length;

    for (i = 0; i < len; i++) {

if ( document.ExamEntry.examtype[i].checked ) {

valchecked = document.ExamEntry.examtype[i].value;
 break;

}

}
    if (valchecked == '') {
        msg += "Select Exam Type";
        document.getElementById('Exam_Type').style.color = "red";
         if (focusname=="")
        {
        focusname="examtype_GCSE";
        }

    } 

    if (msg != ""){
        alert(msg)
        document.getElementById(focusname).focus();
        return false;
    }else{
        return confirm('You have chosen ' + valchecked + ' is this correct?');
    }

}
}//]]>  

</script>


</head>
<body>
  <h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name1">Name</td>
<td><input type="text" name="name"  id="name" /></td>
</tr>
<tr>
<td id="subject1">Subject</td>
<td><input type="text" name="subject" id="subject"/></td>
</tr>
<tr>
<td id="Exam_Number1">Exam Number</td>
<td><input type="text" name="Exam_Number" id="Exam_Number" ><font size="3">(Maximum characters: 4)</font> </td>
</tr>
<tr>

<table><form action="">
<td id="Exam_Type">Exam Type</td>
<tr><td><input type="radio" id="examtype_GCSE" name="examtype" value="GCSE" /> : GCSE<br /></tr>
<tr><td><input type="radio" id="examtype_AS" name="examtype" value="AS"/> : AS<br /></tr>
<tr><td><input type="radio" id="examtype_A2" name="examtype" value="A2" /> : A2<br /></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>


</html>

Upvotes: 0

Views: 138

Answers (2)

Sarath
Sarath

Reputation: 608

With an if loop you can solve the issue

try following code

if(confirm('You have chosen ' + valchecked + ' is this correct?')){
            return true;
        }
        else{           
            document.getElementById('examtype_'+valchecked).checked= false;         
            return false;
        }

Upvotes: 0

T J
T J

Reputation: 43156

You are simply returning the users choice, you need to first check it, if it is true return true for form submission else reset radio and return false, as follows: FIDDLE

    var ch=  confirm('You have chosen ' + valchecked + ' is this correct?');
    if(!ch){
        document.getElementById('examtype_'+valchecked).checked= false;
        return false; }
    else 
        return true;
   }

Upvotes: 1

Related Questions