SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    general form issues with ajax

    can somebody please please give me some help here.. it is an ongoing thing i need to fix..

    here is the page, if you could briefly look at it, and go through the form process, so you see what is happening:

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

    im using ajax to load separate parts of the form into table cells on the main page.. the separate parts of the form are other asp pages.. which just have the code for the form item and no <html></html> tags

    here is an example of one of the form elements..it is called when the user clicks London Postcode. the quote1.asp page is loaded into the thecellid container on the blankquote.asp page..

    in this case the drop down is populated from my database.

    quote1.asp page (the postcodes in the drop down menu)
    Code:
    <%
    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
    %>
    <script type="text/javascript" src="ajax.js"></script>
    <p class="mainbody">2. Select a <b>London Postcode</b>:<br>
        <select class="droppy" name="postcode" onChange="LoadCarContent();">
    <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>
    my main page is called blankquote.asp

    here is the code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <title> | </title>
    
    <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="ajax.js"></script>
    
    </head>
    
    <body>
    <div id="wrap">
    
    <div id="bleft">
    <h1 class="top">Quick Quote</h1>
    
    <form name="quoteform">
    
    <!-- The first section of the form is in the main page code-->
    
    <p class="mainbody">1. Please Choose a 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>
    </p>
    
    <!-- The last 3 stages of the form open in the three containers below -->
    
    <table width="100%" border="0" cellspacing="0">
      
      <tr>
        <td id="thecellid"></td>
      </tr>
    
      <tr>
    <td id="carcontentid"></td>
      </tr>
    
      <tr>
        <td id="buttonid"></td>
      </tr>
    
      </table>
    
    </form>
    
    </div>
    
    <div id="bright">
    
    <!-- The finished result will load here on the right div -->
    
    <table><tr><td id="newpricehere"></td></tr></table>
    </div>
    
    </div>
    </body>
    </html>
    basically if you look at how the original quote system functioned here..
    http://www.londonheathrowcars.com/price-search3a.asp

    all the form elements were present on the parent page code and i was able to query my database and retreive a quote for the journey..

    the reason i am using ajax is to create a step by step process, with the form elements appearing in relevant stages..

    My Problem
    i was told that even tho the form elements were on different pages being called individually, as long as the containers were in between the <form></form> tags then the page should be able to read the values and query the database.

    when you click the get quote button, it should query the database and load the results on the right hand side of the page..but nothing is happening.. can anyone give me some kind of advice here please..

    lastly.. here is my ajax.js file
    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('thecellid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadCarContent() {
            xmlHttp = createRequestObject();
            var url="cars.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadCarContentComplete;
            xmlHttp.send('');
    }
    
    
    function LoadCarContentComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('carcontentid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadButton() {
            xmlHttp = createRequestObject();
            var url="button.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadButtonComplete;
            xmlHttp.send('');
    }
    
    
    function LoadButtonComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('buttonid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    
    function GetPrice() {
    
            xmlHttp = createRequestObject();
            var url="price.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = GetPriceComplete;
            xmlHttp.send('');
    }
    
    
    function GetPriceComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('newpricehere').innerHTML = xmlHttp.responseText;
       }
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    help me..

  3. #3
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's because your 'Get Quote' button is a submit button, it submits the form when you click it, in this case just reloads the page. You should make it a simple button.
    Saul

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh my.. thank you so much for a reply. thank you

    could you give me an example of what the button should be then because i tried removing the type=submit and then it wasnt even a button it just looked like a textbox or something.

  5. #5
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It should be type="button".
    Saul

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, things are gettin somewhere.. now i am gettin this error..

    error '80020009'

    "This can often happen if you reference a recordset object that was created on a different page"

    now i know this is an asp error, and this is a javascript forum, but i need to know whether the problem is on my database side, or whether the values from the form are not being read to query the database..

    i think its the second problem

    Code:
    <h1 class="top">Hello</h1>
    
    <%
    DIM sPostCode, sCarSelection, sCarModel
    
    sPostCode = trim(request.form("postcode"))
    sCarSelection = ucase(request.form("car1"))
    
    if sCarSelection = "C1" then
    sCarModel = "Saloon"
    elseif sCarSelection = "C2" then
    sCarModel = "Estate"
    elseif sCarSelection = "C3" then
    sCarModel = "People Carrier"
    elseif sCarSelection = "C4" then
    sCarModel = "Executive"
    end if
    
    
    DIM myconn, connection, rs
    
    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 price from h2t where cartype = '" & sCarSelection & "' and destination = '" & sPostCode & "' ", myconn
    %>
    
    <%
    DIM sTempVar
    sTempVar = "&#"
    %>
    <p class="mainbody">Listed below are the details of your journey:</p><br>
    <p class="mainbody">Pickup: <b>Heathrow</b><br><br>Destination: <b><%=sPostCode%></b><br><br>Car: <b><%=sCarModel%></b><br><br>Price: <b><%=sTempVar & "163;" & trim(rs("price"))%></b></p>
    <br>

  7. #7
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're right, the values from the form are not being read. The problem is here:
    Code:
    var url="price.asp";
    xmlHttp.open('GET', url, true);
    It only sends request to price.asp with no parameters, i.e. no values are passed. What you need to do is to add the values to the url:
    Code:
    var url="price.asp?sPostCode="+escape(document.quoteform.elements['sPostCode'].value)+"&sCarSelection="+escape(document.quoteform.elements['sCarSelection'].value);
    Make sure you have field names sPostCode and sCarSelection.
    Saul

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i changed the line in my ajax file and now when i click the button nothing at all happens..

    the code in my price query page here..

    Code:
    DIM sPostCode, sCarSelection, sCarModel
    
    sPostCode = trim(request.form("postcode"))
    sCarSelection = ucase(request.form("car1"))
    
    if sCarSelection = "C1" then
    sCarModel = "Saloon"
    elseif sCarSelection = "C2" then
    sCarModel = "Estate"
    elseif sCarSelection = "C3" then
    sCarModel = "People Carrier"
    elseif sCarSelection = "C4" then
    sCarModel = "Executive"
    end if
    was used to read in the values from my original form.. if i show you briefly the actual car and postcode selection here..

    Code:
    <select class="droppy" name="postcode" onChange="LoadCarContent();">
    <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 the cars
    Code:
    <input type="radio" VALUE="c1"
    name="car1" onMouseOver="style.cursor='pointer'" onclick="LoadButton();">
    postcode and car1 are the actual names of the form elements. the code in my price.asp page allocated variables to these items..

    and these variables are allocated to the fields in my database here..
    Code:
    rs.Open "Select price from h2t where cartype = '" & sCarSelection & "' and destination = '" & sPostCode & "' ", myconn
    so on the line of code you gave me to change in the ajax.js file.. it seems you are allocating the values in that code, and i am doing the same thing in my code..

    is this correct??

  9. #9
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're almost right. You pass the values of form fields via variables, which you then allocate in your asp code. Now you only need to enter the right field names, postcode and car1:
    Code:
    var url="price.asp?sPostCode="+escape(document.quoteform.elements['postcode'].value)+"&sCarSelection="+escape(document.quoteform.elements['car1'].value);
    Saul

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i done that and im still gettin the same error on the same line..

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i tried placing all the form elements on one page..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <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="ajax.js"></script>
    
    
    
    </head>
    
    <body>
    <div id="wrap">
    		
    		
    
    <div id="bleft">
    <h1 class="top">Quick Quote</h1>
    <form name="quoteform">
    
    <p class="mainbody">1. Please Choose a 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>
    </p>
    <table width="100%" border="0" cellspacing="0">
      <tr>
        <td id="thecellid"><%
    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
    %>
    <p class="mainbody">2. Select a <b>London Postcode</b>:<br>
        <select class="droppy" name="postcode" onChange="LoadCarContent();">
    <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></td>
      </tr>
    
      <tr>
        <td id="carcontentid"><p class="mainbody">3. Choose a <b>Vehicle</b>:<br><br>
    <input type="radio" VALUE="C1"
    name="car1" onMouseOver="style.cursor='pointer'" onclick="LoadButton();">&nbsp;&nbsp;<b>Saloon</b> (1-4 Passengers - 3 Suitcases)
    <br><br>
    </td>
      </tr>
      <tr>
    <td id="buttonid"><p><input style="margin-top:20px;margin-bottom:30px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:100px;" value="Get Quote" name="B1" type="button" onclick="GetPrice();"></p>
    <Br><br><br></td>
      </tr>
      </table>
    </form>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    
    
    <div id="bright">
    
    <table><tr><td id="newpricehere"></td></tr></table>
    
    
    
    </p>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </form>
    
    </div>
    
    
    			
    </div>
    </body>
    </html>
    and the database is still not being queried..

    i know though 100% for sure that the code to query the database works when there is just a static form being used.. so the problem must lie somewhere in the 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 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('thecellid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadCarContent() {
            xmlHttp = createRequestObject();
            var url="cars.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadCarContentComplete;
            xmlHttp.send('');
    }
    
    
    function LoadCarContentComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('carcontentid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadButton() {
            xmlHttp = createRequestObject();
            var url="button.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadButtonComplete;
            xmlHttp.send('');
    }
    
    
    function LoadButtonComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('buttonid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    
    function GetPrice() {
    
            xmlHttp = createRequestObject();
            var url="price.asp?sPostCode="+escape(document.quoteform.elements['sPostCode'].value)+"&sCarSelection="+escape(document.quoteform.elements['sCarSelection'].value);
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = GetPriceComplete;
            xmlHttp.send('');
    }
    
    
    function GetPriceComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('newpricehere').innerHTML = xmlHttp.responseText;
       }
    }

  12. #12
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You say you've done that, but I can't see it in your code. You don't have form elements named sPostCode and sCarSelection, then why didn't you replace them as I said before? You have postcode and car1, use them. Take a close look at my previous post - I've done that.
    Saul

  13. #13
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im sorry, i pasted the wrong code.. this is what the ajax.js code looks like and it is still giving me the same error

    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('thecellid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadCarContent() {
            xmlHttp = createRequestObject();
            var url="cars.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadCarContentComplete;
            xmlHttp.send('');
    }
    
    
    function LoadCarContentComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('carcontentid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadButton() {
            xmlHttp = createRequestObject();
            var url="button.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadButtonComplete;
            xmlHttp.send('');
    }
    
    
    function LoadButtonComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('buttonid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    
    function GetPrice() {
    
            xmlHttp = createRequestObject();
            var url="price.asp?sPostCode="+escape(document.quoteform.elements['postcode'].value)+"&sCarSelection="+escape(document.quoteform.elements['car1'].value);
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = GetPriceComplete;
            xmlHttp.send('');
    }
    
    
    function GetPriceComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('newpricehere').innerHTML = xmlHttp.responseText;
       }
    }

  14. #14
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh, ahem, I got it wrong in the first place, use this for url:
    Code:
    var url="price.asp?postcode="+escape(document.quoteform.elements['postcode'].value)+"&car1="+escape(document.quoteform.elements['car1'].value);
    Saul

  15. #15
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    take a look for urself.. lol

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

    same error.. just to be sure.. let me give tho the exact code for all the pages.. believe me mate.. this kind of help is second to none and i cant thank you enuf


    Main Page - blankquote.asp
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <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="ajax.js"></script>
    
    
    
    </head>
    
    <body>
    <div id="wrap">
    		
    		
    
    <div id="bleft">
    <h1 class="top">Quick Quote</h1>
    <form name="quoteform">
    
    <p class="mainbody">1. Please Choose a 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>
    </p>
    <table width="100%" border="0" cellspacing="0">
      <tr>
        <td id="thecellid"></td>
      </tr>
    
      <tr>
        <td id="carcontentid"></td>
      </tr>
      <tr>
    <td id="buttonid"></td>
      </tr>
      </table>
    </form>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    
    
    <div id="bright">
    
    <table><tr><td id="newpricehere"></td></tr></table>
    
    
    
    </p>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </form>
    
    </div>
    
    
    			
    </div>
    </body>
    </html>

    Javascript - 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 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('thecellid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadCarContent() {
            xmlHttp = createRequestObject();
            var url="cars.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadCarContentComplete;
            xmlHttp.send('');
    }
    
    
    function LoadCarContentComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('carcontentid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    function LoadButton() {
            xmlHttp = createRequestObject();
            var url="button.asp";
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = LoadButtonComplete;
            xmlHttp.send('');
    }
    
    
    function LoadButtonComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('buttonid').innerHTML = xmlHttp.responseText;
       }
    }
    
    
    
    function GetPrice() {
    
            xmlHttp = createRequestObject();
            var url="price.asp?postcode="+escape(document.quoteform.elements['postcode'].value)+"&car1="+escape(document.quoteform.elements['car1'].value); 
            xmlHttp.open('GET', url, true);
            xmlHttp.onreadystatechange = GetPriceComplete;
            xmlHttp.send('');
    }
    
    
    function GetPriceComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('newpricehere').innerHTML = xmlHttp.responseText;
       }
    }
    Postcode Drop Down - quote1.asp
    Code:
    <%
    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
    %>
    <script type="text/javascript" src="ajax.js"></script>
    <p class="mainbody">2. Select a <b>London Postcode</b>:<br>
        <select class="droppy" name="postcode" onChange="LoadCarContent();">
    <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>
    Car Selections - cars.asp
    Code:
    <script type="text/javascript" src="ajax.js"></script>
    
    <p class="mainbody">3. Choose a <b>Vehicle</b>:<br><br>
    <input type="radio" VALUE="C1"
    name="car1" onMouseOver="style.cursor='pointer'" onclick="LoadButton();">&nbsp;&nbsp;<b>Saloon</b> (1-4 Passengers - 3 Suitcases)
    <br><br>

    Button - button.asp
    Code:
    <script type="text/javascript" src="ajax.js"></script>
    <p><input style="margin-top:20px;margin-bottom:30px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:100px;" value="Get Quote" name="B1" type="button" onclick="GetPrice();"></p>
    <Br><br><br>
    Price results page - price.asp
    Code:
    <h1 class="top">Hello</h1>
    
    <%
    DIM sPostCode, sCarSelection, sCarModel
    
    sPostCode = trim(request.form("postcode"))
    sCarSelection = ucase(request.form("car1"))
    
    if sCarSelection = "C1" then
    sCarModel = "Saloon"
    elseif sCarSelection = "C2" then
    sCarModel = "Estate"
    elseif sCarSelection = "C3" then
    sCarModel = "People Carrier"
    elseif sCarSelection = "C4" then
    sCarModel = "Executive"
    end if
    
    
    DIM myconn, connection, rs
    
    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 price from h2t where cartype = '" & sCarSelection & "' and destination = '" & sPostCode & "' ", myconn
    %>
    
    <%
    DIM sTempVar
    sTempVar = "&#"
    %>
    <p class="mainbody">Listed below are the details of your journey:</p><br>
    <p class="mainbody">Pickup: <b>Heathrow</b><br><br>Destination: <b><%=sPostCode%></b><br><br>Car: <b><%=sCarModel%></b><br><br>Price: <b><%=sTempVar & "163;" & trim(rs("price"))%></b></p>
    <br>
    and that is everything..

  16. #16
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, I think I see the problem. You make a GET request, but the script handles POST request, so you need to make them the same. Either change your asp script:
    Code:
     sPostCode = trim( request.querystring("postcode"))
     sCarSelection = ucase( request.querystring("car1"))
    Or js script:
    Code:
     function GetPrice() {
     
     		xmlHttp = createRequestObject();
     		var url="price.asp"; 
     		var params="postcode="+escape(document.quoteform.elements['postcode'].value)+"&car1="+escape(document.quoteform.elements['car1'].value);
     		xmlHttp.onreadystatechange = GetPriceComplete;		
     		xmlHttp.open('POST', url, true);
     		xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     		xmlHttp.setRequestHeader("Content-length", params.length);
     		xmlHttp.setRequestHeader("Connection", "close");
     		xmlHttp.send(params);
     }
    Saul

  17. #17
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    php_daemon you are a legend.. thank you

    thank you thank you thank you

  18. #18
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You are very welcome
    Saul

  19. #19
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one last question.. in another forum i was told that the method i was using was not w3c standard and i should look into DOM functionality or something..

    what is the dif between ajax and the above.. and do you think my method will be accessible in the short term future.??

  20. #20
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There's no difference, it is called AJAX what you use. I'm not sure what did they mean by saying it is not w3c standard. It looks good enough for me, unless they know something I don't.
    Saul

  21. #21
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  22. #22
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's because you're using onclick event for <option> tag, it does not trigger in IE. Use onchange event for <select> tag.
    Saul

  23. #23
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried this and it not workin still

    Code:
    <p class="mainbody">* Car Required:<br><select class="droppy" name="car1" onchange="LoadButton();">
    <option value="">Please Select
    <option value="c1">Saloon (1-4 Passengers - 3 Suitcases)
    <option value="c2">Estate Car (1-4 Passengers - 4 Suitcases)
    <option value="c3">People Carrier (1-6 Passengers - 5 Suitcases)
    <option value="c4">Executive (1-4 Passengers - 3 Suitcases)
    </select></p>

  24. #24
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Really? I've just tried it on IE and it worked.
    Saul

  25. #25
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :?

    ok my bad.. i just cleared the cache and it worked.. thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •