SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display chosen form value

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

    im trying to display on the page the item chosen from my form item (eg radio button, dropdown)..

    so if the user clicks a 'monkey' radio button, the word monkey will appear on the page..


    HOWEVER! i am using Ajax which loads separate asp pages into containers on the main page..the reason i am using this system is because my user will be gettin a quote for a journey, and i want to show them the form options in stages..

    so on my page if you choose

    London Postcode.. a drop down menu appears.. i want the value chosen in the drop down to appear on the right hand side of the page where it says Destination: (this is just a table cell)

    what is making this tricky however is what i mentioned above..

    the postcodes drop down menu is on a separate page called quote1.asp.. so its a page within a page..

    here is the code for that drop down..

    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>
    the drop down is populated using a database and asp.. however, i need to add some javascript to take the value chosen in the drop down and then on the page somewhere have something like this..

    <td>Pickup: Heathrow Airport(this is static)<br><br> Destination: <*Chosen Postcode*>(this will need to display the chosen postcode..

    is that clear? could someone please please help me out here cos this problem has been holding me back for a long time..

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

  3. #3
    The Omnipresent [ArcanE]'s Avatar
    Join Date
    Mar 2005
    Location
    Belgium
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using frames for the dropdown list? If so you'll have to look into the top.frames property in javascript to access the page containing the frame.

    A good point to start is http://wp.netscape.com/eng/mozilla/3...ok/javascript/ where you can find some information on the top.frames property of the window object in JS.
    Webdevelopment : Skyrocket Concepts Inventis Web Architects
    Ain't got time for the future or the past.
    Live for the moment, make it last.

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES!!! A REPLY!

    no i am not using frames..

    the main page is divided into a left div and a right div..

    the individual form elements are loaded into table cells with ids..

    here is my ajax.js file if it makes a difference..

    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() {
    
                var RadioButtonValue = null;
                for (counter = 0; counter < document.quoteform.car1.length; counter++) {
                if (document.quoteform.car1[counter].checked) {
                    RadioButtonValue = document.quoteform.car1[counter].value;
                }
            
                if (RadioButtonValue!="") {
    
                xmlHttp = createRequestObject();
                var url="price.asp?PASSMYVALUE=" + RadioButtonValue;
                xmlHttp.open('GET', url, true);
                xmlHttp.onreadystatechange = GetPriceComplete;
                xmlHttp.send('');
                
              } else {
                alert('No option was checked.');
              }
    }
    
    
    function GetPriceComplete() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
          document.getElementById('newpricehere').innerHTML = xmlHttp.responseText;
       }
    }
    }
    and here is the page where everything is happening..
    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="external.js"></script>
    <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">
    
    
    <table width="100%" border="0" cellspacing="0">
      <tr>
        <td id="thecellid"><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>
    
    		<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></td>
      </tr>
    
      <tr>
        <td id="carcontentid"></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">
    <h1 class="top">Your Journey</h1>
    <form>
    <p class="mainbody">Pickup: <b>Heathrow Airport</b><br><br>
    Destination:<br><br>Vehicle:<br><br>
    <table width="100%" border="0" cellspacing="0">
      <tr>
    <td id="buttonid"></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>

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is this the hardest question ever posted or did i ask it the wrong way..

    or it is cos i stink..


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
  •