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!

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

taxi quote system. help needed to reload a page.

Status
Not open for further replies.
tonyx666

tonyx666

MIS
Apr 13, 2006
214
GB
hello, i have had much help from these forums and am forever grateful for the time and stress that they have saved me in the past.

i have a quote system for my website that i wish to develop.

i like the idea of pages that refresh instantly with new data if something is pressed and that is what i want to learn to do.

the page is here http://www.londonheathrowcars.com/blankquote.asp

basically i want to begin to understand how the 'refresh page' thing can be acheived without redirecting my user to another page...

here is the code for that simple page. if someone could tell me what step i would need to take to ensure that the page refreshes when one of the radio buttons is selected..

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title> | </title>

<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="menu.js"></script>



</head>
<body>

	<div id="wrap">
		
		

<div id="bleft">
	<h1 class="top">Online Quote Finder</h1>
	<form name="form" method="post" action="none-yet.asp" onSubmit="return IsQuoteFormComplete()">
			<p class="mainbody">Please choose your type of journey to get a quote:</p><br>
				<form name="form" method="post" action="redirect.asp" onSubmit="return IsQuoteFormComplete()">
				<p class="mainbody">
					<input type="radio" VALUE="v2" name="r1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;&nbsp;Travel From Heathrow	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp	<input type="radio" VALUE="v1" name="r1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;&nbsp;Travel To Heathrow<br>
					

</form>
<br><br><br>
</div>


<div id="bright">
	
</div>


			
	</div>

</body>




</html>

thanks in advance for any solutions..

kiss first.. cum later
 
Sort by date Sort by votes
Okay then you would want to us AJAX to do this... Its very simple once you get the jist of it... I'll explain for you:


Create a javascript file called "ajax.js"

add the following code:

This basicly creats the AJAX/XML object or whatever you'd like to call it... im not to good with the technical terms of this stuff... This code below you will use again and again to connect to "AJAX" when you need to...
Code: 
function createRequestObject() {
    var ro;
    /*@cc_on
    @if (@_jscript_version >= 5)
        try {
            ro = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ro = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                ro = false;
            }
        }
    @else
        ro = false;
    @end @*/
    if (!ro && typeof XMLHttpRequest != 'undefined') {
        try {
            ro = new XMLHttpRequest();
        } catch (e) {
            ro = false;
        }
    }
    return ro;
}


okay now here is the fun part the below code will be added to the .js file you made above as well...:

The code below makes a request to your URL of the content you want to show in this example the page name is what_ever_page_you_want_to_show.asp on this script you do not need to do the whole <html> tags over again, because the main page you are calling it from already has this...

Code: 
var xmlHttp = null;
function LoadContent() {
		xmlHttp = createRequestObject();
		var url="what_ever_page_you_want_to_show.asp"
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}



function LoadContentComplete() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
	  document.getElementById('thecellid').innerHTML = xmlHttp.responseText;
   }
}


as you see above there are two javascript functions LoadContent() and LoadContentComplete()

LoadContent() // makes a "GET" request for your script

LoadContentComplete() // tells you when its complete and outputs the page into your main page


on the LoadContentComplete function you see this line

Code: 
document.getElementById('thecellid').innerHTML = xmlHttp.responseText;

This is what tells the content of that page to goto so in our main page if we have this:

Code: 
<table width="100%" border="0" cellspacing="0">
  <tr>
    <td id="thecellid">CONTENT LOADS HERE</td>
  </tr>
</table>

the content would load where it says "CONTENT LOADS HERE" because we have a cell id asigned to that...

To run this make sure on your main asp page that you have the ajax.js included like so

Code: 
<head>
<script type="text/javascript" src="/ajax.js"></script>
</head>

then to call the function to load it you just do this:

Code: 
<input name="radiobutton" type="radio" value="radiobutton" onclick="LoadContent();"/>


Now i see that you have two radio buttons, thus you would have two different things to load... you can do this a few ways... you will have to modify LoadContent() to fit your needs, here is two ways that i can think off the top of my head there are a few more that would work also.

Code: 
function LoadContent(url) {
		xmlHttp = createRequestObject();
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}

// then you would call your content based on the page name
LoadContent('content1.asp');
LoadContent('content2.asp');
// ofcourse the above would be called on a onclick event...


you could also call different content by using a querystring like so:


Code: 
function LoadContent(pageid) {
		xmlHttp = createRequestObject();
		var url="your_content.asp?page=" + pageid;
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');

}


LoadContent('content_sub1');  // or however you program your asp script...


Hope that helps, let me know if you get it working okay i can help you if there is a problem... Also one other thing, I highly recommend getting Firefox if you dont use it, and install this extension on there its kind of weird to use at first, but someone on tek-tips just told me about it today... and i wish i would have had it way back when i started using AJAX... it helps to debug errors in javascript / ajax etc... very nice extension.




Jason

Army : Combat Engineer : 21B
 
Upvote 0 Downvote
ok ive heard about ajax..

would something like the following be an alternative..

the page at the moment loads drop down values from my database...

could this page be altered to only display that drop down if the first radio button is pressed.. and then load another drop down if the second radio is pressed..

or would you reccomend using ajax because in the long run my life will be easier

here is the page url and the code at the moment..

http://www.londonheathrowcars.com/blankquote.asp

page
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title> | </title>

<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="menu.js"></script>


<%
set myconn = Server.CreateObject("ADODB.connection")
connection = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" &_
Server.MapPath("/_db_import/prices.mdb") & ";"
myconn.open (connection)

set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select townNAME from tblTOWN", myconn
%>


</head>
<body>

	<div id="wrap">
		
		

<div id="bleft">


<br><br><br>
</div>


<div id="bright">
<form name="form1" id="form1" method="post" action="">
  <p>
    <label>
    <input type="radio" name="RadioGroup1" value="rad1" onclick="this.form.submit()" />
    option1</label>
    <br />
    <label>
    <input type="radio" name="RadioGroup1" value="rad2" onclick="this.form.submit()" />
    option2</label>
    <br />
  </p>
  <p>
    <select class="droppy" name="postcode">
<option value="">...</option>
<% 
if not rs.eof then
do until rs.eof 
%>
<option class="grey" value="<%=rs("townName")%>"><%=rs("townName")%></option>
<%
rs.movenext
loop
end if
%>
</select>
</p>
</form>
<%
If Len(Request.Form) > 0 Then
	For Each Item In Request.Form
		Response.Write Item & ": " & Request.Form(Item) & "<br>"
	Next
End If
%>
</div>


			
	</div>

</body>




</html>

kiss first.. cum later
 
Upvote 0 Downvote
You can use AJAX with what you are doing, just put your drop downs in the .asp script and call that script into whatever cell you want the drop down in... once you mess around with AJAX for like an hour it will click... I would start by following my steps above, once you get it... backup that script, then mess around with it for 30 more minutes till you grasp the concept... then i promise everything that can be ajax you'll do in ajax.. :D it sounds scary at first... trust me... I started using it less than a month ago, and basicly wrote something similar to GMAIL using ajax.... and im a newbie..

See it here:




--------------------------------------

Army : Combat Engineer : 21B
 
Upvote 0 Downvote
waaat, serious..

damn, ok the time here in london is 15.26

im gonna mess about with it for 1 hour and report my findings..

kiss first.. cum later
 
Upvote 0 Downvote
ok im trying to load google.com into this table id and i got some mad error message.. have a look at this..

http://www.londonheathrowcars.com/ajax/blankquote.asp

here is my page and my ajax.js...

page
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title> | </title>

<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="ajax.js"></script>



</head>

<body>
<div id="wrap">
		
		

<div id="bleft">

<form>
<input name="radiobutton" type="radio" value="radiobutton" onclick="LoadContent();"/>
</form>


</div>


<div id="bright">
<table width="100%" border="0" cellspacing="0">
  <tr>
    <td id="thecellid">CONTENT LOADS HERE</td>
  </tr>
</table>
</div>


			
</div>
</body>
</html>


ajax.js
Code: 
function createRequestObject() {
    var ro;
    /*@cc_on
    @if (@_jscript_version >= 5)
        try {
            ro = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ro = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                ro = false;
            }
        }
    @else
        ro = false;
    @end @*/
    if (!ro && typeof XMLHttpRequest != 'undefined') {
        try {
            ro = new XMLHttpRequest();
        } catch (e) {
            ro = false;
        }
    }
    return ro;
}


var xmlHttp = null;
function LoadContent() {
        xmlHttp = createRequestObject();
        var url="[URL unfurl="true"]http://www.google.com"[/URL]
        xmlHttp.open('GET', url, true);
        xmlHttp.onreadystatechange = LoadContentComplete;
        xmlHttp.send('');
}



function LoadContentComplete() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      document.getElementById('thecellid').innerHTML = xmlHttp.responseText;
   }
}

kiss first.. cum later
 
Upvote 0 Downvote
Dont do an outside URL use a script on your server ie...

your_content.asp


I dont think an outside URL will work...


Army : Combat Engineer : 21B

 
Upvote 0 Downvote
oh rite.. ok let me just change that..

kiss first.. cum later
 
Upvote 0 Downvote
yes ok.. i have made it work.. it now loads a simple page i made..

ok let me just develop the form a little and see what happens.. give me 5 minutes..

kiss first.. cum later
 
Upvote 0 Downvote
congrats on your first AJAX... trust me anything you do from here on out will be a snap... you can load anything using AJAX like you just did... you can even POST using AJAX too... so you could basicly post a form without reloading the page also... but that takes 2 more lines of code.. ;)

Army : Combat Engineer : 21B

 
Upvote 0 Downvote
great.. what i have done is make each radio load a different page.. you can see it here..

http://www.londonheathrowcars.com/ajax/blankquote.asp

so what else can be done with this..

for example. if you load the page that has the drop down, if i choose a postcode on the drop down.. how can i make more things happen

kiss first.. cum later
 
Upvote 0 Downvote
just fiddle with it dude, you'll get it... i cant stress this enough SEARCh google.

I always do this for my searches on google:

javascrpt dropdwon
javascript onchange
javascript onclick

etc etc

Jason


Army : Combat Engineer : 21B

 
Upvote 0 Downvote
ok i am getting somewhere slowly..

this is what the page looks like at the moment..
http://www.londonheathrowcars.com/ajax/blankquote.asp

you choose a radio button and a specific page loads in the table directly below the radio button form..

i have allocated where the information loads in my ajax.js file like so (the bold part is the table id that loads the page being opened)..

Code: 
function createRequestObject() {
	var ro;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			ro = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				ro = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				ro = false;
			}
		}
	@else
		ro = false;
	@end @*/
	if (!ro && typeof XMLHttpRequest != 'undefined') {
		try {
			ro = new XMLHttpRequest();
		} catch (e) {
			ro = false;
		}
	}
	return ro;
}


var xmlHttp = null;
function LoadPostcodes() {
		xmlHttp = createRequestObject();
		var url="quote1.asp"
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}


var xmlHttp = null;
function LoadContent2() {
		xmlHttp = createRequestObject();
		var url="quote2.asp"
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}

var xmlHttp = null;
function LoadAirports() {
		xmlHttp = createRequestObject();
		var url="quote3.asp"
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}


var xmlHttp = null;
function LoadSeaports() {
		xmlHttp = createRequestObject();
		var url="quote4.asp"
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}


function LoadContentComplete() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
	  document.getElementById('[b]thecellid[/b]').innerHTML = xmlHttp.responseText;
   }
}

then i just use the onclick="LoadSeaports()" and loadwoteverfuntion method to make the form radio buttons work..

this is fine..

however.. in the table.. a new page is loaded.. here is an example of one of those pages, they are all pretty much identical for the 4 radio buttons, the only difference is they load a different set of values from my database into the combo..

Code: 
<html>
<head>

<%
set myconn = Server.CreateObject("ADODB.connection")
connection = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" &_
Server.MapPath("/_db_import/prices.mdb") & ";"
myconn.open (connection)

set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select townNAME from tblTOWN", myconn
%>

</head>
<body>
<form>
<p class="mainbody"><b>London Postcode</b>:<br>
Please choose your destination:<br><br>
	<select class="droppy" name="postcode">
<option value="">...</option>
<%
if not rs.eof then
do until rs.eof
%>
<option class="grey" value="<%=rs("townName")%>"><%=rs("townName")%></option>
<%
rs.movenext
loop
end if
%>
</select>
</p>
</form>
</body>


</html>

my question is this.. on my main page blankquote.asp i have 2 divs.. bleft and bright.. at the moment the main form and the table container are in the bleft div.. what i want now is when a user chooses a value from one of the drop downs (which is in a different page.. but held in the table container on my main page.. )..

when they select a value from the drop down.. a new page loads in another container in the 'bright' div (on the right hand side..)

will this be possible.. i hope you lot get what i mean.. i will be more than happy to explain in more detail if you dont.. anyone got any ideas..

my first incling would be to add a function in my ajax.js file.. that uses the same method.. allocates a container and loads a certain page in that container..

i will then put that new container in the 'bright' div and then add some kind of onselect property to the drop down.. but because the drop down is on a page within my main page.. and the new container is on the main page im not sure if it will work..

any ideas people?

here is the code for the Main page by the way..

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title> | </title>

<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="ajax.js"></script>



</head>

<body>
<div id="wrap">
		
		

<div id="bleft">
<h1 class="top">Travel From Heathrow</h1>
<form name="quoteform">
<p class="mainbody">Please choose your destination:<br><Br>
		<input type="radio" VALUE="v1" name="r1" onMouseOver="style.cursor='pointer'" onclick="LoadPostcodes();">&nbsp;&nbsp;&nbsp;<b>London Postcode</b> (N1, WC2, E14 etc..)<br><br>

		<input type="radio" VALUE="v2" name="r1" onMouseOver="style.cursor='pointer'" onclick="LoadContent2()";>&nbsp;&nbsp;&nbsp;<b>Town / Location</b> (Cambridge, Brighton etc..)<br><br>
		
		<input type="radio" VALUE="v3" name="r1" onMouseOver="style.cursor='pointer'" onclick="LoadAirports()";>&nbsp;&nbsp;&nbsp;<b>UK Airport</b> (Gatwick, Stansted etc..)<br><br>
		
		<input type="radio" VALUE="v4" name="r1" onMouseOver="style.cursor='pointer'" onclick="LoadSeaports()";>&nbsp;&nbsp;&nbsp;<b>UK Seaport</b> (Dover, Harwich etc..)<br><br><br>

</form>


<table width="100%" border="0" cellspacing="0">
  <tr>
    <td id="thecellid"></td>
  </tr>
</table>

<br>

<br>
</div>


<div id="bright">



</div>


			
</div>
</body>
</html>

come on the gunners!
 
Upvote 0 Downvote
All you need to do is create a function that loads after the drop down is changed, and then you just compare the values ie:

Code: 
 <select class="droppy" name="postcode" onchange="doDropDownAction(this.value)">


Code: 
function doDropDownAction(strDropDownValue)
         xmlHttp = createRequestObject();
        var url="your_content.asp?value=" + strDropDownValue;
        xmlHttp.open('GET', url, true);
        xmlHttp.onreadystatechange = LoadContentComplete;
        xmlHttp.send('');

}


then on your_content.asp page you just look at the Request.QueryString("value"), ofcourse make sure your drop downs have a value that you can use... If you need to do more then one value to get your content, then you would put your values in a delminited form ie

id|name

then you can split it up in javascript or using ASP...


Now just Load the content dependent on that value and your set...

You will have to make a different complete load function for this because you'll want the content to load in a different cell ID....

Code: 
function LoadMAINContentComplete() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      document.getElementById('THENEWCELLID').innerHTML = xmlHttp.responseText;
   }
}

Jason

Army : Combat Engineer : 21B

 
Upvote 0 Downvote
i use this code in my ajax.js file to load content into a container.. the 'quote4.asp' page loads in my 'thecellid' container.. which is this..

Code: 
<table width="100%" border="0" cellspacing="0">
  <tr>
	<td id="thecellid"></td>
  </tr>
</table>


Code: 
function LoadContentComplete() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
	  document.getElementById('thecellid').innerHTML = xmlHttp.responseText;
   }
}


var xmlHttp = null;
function LoadSeaports() {
		xmlHttp = createRequestObject();
		var url="quote4.asp"
		xmlHttp.open('GET', url, true);
		xmlHttp.onreadystatechange = LoadContentComplete;
		xmlHttp.send('');
}

then i just place this on the form element to load the quote4.asp page into the container..

Code: 
onclick="LoadSeaports();

ok.. so here is what the page looks like..
http://www.londonheathrowcars.com/ajax/blankquote.asp you choose a radio button.. and each one opens a new page inside the container... like this..

http://www.londonheathrowcars.com/ajax/likethis.jpg


now.. what i want to do is add a rule to the newly opened drop down form element in each of the quote1,2,3,4.asp pages..

BUT rather than use the above method to open a NEW page.. i would like to display the new element just under the drop downs.. within the same page.. so i dont want this new element to be a different page loading in the new container..

i just want this form code..

Code: 
<p class="mainbody">2. Choose a <b>Vehicle</b>:<br><br>
<input type="radio" VALUE="c1"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Saloon</b> (1-4 Passengers - 3 Suitcases)
<br><br>
<input type="radio" VALUE="c2"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Estate</b> (1-4 Passengers - 4 Suitcases)
<br><br>
<input type="radio" VALUE="c3"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>People Carrier</b> (1-6 Passengers - 5 Suitcases)
<br><br>
<input type="radio" VALUE="c4"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Executive</b> (1-4 Passengers - 3 Suitcases)
<br>

to load in a new container just under the drop downs WITHIN the same quote.asp page itself.. i realise that i will still have to add some kind of onselect or onclick code to the drop down, and then create a function in the ajax.js file that does it.. but i dont know exactly what to do.. i hope that is clear..

can someone suggest something?

come on the gunners!
 
Upvote 0 Downvote
ok.. because im not very good at looking at javascript and knowing what it means.. i think my current ajax.js file and the one on the dynamic drive page is confusing me..

could i do something like this.. my drop down will look like this..

Code: 
	<select class="droppy" name="postcode" onChange="ShowCars()";>
<option value="">...</option>
<%
if not rs.eof then
do until rs.eof
%>
<option class="grey" value="<%=rs("townName")%>"><%=rs("townName")%></option>
<%
rs.movenext
loop
end if
%>
</select>

and then in my ajax.js file i could have something like this..

Code: 
function LoadNewContentComplete() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
	  document.getElementById('newcellid').innerHTML = xmlHttp.responseText;
   }
}

var xmlHttp = null;
function ShowCars() {
<p class="mainbody">2. Choose a <b>Vehicle</b>:<br><br>
<input type="radio" VALUE="c1"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Saloon</b> (1-4 Passengers - 3 Suitcases)
<br><br>
<input type="radio" VALUE="c2"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Estate</b> (1-4 Passengers - 4 Suitcases)
<br><br>
<input type="radio" VALUE="c3"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>People Carrier</b> (1-6 Passengers - 5 Suitcases)
<br><br>
<input type="radio" VALUE="c4"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Executive</b> (1-4 Passengers - 3 Suitcases)
<br>	
xmlHttp.onreadystatechange = LoadNewContentComplete;
        xmlHttp.send('');	
}

come on the gunners!
 
Upvote 0 Downvote
Ok javascript is not like asp you can put code in between... you just do the same as you did before ...

put this code:

Code: 
<p class="mainbody">2. Choose a <b>Vehicle</b>:<br><br>
<input type="radio" VALUE="c1"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Saloon</b> (1-4 Passengers - 3 Suitcases)
<br><br>
<input type="radio" VALUE="c2"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Estate</b> (1-4 Passengers - 4 Suitcases)
<br><br>
<input type="radio" VALUE="c3"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>People Carrier</b> (1-6 Passengers - 5 Suitcases)
<br><br>
<input type="radio" VALUE="c4"
name="car1" onMouseOver="style.cursor='pointer'">&nbsp;&nbsp;<b>Executive</b> (1-4 Passengers - 3 Suitcases)
<br>    
xmlHttp.onreadystatechange = LoadNewContentComplete;

int another .asp file and then call it with a 2 new functions:


Code: 
function LoadCarContent() {
        xmlHttp = createRequestObject();
        var url="YOUR_CAR_CONTENT.asp"
        xmlHttp.open('GET', url, true);
        xmlHttp.onreadystatechange = LoadContentComplete;
        xmlHttp.send('');
}


function LoadCarContentComplete() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      document.getElementById('carcontentid').innerHTML = xmlHttp.responseText;
   }
}

you will have to change the YOUR_CAR_CONTENT.asp. Also you will have to change carcontentid to fit your cell id... WHATEVER cell you want it to load into... so if you want to start a new cell below your drop down and place an id="car" then that would work just fine...

Also on your ajax you dont have to do var xmlHttp = null; over and over again... just do that once at the top of the page... because if you var a varaible outside a function it can be used over and over... another tip to remember, this isn't related to your question, but just so you know... javascript is case sensitive.

ALso, i dont know if you listened to me when i said get firebug... and firefox on my previous post... but if you are going to continue to use AJAX it is recommended that you get that browser and that extension because it tells you want your ajax is returning etc... if you run into bugs you can then fix them easier... it will also tell you what kind of javascript errors you are getting.


Jason

Army : Combat Engineer : 21B

 
Upvote 0 Downvote
** you can't put html code inbetween javascript like you are doing

also you will have to change your select to be like this:

Code: 
    <select class="droppy" name="postcode" onChange="LoadCarContent();"> 


also note that there should be semi colons on the ends of ur js inside the functions like so:

[code]
 var url="YOUR_CAR_CONTENT.asp"[highlight];[/highlight]

I may have forgotten a few on previous code..



Army : Combat Engineer : 21B

 
Upvote 0 Downvote
oops i forgot to change the function name in the first function

Code: 
function LoadCarContent() {
        xmlHttp = createRequestObject();
        var url="YOUR_CAR_CONTENT.asp"
        xmlHttp.open('GET', url, true);
        xmlHttp.onreadystatechange = [highlight]LoadCarContentComplete;
        xmlHttp.send('');[/highlight]
}


function LoadCarContentComplete() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
      document.getElementById('carcontentid').innerHTML = xmlHttp.responseText;
   }
}

Army : Combat Engineer : 21B

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
Return to current location on page after asp processes.
Replies
2
Views
745
penguinspeaks
penguinspeaks
leifoet
  • Locked
  • Question
How to send HTML emails with ASP classic?
Replies
0
Views
833
leifoet
leifoet
leifoet
  • Locked
  • Question
How to check if a datatable is empty ?
Replies
0
Views
601
leifoet
leifoet
penguinspeaks
  • Locked
  • Question
Parse a database field that is comma delimited and input the results into another table
Replies
0
Views
563
penguinspeaks
penguinspeaks
leifoet
  • Locked
  • Question
Wrong code in a href ?
Replies
1
Views
575
leifoet
leifoet

Part and Inventory Search

Sponsor

Back
Top