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!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

asp ajax querystring dropdown form 1

Status
Not open for further replies.

micawber

Programmer
Dec 10, 2002
71
GB
hi,
i would like to be able to return more than one value to the page once the two dropdown menus have been selected.
at the moment i am only able to return one.
can anyone help?
any help would be greatly appreciated!
many thanks.

here is the code so far:

// form.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<script language="JavaScript" type="text/javascript" src="calculate.js"></script>
</head>
<body>
<div id="ValidationResult">Result</div>
<form name="calc" method="post">
<table width="439" border="0" cellpadding="3">
<tr>
<th width="30%" align="center">Amount</th>
<th align="center">Color</th>
</tr>
<tr>
<td align="center"><select name="option1" onClick="count()">
<option value=""></option>
<option value="10">£10</option>
<option value="20">£20</option>
<option value="30">£30</option>
<option value="40">£40</option>
</select>
</td>
<td width="40%" align="center"><select name="option2" onClick="count()">
<option value=""></option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
</td>
</tr>
</table>
<table width="439" border="0" cellpadding="3">
<tr>
<td width="236"></td>
<td width="276"><div align="right"><strong>Premium:</strong>
<input name="pay" type="text">
</div></td>
</tr>
<tr>
<td colspan="2"><div align="right">
<input type="reset" value="Reset">
</div></td>
</tr>
</table>
</form>
</body>
</html>


// calculate.js

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 check(regex,current){

re = new RegExp(regex);
for(i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements;
if (elm.type == 'checkbox') {
if (re.test(elm.name)) {
elm.checked = false;
}
}
}
current.checked = true;
}

function count() {

// Collect FORM fields
stroption1 = document.calc.option1.options[document.calc.option1.selectedIndex].value
stroption2 = document.calc.option2.options[document.calc.option2.selectedIndex].value

// Send/recv
var xmlHttp;

xmlHttp = GetXmlHttpObject();

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
pay("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 pay(strDiv, strMessage) {
if (strBrowserCode == "IE" || strBrowserCode == "FF" || strBrowserCode == "NN" || strBrowserCode == "OP" || strBrowserCode == "SA")
{
document.getElementById(strDiv).innerHTML=strMessage;
document.calc.pay.value=strMessage;
}
return true;
}


// checkoptions.asp


<%
If Request.Querystring("option1") = "10" AND Request.Querystring("option2") = "Red" Then
Response.Write("10 Red")
End If
If Request.Querystring("option1") = "10" AND Request.Querystring("option2") = "Blue" Then
Response.Write("10 Blue")
End If
If Request.Querystring("option1") = "20" AND Request.Querystring("option2") = "Red" Then
Response.Write("20 Red")
End If
If Request.Querystring("option1") = "20" AND Request.Querystring("option2") = "Blue" Then
Response.Write("20 Blue")
End If
If Request.Querystring("option1") = "30" AND Request.Querystring("option2") = "Red" Then
Response.Write("30 Red")
End If
If Request.Querystring("option1") = "30" AND Request.Querystring("option2") = "Blue" Then
Response.Write("30 Blue")
End If
If Request.Querystring("option1") = "40" AND Request.Querystring("option2") = "Red" Then
Response.Write("40 Red")
End If
If Request.Querystring("option1") = "40" AND Request.Querystring("option2") = "Blue" Then
Response.Write("40 Blue")
End If
%>
 
Hi,
Can anyone point me in the right direction with this one?
Many thanks!
 
can anyone help?
I just need to be able to return more than one value once each of the dropdown boxes have been selected. so basically just as premium is returned, return more fields.
thanks.
 
If the checkoptions.asp file is changed to return multiple values then you'll want to change the javascript that runs in the browser so that it will be expecting multiple return values and parse the return value accordingly.
 
I have taken a look of the script. For those highly correlated functionalities, having a bit more solid understanding of each functional block will reward you big in saving time and effort.

[1] On the client-side, you make a simple validation. This client-side validation is to help lessening the burden of unnecessay traffic. Final validation rests on the server-side script.
[tt]
function count() {

// Collect FORM fields
[blue]var stroption1 = document.calc.option1.value[/blue]
[blue]var stroption2 = document.calc.option2.value[/blue]
[red]if (stroption1=="" || stroption2 =="") {
return false; //false is arbitrarily chosen, not by any rule
}[/red]

// Send/recv
var xmlHttp;

[blue]//continue with the exiting lines...[/blue]

}[/tt]

[1.1] I have simplified the expression to obtain the stroption1 and stroption2, but that is not essential.

[2] As to the nature of what is doing in the response page, if you want to return empty if not both select-one elements are being properly selected, you need further validating them again to make sure. The page can be much simplified still.
[tt]
<%
dim soption1, soption2
soption1=Request.Querystring("option1")
soption2=Request.Querystring("option2")

If len(soption1)<>0 and len(soption2)<>0 Then
Response.Write soption1 & " " & soption2
else 'not strictly necessary
Response.write "some error message or empty"
End If
%>[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top