Form/Radio Button Output Results 1

micawber · Mar 10, 2008

i have a section of a form that uses radio buttons to give results.
this works fine in firefox, but in Internet Explorer once you have chosen the selections a few times it doesn't work.
can anyone help me out?
thanks!

form.asp

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript" src="calculate.js"></script>
</head>
<body style="border:0">
<form name="calc" method="POST">
<div id="ValidationResult" style="visibility: hidden;"></div>
<table width="558" cellpadding="3" cellspacing="0" class="main">
<tr>
<td width="49%" align="center"><table width="270" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="119" height="142" border="0" cellpadding="0" cellspacing="0"

class="main">
<tr>
<td width="50%" height="30" valign="top" align="center">size</td>
</tr>
<tr>
<td width="50%" valign="top" align="center"><input name="option1" type="radio" value="s"

onClick="count(document.calc.option1.value=this.value)" class="None">
S </td>
</tr>
<tr>
<td valign="top" align="center"><input name="option1" type="radio" value="m"

onClick="count(document.calc.option1.value=this.value)" class="None">
M </td>
</tr>
<tr>
<td width="50%" valign="top" align="center"><input name="option1" type="radio" value="l"

onClick="count(document.calc.option1.value=this.value)" class="None">
L </td>
</tr>
<tr>
<td valign="top" align="center"><input name="option1" type="radio" value="xl"

onClick="count(document.calc.option1.value=this.value)" class="None">
XL </td>
</tr>
</table></td>
<td valign="top"><table width="125" height="142" border="0" cellpadding="0" cellspacing="0"

class="main">
<tr>
<td width="50%" height="30" valign="top" align="center">color</td>
</tr>
<tr>
<td width="50%" valign="top" align="center"><input name="option2" type="radio" value="Red"

onClick="count(document.calc.option2.value=this.value)" class="None">
Red</td>
</tr>
<tr>
<td valign="top" align="center"><input name="option2" type="radio" value="Blue"

onClick="count(document.calc.option2.value=this.value)" class="None">
Blue</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="51%" align="center"> 
<table width="247" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" class="main">
<tr>
<td align="left">postage 
</td>
<td align="left"><input name="postage" type="text" class="main" id="postage" size="8">
</td>
</tr>
<tr>
<td width="50%" align="left">packaging 
</td>
<td width="50%" align="left"><input name="packaging" type="text" class="main" id="packaging"

size="8">
</td>
</tr>
<tr>
<td align="left">delivery 
</td>
<td align="left"><input name="delivery" type="text" class="main" id="delivery" size="8">
</td>
</tr>
<tr>
<td align="left">specialdelivery</td>
<td align="left"><input name="specialdelivery" type="text" class="main" id="specialdelivery"

size="8">
</td>
</tr>
<tr>
<td align="left">admincharge 
</td>
<td align="left"><input name="admincharge" type="text" class="admincharge" size="8">
</td>
</tr>
<tr>
<td align="left">total</td>
<td align="left"><input name="total" type="text" class="main" size="8" >
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>

checkoptions.asp

<%
If Request.ServerVariables("QUERY_STRING") = "option1=s&option2=Red" Then
Response.Write("10.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=s&option2=Blue" Then
Response.Write("11.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=m&option2=Red" Then
Response.Write("20.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=m&option2=Blue" Then
Response.Write("22.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=l&option2=Red" Then
Response.Write("30.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=l&option2=Blue" Then
Response.Write("33.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=xl&option2=Red" Then
Response.Write("40.00")
End If
If Request.ServerVariables("QUERY_STRING") = "option1=xl&option2=Blue" Then
Response.Write("44.00")
End If
%>

calculate.asp

var strAgentString = navigator.userAgent.toLowerCase(); // The agent info from the browser

var strBrowser; // Full browser name
var strBrowserCode; // Brief browser code
var strBrowserVersion; // Browser version
var strOS; // Operating system
var strWorkString; // Work string

if (InAgentString('konqueror'))
{
strBrowser = "Konqueror";
strOS = "Linux";
}
else if (InAgentString('firefox')) {
strBrowser = "Firefox";
strBrowserCode = "FF";
}
else if (InAgentString('icab')) {
strBrowser = "iCab";
strBrowserCode = "IC";
}
else if (InAgentString('msie')) {
strBrowser = "Internet Explorer";
strBrowserCode = "IE";
}
else if (InAgentString('omniweb')) {
strBrowser = "OmniWeb";
strBrowserCode = "OW";
}
else if (InAgentString('opera')) {
strBrowser = "Opera";
strBrowserCode = "OP";
}
else if (InAgentString('safari')) {
strBrowser = "Safari";
strBrowserCode = "SA";
}
else if (InAgentString('webtv')) {
strBrowser = "WebTV";
strBrowser = "WT";
}
else if (!InAgentString('compatible'))
{
strBrowser = "Netscape Navigator";
strBrowserCode = "NN";
strBrowserVersion = strAgentString.charAt(8);
}
else
{
strBrowser = "An unknown browser";
strBrowserCode = "XX";
}

if (!strBrowserVersion) strBrowserVersion = strAgentString.charAt(intPos + strWorkString.length);

if (!strOS)
{
if (InAgentString('linux')) strOS = "Linux";
else if (InAgentString('x11')) strOS = "Unix";
else if (InAgentString('mac')) strOS = "Mac"
else if (InAgentString('win')) strOS = "Windows"
else strOS = "An unknown OS";
}

function InAgentString(string) {
intPos = strAgentString.indexOf(string) + 1;
strWorkString = string;
return intPos;
}

function GetXmlHttpObject() {
var xmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
xmlHttp=new XMLHttpRequest()
return xmlHttp
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.xmlHttp"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.xmlHttp"
}
try
{
xmlHttp=new ActiveXObject(strName)
return xmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
xmlHttp=new XMLHttpRequest()
return xmlHttp
}
}

function count() {

stroption1 = document.calc.option1.value
stroption2 = document.calc.option2.value

var xmlHttp;

xmlHttp = GetXmlHttpObject();

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
total("ValidationResult", xmlHttp.responseText);
results("ValidationResult", xmlHttp.responseText);
return xmlHttp.responseText;
}
}
var URL = "checkoptions.asp";
URL = URL + "?option1=" + stroption1;
URL = URL + "&option2=" + stroption2;

xmlHttp.open("GET",URL,true);
xmlHttp.send(null);

}

function total(strDiv, strMessage) {
if (strBrowserCode == "IE" || strBrowserCode == "FF" || strBrowserCode == "NN" || strBrowserCode ==

"OP" || strBrowserCode == "SA")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.total.value=strMessage;
}
return true;
}

function results(strDiv, strMessage) {
if (document.calc.total.value == "10.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="1.00";
document.calc.packaging.value="1.00";
document.calc.delivery.value="1.00";
document.calc.specialdelivery.value="1.00";
document.calc.admincharge.value="1.00";

}
{
if (document.calc.total.value == "11.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="2.00";
document.calc.packaging.value="2.00";
document.calc.delivery.value="2.00";
document.calc.specialdelivery.value="2.00";
document.calc.admincharge.value="2.00";

}
{
if (document.calc.total.value == "20.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="3.00";
document.calc.packaging.value="3.00";
document.calc.delivery.value="3.00";
document.calc.specialdelivery.value="3.00";
document.calc.admincharge.value="3.00";

}
{
if (document.calc.total.value == "22.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="4.00";
document.calc.packaging.value="4.00";
document.calc.delivery.value="4.00";
document.calc.specialdelivery.value="4.00";
document.calc.admincharge.value="4.00";

}
{
if (document.calc.total.value == "30.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="5.00";
document.calc.packaging.value="5.00";
document.calc.delivery.value="5.00";
document.calc.specialdelivery.value="5.00";
document.calc.admincharge.value="5.00";

}
{
if (document.calc.total.value == "33.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="6.00";
document.calc.packaging.value="6.00";
document.calc.delivery.value="6.00";
document.calc.specialdelivery.value="6.00";
document.calc.admincharge.value="6.00";

}
{
if (document.calc.total.value == "40.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="7.00";
document.calc.packaging.value="7.00";
document.calc.delivery.value="7.00";
document.calc.specialdelivery.value="7.00";
document.calc.admincharge.value="7.00";

}
{
if (document.calc.total.value == "44.00")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.postage.value="8.00";
document.calc.packaging.value="8.00";
document.calc.delivery.value="8.00";
document.calc.specialdelivery.value="8.00";
document.calc.admincharge.value="8.00";

}
return true;
}
}
}
}
}
}
}
}

kaht · Mar 10, 2008

Code:

}
}
}
}
}
}
}

Seeing that is usually enough to get me to run in the opposite direction without looking back.

Maybe you should isolate the problem and only post the relevant bits - and definitely do not post server-side code (ASP), it only makes it harder to sift through to find the client-side problem.

What portion of the code above are you specifically having problems with? Perhaps you could try posting within [ignore]

Code:

[/ignore] tags to make the code easier to read as well - and also give it a degree of separation. I didn't realize the code above was supposed to be 3 separate files until I glanced over it a 3rd time.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 11, 2008

thanks kaht.
your post will help me in future postings.
i only posted each file to show what i was trying to achieve. i initially thought it might help!
basically i have a section of form where a user makes a selection from 2 groups of radio buttons.
the output of the form works in FF but in IE doesn't work if the user changes the selection a few times.

here is the radio button section of the form:

Code:

<table width="270" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="top"><table width="119" height="142" border="0" cellpadding="0" cellspacing="0"

class="main">
                <tr>
                  <td width="50%" height="30" valign="top" align="center"><strong>size</strong></td>
                </tr>
                <tr>
                  <td width="50%" valign="top" align="center"><input name="option1" type="radio" value="s"

onClick="count(document.calc.option1.value=this.value)" class="None">
                    S </td>
                </tr>
                <tr>
                  <td valign="top" align="center"><input name="option1" type="radio" value="m"

onClick="count(document.calc.option1.value=this.value)" class="None">
                    M </td>
                </tr>
                <tr>
                  <td width="50%" valign="top" align="center"><input name="option1" type="radio" value="l"

onClick="count(document.calc.option1.value=this.value)" class="None">
                    L </td>
                </tr>
                <tr>
                  <td valign="top" align="center"><input name="option1" type="radio" value="xl"

onClick="count(document.calc.option1.value=this.value)" class="None">
                    XL </td>
                </tr>
              </table></td>
            <td valign="top"><table width="125" height="142" border="0" cellpadding="0" cellspacing="0"

class="main">
                <tr>
                  <td width="50%" height="30" valign="top" align="center"><strong>color</strong></td>
                </tr>
                <tr>
                  <td width="50%" valign="top" align="center"><input name="option2" type="radio" value="Red"

onClick="count(document.calc.option2.value=this.value)" class="None">
                    Red</td>
                </tr>
                <tr>
                  <td valign="top" align="center"><input name="option2" type="radio" value="Blue"

onClick="count(document.calc.option2.value=this.value)" class="None">
                    Blue</td>
                </tr>
              </table></td>
          </tr>
        </table>

here is the results section of the form

Code:

<table width="247"  border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" class="main">
          <tr>
            <td align="left">postage<br>
            </td>
            <td align="left"><input name="postage" type="text"  class="main" id="postage" size="8">
            </td>
          </tr>
          <tr>
            <td width="50%" align="left">packaging<br>
            </td>
            <td width="50%" align="left"><input name="packaging" type="text"  class="main" id="packaging"

size="8">
            </td>
          </tr>
          <tr>
            <td align="left">delivery<br>
            </td>
            <td align="left"><input name="delivery" type="text"  class="main" id="delivery" size="8">
            </td>
          </tr>
          <tr>
            <td align="left">specialdelivery</td>
            <td align="left"><input name="specialdelivery" type="text"  class="main" id="specialdelivery"

size="8">
            </td>
          </tr>
          <tr>
            <td align="left">admincharge<br>
            </td>
            <td align="left"><input name="admincharge" type="text"  class="admincharge" size="8">
            </td>
          </tr>
          <tr>
            <td align="left">total</td>
            <td align="left"><input name="total" type="text"  class="main" size="8" >
            </td>
          </tr>
        </table>

here is the javascript function:

Code:

function count() {

     stroption1 = document.calc.option1.value
    stroption2 = document.calc.option2.value
    
    var xmlHttp;

    xmlHttp = GetXmlHttpObject();

    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            total("ValidationResult", xmlHttp.responseText);
            results("ValidationResult", xmlHttp.responseText);
            return xmlHttp.responseText;
        }
    }
    var URL = "checkoptions.asp";
    URL = URL + "?option1=" + stroption1;
    URL = URL + "&option2=" + stroption2;

    xmlHttp.open("GET",URL,true);
    xmlHttp.send(null);
    
}

function total(strDiv, strMessage) {
    if (strBrowserCode == "IE" || strBrowserCode == "FF" || strBrowserCode == "NN" || strBrowserCode ==

"OP" || strBrowserCode == "SA")
    {
            document.getElementById(strDiv).innerHTML=strMessage;
            document.calc.total.value=strMessage;
            }
            return true;
}


function results(strDiv, strMessage) {
            if (document.calc.total.value == "10.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="1.00";
                document.calc.packaging.value="1.00";
                document.calc.delivery.value="1.00";
                document.calc.specialdelivery.value="1.00";                
                document.calc.admincharge.value="1.00";

            }
            {
            if (document.calc.total.value == "11.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="2.00";
                document.calc.packaging.value="2.00";
                document.calc.delivery.value="2.00";
                document.calc.specialdelivery.value="2.00";                
                document.calc.admincharge.value="2.00";

            }
            {
            if (document.calc.total.value == "20.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";

            }
            {
            if (document.calc.total.value == "22.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="4.00";
                document.calc.packaging.value="4.00";
                document.calc.delivery.value="4.00";
                document.calc.specialdelivery.value="4.00";                
                document.calc.admincharge.value="4.00";

            }
            {
            if (document.calc.total.value == "30.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="5.00";
                document.calc.packaging.value="5.00";
                document.calc.delivery.value="5.00";
                document.calc.specialdelivery.value="5.00";                
                document.calc.admincharge.value="5.00";

            }
            {
            if (document.calc.total.value == "33.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="6.00";
                document.calc.packaging.value="6.00";
                document.calc.delivery.value="6.00";
                document.calc.specialdelivery.value="6.00";                
                document.calc.admincharge.value="6.00";

            }
            {
            if (document.calc.total.value == "40.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="7.00";
                document.calc.packaging.value="7.00";
                document.calc.delivery.value="7.00";
                document.calc.specialdelivery.value="7.00";                
                document.calc.admincharge.value="7.00";        

            }
            {
            if (document.calc.total.value == "44.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="8.00";
                document.calc.packaging.value="8.00";
                document.calc.delivery.value="8.00";
                document.calc.specialdelivery.value="8.00";                
                document.calc.admincharge.value="8.00";

            }
            return true;
            }
}
}
}
}
}
}
}

kaht · Mar 11, 2008

Since your project has ajax layered throughout, try setting up alert statements to see where it's bombing in IE. In the count, total, and results functions specifically. I'd put alerts near the tops of the functions, near the bottoms of the functions, and anywhere in between where you expect the code to be executed. Just do a simple alert("count-1") or alert("count-2") to keep track of what function you're in and what spot in the function you've completed. As soon as javascript hits an error it ceases to execute any more code - so, this will tell you exactly what part of your code is causing IE to crash. At that point, you will have narrowed down your problem.

On a side note, this is how I (and many other javascripters) find elusive errors in my javascript code. It's a good practice to use when you're not sure why something is happening the way it is.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 11, 2008

thanks kaht! that's a great tip!
unfortunately i've added as many alerts as i can and they all show.
does this mean it is not a javascript problem?
thanks.

kaht · Mar 11, 2008

IE doesn't work if the user changes the selection a few times

What does this mean exactly? What isn't IE doing? Which function do you think is messing up? Are all the fields not being populated from the results function? Why not changing that block of ifs to else ifs? In the event that none of the ifs are true, your function isn't going to appear to do anything. Since all the conditions are mutually exclusive, there's no reason to not use else ifs. This will also speed up your function by a millisecond or 2 because once it finds a match it doesn't have to evaluate the other ifs. Putting a final else at the bottom will handle all instances where you didn't find a match. Try this and see what happens:

Code:

function results(strDiv, strMessage) {
            if (document.calc.total.value == "10.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="1.00";
                document.calc.packaging.value="1.00";
                document.calc.delivery.value="1.00";
                document.calc.specialdelivery.value="1.00";                
                document.calc.admincharge.value="1.00";

            }
            {
            [!]else [/!]if (document.calc.total.value == "11.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="2.00";
                document.calc.packaging.value="2.00";
                document.calc.delivery.value="2.00";
                document.calc.specialdelivery.value="2.00";                
                document.calc.admincharge.value="2.00";

            }
            {
            [!]else [/!]if (document.calc.total.value == "20.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";

            }
.
.
.
.
.
.
.
            [!]else 
            {
                alert(document.calc.total.value + " did not match any conditions");
            }[/!]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 11, 2008

thanks again!
i think basically IE isn't returning the 'document.calc.total.value' as it is not showing on the form and therefore the rest of the fields aren't showing.
i'm not sure which function is messing up.
thanks.

kaht · Mar 11, 2008

Did you try the suggestion from my last post? Did it hit the last else condition, and if so - what did it alert? You said 2 posts ago that you added a bunch of alerts to the code, and they were all alerting - this means that the flow of the code should be getting as far as my suggested changes above.

What do you mean by

IE isn't returning the 'document.calc.total.value' as it is not showing on the form

It's a hardcoded element in your form, it should always be "showing up". One thing you might want to avoid is having an element named "total" and a function named "total" as well. This shouldn't cause a problem, but you know... just in case.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 12, 2008

thanks again kaht!
what i mean by 'showing on the form' is the value 'document.calc.total.value' doesn't show in IE if the user changes the selection a few times.
it also doesn't show in the div tag on the form.asp page when i remove the hidden feature.

Code:

<div id="ValidationResult" style="visibility: hidden;"></div>

i agree the element and function shouldn't have the same name.
do you think it could possibly be the 'total' function that is causing the problem? possibly 'strBrowserCode == "IE"' should have a separate 'if' statement. does the code below need to be different for 'IE'

Code:

document.getElementById(strDiv).innerHTML=strMessage;
document.calc.total.value=strMessage;

your help is much appreciated!

kaht · Mar 12, 2008

what i mean by 'showing on the form' is the value 'document.calc.total.value' doesn't show in IE if the user changes the selection a few times.

You're just reiterating what you've said in above posts. I wanted you to clarify what you mean. I told you above that I think it's the results function because the way you have it coded, if there's not a direct match to the value in the total field to one of the values you're checking for then the function simply won't do anything since you don't have an else condition on the string of ifs.

Does the element visually disappear from the form somehow?
Does the element still visually appear on the screen, but the value doesn't change?
Do you have some javascript code to change the visibility or display property of that element that I'm not seeing?
Do you have some function scripted to remove that element from the DOM that I'm not seeing?

If the problem is that the element is disappearing from the screen, then it sounds like an IE6 peekaboo bug (which is not javascript related), but from what you've posted I wouldn't guess that would be the case. It usually only happens with complex CSS layouts.

do you think it could possibly be the 'total' function that is causing the problem? possibly 'strBrowserCode == "IE"' should have a separate 'if' statement. does the code below need to be different for 'IE'

Honestly, I don't really have a clue what could be the problem at this point because I haven't got a clear answer on what is happening. If I don't know what's going wrong, it's hard for me to give you an honest suggestion.

I don't think that it's the strBrowserCode that is causing problems. IE understands the getElementById method perfectly well. Additionally, it understands the document.calc.total syntax just fine as well. On a side note, you should be using the forms and elements collections to reference these items in this manner because it can avoid silly problems down the road (like a submit button accidentally named submit). The syntax would be like this:

Code:

document.forms["calc"].elements["total"].value = strMessage;

On a side note, what is the point of all that browser detection garbage? That is a very old style of coding that is just plain not needed. Google the subject, or just read this link if you'd like more information:

http://www.evotech.net/blog/2007/07/browser-detection-versus-object-detection/

me said:
Did you try the suggestion from my last post?

You never answered this question from my last post. The code I wrote is from 2 posts ago now. It's hard to give advice to you if I don't even know if you're going to use it. Additionally, it's hard to give progressive advice if I don't know the status of previous suggestions. When trying to blindly debug a problem like this, your feedback is all I have to go on since I cannot change the code. Answering questions like these are important steps toward getting your problem solved. Please do not make me waste my time offering suggestions if they are not going to be used...

Do you have a link to this site so that I can examine the behavior myself?

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 12, 2008

hi kaht. thank you for your help.

Does the element visually disappear from the form somehow?

Yes it removes the result from the field after a few different selections (IE only).

Does the element still visually appear on the screen, but the value doesn't change?

No element appears it is just blank

Do you have some javascript code to change the visibility or display property of that element that I'm not seeing?

No, it is just the 'ValidationResult' div from the 'count' function.

Do you have some function scripted to remove that element from the DOM that I'm not seeing?

No.

You never answered this question from my last post. The code I wrote is from 2 posts ago now. It's hard to give advice to you if I don't even know if you're going to use it.

Yes I have followed each step of your advice. Apologies for not mentioning that.

On a side note, what is the point of all that browser detection garbage?

I just thought it would be needed and left it in whilst trying to get the rest to work. thanks for the link.

Do you have a link to this site so that I can examine the behavior myself?

Unfortunately not, i am currently working locally...but below is the code.

calculate.js

Code:

var strAgentString = navigator.userAgent.toLowerCase(); // The agent info from the browser

var strBrowser;        // Full browser name
var strBrowserCode;    // Brief browser code
var strBrowserVersion; // Browser version
var strOS;             // Operating system
var strWorkString;     // Work string

if (InAgentString('konqueror'))
{
    strBrowser = "Konqueror";
    strOS = "Linux";
}
else if (InAgentString('firefox')) {
    strBrowser = "Firefox";
    strBrowserCode = "FF";
}
else if (InAgentString('icab')) {
    strBrowser = "iCab";
    strBrowserCode = "IC";
}
else if (InAgentString('msie')) {
    strBrowser = "Internet Explorer";
    strBrowserCode = "IE";
}
else if (InAgentString('omniweb')) {
    strBrowser = "OmniWeb";
    strBrowserCode = "OW";
}
else if (InAgentString('opera')) {
    strBrowser = "Opera";
    strBrowserCode = "OP";
}
else if (InAgentString('safari')) {
    strBrowser = "Safari";
    strBrowserCode = "SA";
}
else if (InAgentString('webtv')) {
    strBrowser = "WebTV";
    strBrowser = "WT";
}
else if (!InAgentString('compatible'))
{
    strBrowser = "Netscape Navigator";
    strBrowserCode = "NN";
    strBrowserVersion = strAgentString.charAt(8);
}
else
{
    strBrowser = "An unknown browser";
    strBrowserCode = "XX";
}

if (!strBrowserVersion) strBrowserVersion = strAgentString.charAt(intPos + strWorkString.length);

if (!strOS)
{
    if (InAgentString('linux')) strOS = "Linux";
    else if (InAgentString('x11')) strOS = "Unix";
    else if (InAgentString('mac')) strOS = "Mac"
    else if (InAgentString('win')) strOS = "Windows"
    else strOS = "An unknown OS";
}

function InAgentString(string) {
    intPos = strAgentString.indexOf(string) + 1;
    strWorkString = string;
    return intPos;
}

function GetXmlHttpObject() {
    var xmlHttp=null
    
    if (navigator.userAgent.indexOf("Opera")>=0)
    {
        xmlHttp=new XMLHttpRequest()
        return xmlHttp
    }
    if (navigator.userAgent.indexOf("MSIE")>=0)
    {
        var strName="Msxml2.xmlHttp"
        if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
        {
            strName="Microsoft.xmlHttp"
        }
        try
        {
            xmlHttp=new ActiveXObject(strName)
            return xmlHttp
        }
            catch(e)
        {
            alert("Error. Scripting for ActiveX might be disabled")
            return
        }
    }
    if (navigator.userAgent.indexOf("Mozilla")>=0)
    {
        xmlHttp=new XMLHttpRequest()
        return xmlHttp
    }
}

function one(strDiv, strMessage) {
	if (strBrowserCode == "IE" || strBrowserCode == "FF" || strBrowserCode == "NN" || strBrowserCode == "OP" || strBrowserCode == "SA")
	{
			document.getElementById(strDiv).innerHTML=strMessage;
    		document.calc.total.value=strMessage;
			}
			return true;
}

function count() {

    stroption1 = document.calc.option1.value
    stroption2 = document.calc.option2.value
    
    var xmlHttp;

    xmlHttp = GetXmlHttpObject();

    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            one("ValidationResult", xmlHttp.responseText);
            two("ValidationResult", xmlHttp.responseText);
            return xmlHttp.responseText;
        }
    }
    var URL = "checkoptions.asp";
    URL = URL + "?option1=" + stroption1;
    URL = URL + "&option2=" + stroption2;

    xmlHttp.open("GET",URL,true);
    xmlHttp.send(null);
    
}

function two(strDiv, strMessage) {
            if (document.calc.total.value == "10.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="1.00";
                document.calc.packaging.value="1.00";
                document.calc.delivery.value="1.00";
                document.calc.specialdelivery.value="1.00";                
                document.calc.admincharge.value="1.00";
			}
			else if (document.calc.total.value == "11.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="2.00";
                document.calc.packaging.value="2.00";
                document.calc.delivery.value="2.00";
                document.calc.specialdelivery.value="2.00";                
                document.calc.admincharge.value="2.00";
			}
			else if (document.calc.total.value == "20.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
			}
			else if (document.calc.total.value == "30.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
			}
			else if (document.calc.total.value == "33.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
			}
			else if (document.calc.total.value == "40.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
			}
			else if (document.calc.total.value == "44.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
			}
			}

checkoptions.asp

Code:

<%
    If Request.ServerVariables("QUERY_STRING") = "option1=s&option2=Red" Then
        Response.Write("10.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=s&option2=Blue" Then
        Response.Write("11.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=m&option2=Red" Then
        Response.Write("20.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=m&option2=Blue" Then
        Response.Write("22.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=l&option2=Red" Then
        Response.Write("30.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=l&option2=Blue" Then
        Response.Write("33.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=xl&option2=Red" Then
        Response.Write("40.00")
    End If
    If Request.ServerVariables("QUERY_STRING") = "option1=xl&option2=Blue" Then
        Response.Write("44.00")
    End If
%>

form.asp

Code:

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript" src="calculate.js"></script>
</head>
<body style="border:0">
<form name="calc" method="POST">
  <div id="ValidationResult" style="visibility: hidden;"></div>
  <table width="558" cellpadding="3" cellspacing="0" class="main">
    <tr>
      <td width="49%" align="center"><table width="270" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="top"><table width="119" height="142" border="0" cellpadding="0" cellspacing="0" class="main">
                <tr>
                  <td width="50%" height="30" valign="top" align="center"><strong>size</strong></td>
                </tr>
                <tr>
                  <td width="50%" valign="top" align="center"><input name="option1" type="radio" value="s"

onClick="count(document.calc.option1.value=this.value)" class="None">S</td>
                </tr>
                <tr>
                  <td valign="top" align="center"><input name="option1" type="radio" value="m"

onClick="count(document.calc.option1.value=this.value)" class="None">M</td>
                </tr>
                <tr>
                  <td width="50%" valign="top" align="center"><input name="option1" type="radio" value="l"

onClick="count(document.calc.option1.value=this.value)" class="None">L</td>
                </tr>
                <tr>
                  <td valign="top" align="center"><input name="option1" type="radio" value="xl"

onClick="count(document.calc.option1.value=this.value)" class="None">XL</td>
                </tr>
              </table></td>
            <td valign="top"><table width="125" height="142" border="0" cellpadding="0" cellspacing="0" class="main">
                <tr>
                  <td width="50%" height="30" valign="top" align="center"><strong>color</strong></td>
                </tr>
                <tr>
                  <td width="50%" valign="top" align="center"><input name="option2" type="radio" value="Red" onClick="count(document.calc.option2.value=this.value)" class="None">
                    Red</td>
                </tr>
                <tr>
                  <td valign="top" align="center"><input name="option2" type="radio" value="Blue" onClick="count(document.calc.option2.value=this.value)" class="None">
                    Blue</td>
                </tr>
              </table></td>
          </tr>
        </table></td>
      <td width="51%" align="center"><p>&nbsp;</p>
        <table width="247"  border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC" class="main">
          <tr>
            <td align="left">postage<br>
            </td>
            <td align="left"><input name="postage" type="text"  class="main" id="postage" size="8">
            </td>
          </tr>
          <tr>
            <td width="50%" align="left">packaging<br>
            </td>
            <td width="50%" align="left"><input name="packaging" type="text"  class="main" id="packaging" size="8">
            </td>
          </tr>
          <tr>
            <td align="left">delivery<br>
            </td>
            <td align="left"><input name="delivery" type="text"  class="main" id="delivery" size="8">
            </td>
          </tr>
          <tr>
            <td align="left">specialdelivery</td>
            <td align="left"><input name="specialdelivery" type="text"  class="main" id="specialdelivery" size="8">
            </td>
          </tr>
          <tr>
            <td align="left">admincharge<br>
            </td>
            <td align="left"><input name="admincharge" type="text"  class="admincharge" size="8">
            </td>
          </tr>
          <tr>
            <td align="left">total</td>
            <td align="left"><input name="total" type="text"  class="main" size="8" >
            </td>
          </tr>
        </table></td>
    </tr>
  </table>
</form>
</body>
</html>

kaht · Mar 12, 2008

The debugging portion of the if block is missing. This was the most important element of what I posted originally. Put it back in and do your test with IE a few times. Then tell me what happens:

Code:

function two(strDiv, strMessage) {
            if (document.calc.total.value == "10.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="1.00";
                document.calc.packaging.value="1.00";
                document.calc.delivery.value="1.00";
                document.calc.specialdelivery.value="1.00";                
                document.calc.admincharge.value="1.00";
            }
            else if (document.calc.total.value == "11.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="2.00";
                document.calc.packaging.value="2.00";
                document.calc.delivery.value="2.00";
                document.calc.specialdelivery.value="2.00";                
                document.calc.admincharge.value="2.00";
            }
            else if (document.calc.total.value == "20.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
            }
            else if (document.calc.total.value == "30.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
            }
            else if (document.calc.total.value == "33.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
            }
            else if (document.calc.total.value == "40.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
            }
            else if (document.calc.total.value == "44.00")            
            {    
                document.getElementById(strDiv).innerHTML=strMessage;
                document.calc.postage.value="3.00";
                document.calc.packaging.value="3.00";
                document.calc.delivery.value="3.00";
                document.calc.specialdelivery.value="3.00";                
                document.calc.admincharge.value="3.00";
            }
            [!]else {
               alert("error: " + document.forms["calc"].elements["total"].value);
            }[/!]
            }

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

kaht · Mar 12, 2008

also change this:

Code:

function one(strDiv, strMessage) {
    if (strBrowserCode == "IE" || strBrowserCode == "FF" || strBrowserCode == "NN" || strBrowserCode == "OP" || strBrowserCode == "SA")
    {
            document.getElementById(strDiv).innerHTML=strMessage;
            document.calc.total.value=strMessage;
            }
            [!]else {
               alert("error browser code: " + strBrowserCode);
            }[/!]
            return true;
}

This is likely not the cause, but we're just grasping at straws at this point.

One helpful tip - don't ever put an if clause that performs an important task w/o an else clause. In the event that the if clause doesn't evaluate to true, you're gonna get some weird and unexpected results.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 12, 2008

Thanks again!
Okay, I've now added the debugging portion of the if block to the 'function two' as well as the change to the 'function one'
The error message is brought up when the 'document.calc.total.value' isn't shown on the form.
It also shows up occasionally showing the value next to the error.
i.e. error: 22.00.
I can't seem to find a pattern to whether it works or not!

kaht · Mar 12, 2008

The error message is brought up when the 'document.calc.total.value' isn't shown on the form.

In which case, what value does the error provide? Is it error: undefined, error: null, error: <with no value supplied> ?? These are important details that you should post.

Does the element visually disappear from the form somehow?

Click to expand...

Yes it removes the result from the field after a few different selections (IE only).

This is not really what I was asking. When I ask if the element visually disappears from the form, then I'm talking about the textbox not existing anymore. From your reply, it sounds like you're saying that the value in the textbox is erased, but the textbox still exists on the form. If this is the case, it's no surprise that nothing was happening because how is an empty textbox supposed to meet the criteria of any of the if conditions you posted in your code? If the total textbox has no content, I'm going to guess that the error message you're getting is error: (with no value), right?

It also shows up occasionally showing the value next to the error.
i.e. error: 22.00.

Of course it does, check your if conditionals in your code. Nowhere is it checking for a value of 22.00 - obviously it's not going to do anything in that instance.

Just out of curiosity, did you write the code you've posted above or have you been assigned to make changes to it?

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

micawber · Mar 13, 2008

Thanks Kaht.
With regards to the error message, when no 'total' is shown the error message is simply 'error:' nothing else.
Yes when the error message the value in the textbox is erased.

Just out of curiosity, did you write the code you've posted above or have you been assigned to make changes to it?

I am 'trying' to make changes to the code. It isn't all mine own.
Thanks.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form/Radio Button Output Results 1

micawber

Programmer

kaht

Programmer

micawber

Programmer

kaht

Programmer

micawber

Programmer

kaht

Programmer

micawber

Programmer

kaht

Programmer

micawber

Programmer

kaht

Programmer

micawber

Programmer

kaht

Programmer

kaht

Programmer

micawber

Programmer

kaht

Programmer

micawber

Programmer

Similar threads

Part and Inventory Search

Sponsor