...

View Full Version : Still submits the form even when there is an error



a1jit
05-06-2004, 09:41 AM
I dont know what is wrong with this javascript code. There are two text fields in this form (AmtPaidTakaful and AmtPaidOthers) and 2 radio buttons with the same name (TakingTakaful) . The radio button has two possible values (Yes, No)

If the radio button value is Yes, Then user has to fill up AmtPaidTakaful

If the radio button value is No, Then user has to fill up AmtPaidOthers

And both AmtPaidTakaful and AmtPaidOthers are numeric fields.

The problem here is that it still submits the form after displaying the error message. It means that after user have clicked 'ok' in the error message box, it submits the form. I dont know what is wrong with the code

Here is how the code looks like

<script language="JavaScript">

function validateradiobutton(thisform) {

myOption = -1;
for (i=0; i<thisform.TakingTakaful.length; i++) {
if (thisform.TakingTakaful[i].checked) {
myOption = i;
}
}

missinginfo = "";


var digits1="0123456789.-"
var temp12
var temp11 = 0

if(myOption == 0 && thisform.AmtPaidTakaful.value == ""){
temp11 = 1;
}

for (var j=0;j<document.registrationForm.AmtPaidTakaful.value.length;j++){
temp12=document.registrationForm.AmtPaidTakaful.value.substring(j,j+1)
if (digits1.indexOf(temp12)==-1){
temp11 = 1;
}
}

if (temp11 == 1){
document.getElementById("a").style.backgroundColor = "#ffffc0";
missinginfo += "\n - Amount Paid for Takaful Insurance";
}

else{
document.getElementById("a").style.backgroundColor = "#ffffff";
}

var digits="0123456789.-"
var temp2
var temp1 = 0

if(myOption == 1 && thisform.AmtPaidOthers.value == ""){
temp1 = 1;
}

for (var z=0;z<document.registrationForm.AmtPaidOthers.value.length;z++){
temp2=document.registrationForm.AmtPaidOthers.value.substring(z,z+1)
if (digits.indexOf(temp2)==-1){
temp1 = 1;
}
}

if (temp1 == 1){
document.getElementById("c").style.backgroundColor = "#ffffc0";
missinginfo += "\n - Amount Paid for Other Insurance";
}

else{
document.getElementById("c").style.backgroundColor = "#ffffff";
}

if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"The following fields are incomplete/erroneous:\n" +
missinginfo + "\n_____________________________" +
"\nPlease re-enter and submit again!";
alert(missinginfo);
return false;
}
else
return true;
}

</script>

Please help..Thankxxxxx

glenngv
05-06-2004, 09:56 AM
Are you calling validateradiobutton function like this?

<form onsubmit="return validateradiobutton(this)">

a1jit
05-06-2004, 10:11 AM
Nope im calling it like this

onsubmit="validateradiobutton(registrationForm)"

registrationForm is the name of the form

a1jit
05-06-2004, 10:14 AM
<form onsubmit="return validateradiobutton(this)">

Even if i call it like this, it still submits the form after displaying the error message

glenngv
05-06-2004, 10:25 AM
Can you post the whole code or link?

a1jit
05-06-2004, 10:33 AM
<html>
<head>
<title>addotherinformation</title>

<LINK REL="stylesheet" TYPE="text/css" HREF="registration.css">

<style type="text/css">
<!--
.style3 {
color: #FF0000;
font-size: xx-small;
}
-->
</style>

<script language="JavaScript">

function validateradiobutton(thisform) {

myOption = -1;
for (i=0; i<thisform.TakingTakaful.length; i++) {
if (thisform.TakingTakaful[i].checked) {
myOption = i;
}
}

missinginfo = "";


var digits1="0123456789.-"
var temp12
var temp11 = 0

if(myOption == 0 && thisform.AmtPaidTakaful.value == ""){
temp11 = 1;
}

for (var j=0;j<document.registrationForm.AmtPaidTakaful.value.length;j++){
temp12=document.registrationForm.AmtPaidTakaful.value.substring(j,j+1)
if (digits1.indexOf(temp12)==-1){
temp11 = 1;
}
}

if (temp11 == 1){
document.getElementById("a").style.backgroundColor = "#ffffc0";
missinginfo += "\n - Amount Paid for Takaful Insurance";
}

else{
document.getElementById("a").style.backgroundColor = "#ffffff";
}

var digits="0123456789.-"
var temp2
var temp1 = 0

if(myOption == 1 && thisform.AmtPaidOthers.value == ""){
temp1 = 1;
}

for (var z=0;z<document.registrationForm.AmtPaidOthers.value.length;z++){
temp2=document.registrationForm.AmtPaidOthers.value.substring(z,z+1)
if (digits.indexOf(temp2)==-1){
temp1 = 1;
}
}

if (temp1 == 1){
document.getElementById("c").style.backgroundColor = "#ffffc0";
missinginfo += "\n - Amount Paid for Other Insurance";
}

else{
document.getElementById("c").style.backgroundColor = "#ffffff";
}

if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"The following fields are incomplete/erroneous:\n" +
missinginfo + "\n_____________________________" +
"\nPlease re-enter and submit again!";
alert(missinginfo);
return false;
}
else
return true;
}

</script>


<style type="text/css">
<!--
.style2 {color: #FFFFFF}
-->
</style>
</head>

<body bgcolor="#ffffff">

<cfset takaful = #Trim(updateinsurance.TakingTakaful)#>
<cfset type = #Trim(updateinsurance.InsuranceType)#>

<img name="editinsuranceinfo" src="images/editinsuranceinfo.gif" width="750" height="90" border="0" alt="">

<FORM NAME="registrationForm" method = "post" action="updatestudentregistrationfinal.cfm" onsubmit="validateradiobutton(registrationForm)">

<cfoutput query="updateinsurance">

<TABLE ID="RegistrationForm" CELLSPACING="0" CELLPADDING="3">

<tr>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>
<TD><LABEL>Taking Takaful Insurance: </LABEL></TD>
<cfif takaful eq "Yes">
<TD><INPUT TYPE="radio" NAME="TakingTakaful" value = "Yes" id = "radio1" checked></TD>
<td><label>Yes</label></td>
<td><INPUT TYPE="radio" NAME="TakingTakaful" value = "No" id = "radio2"></td>
<td><label>No</label></td>
<cfelse>
<TD><INPUT TYPE="radio" NAME="TakingTakaful" value = "Yes" id = "radio1"></TD>
<td><label>Yes</label></td>
<td><INPUT TYPE="radio" NAME="TakingTakaful" value = "No" id = "radio2" checked></td>
<td><label>No</label></td>
</cfif>

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>

<td>Amount Paid:</td>
<TD><span class="style2">.</span>RM<span class="style2">.</span>
<INPUT TYPE="text" NAME="AmtPaidTakaful" size = "8" maxlength="8" value="#Trim(AmtPaidTakaful)#" id="a"></TD>
</TR>
</table>

<br>
<TABLE ID="RegistrationForm" CELLSPACING="0" CELLPADDING="3">

<tr>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>
<td><span class="style3"><span class="style2">..</span>*Please fill-up the following fields if student is <strong>not</strong> taking Takaful Insurance</span></td>
</table>
<br>

<TABLE ID="RegistrationForm" CELLSPACING="0" CELLPADDING="3">

<tr>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>



<TD><LABEL>Type of Insurance: </LABEL></TD>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>

<cfif type eq "MCIA">
<TD><select name="InsuranceType">
<option value="#InsuranceType#">#InsuranceType#</option>
<option value="AIA">AIA</option>
<option value="Others">Others</option>
<option value="none">none</option>
</select></TD>

<cfelseif type eq "AIA">
<TD><select name="InsuranceType">
<option value="#InsuranceType#">#InsuranceType#</option>
<option value="MCIA">MCIA</option>
<option value="Others">Others</option>
<option value="none">none</option>
</select></TD>

<cfelseif type eq "Others">
<TD><select name="InsuranceType">
<option value="#InsuranceType#">#InsuranceType#</option>
<option value="MCIA">MCIA</option>
<option value="AIA">AIA</option>
<option value="none">none</option>
</select></TD>

<cfelse>
<TD><select name="InsuranceType">
<option value="#InsuranceType#">#InsuranceType#</option>
<option value="MCIA">MCIA</option>
<option value="AIA">AIA</option>
<option value="Others">Others</option>
</select></TD>

</cfif>
<td></td>
<td></td>
<td></td>
<td></td>


</TR>

<tr>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>



<TD><LABEL>Amount Paid: </LABEL></TD>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>RM</td>

<TD><INPUT TYPE = "text" NAME = "AmtPaidOthers" size = "8" maxlength="8" value="#Trim(AmtPaidOthers)#" id="c"></TD>

<td></td>
<td></td>
<td></td>
<td></td>

</TR>

</table>
</cfoutput>
<table width = "65%">
<br><br>
<input type="image" name="test" src="updateonmouseout.gif" onMouseDown="this.src='updateonmousedown.gif';" onMouseOver="this.src='updateonmouseover.gif';" onMouseOut="this.src='updateonmouseout.gif';" align = "right">

</table>

</form>

</body>
</html>

glenngv
05-06-2004, 10:59 AM
I tested it using my suggestion earlier and it works fine.

onsubmit="return validateradiobutton(this)"

Using the this keyword inside the form tag is better. Referencing elements directly by its name is an IE thing only.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum