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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ajax radio button no value problem

Status
Not open for further replies.

tonyx666

MIS
Apr 13, 2006
214
GB
go here..
http://londonheathrowcars.com/ajax/blankquote.asp

using ajax to load asp pages into a form on my blankquote.asp main page.

if you select the first radio..
London Postcode..
then choose a drop down postcode.. then choose a car.. then click get quote.. basically a price should appear but the queryin of the database is not working because it is tellin me that

document.quoteform.car1 has no properties

on the bold line of 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() {

            var RadioButtonValue = null;
            [b]for (counter = 0; counter < document.quoteform.car1.length; counter++) {[/b]
            if (document.quoteform.car1[counter].checked) {
                RadioButtonValue = 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;
   }
}
}

its not registering the radio buttons (saloon, estate.. )can anyone help me please?

come on the gunners!
 
ok let me try and narrow the problem down...

the error is on the following line..

Code:
function GetPrice() {

            var RadioButtonValue = null;
            [b]for (counter = 0; counter < document.quoteform.car1.length; counter++) {
            if (document.quoteform.car1[counter].checked) {[/b]
                RadioButtonValue = 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;
   }
}

basically, when i click my button to execute the GetPrice()function.. i get a message saying..document.quoteform.car1 has no properties

can anyone suggest anything?

come on the gunners!
 
No
Code:
document.quoteform.car1
in the page, there is only
Code:
document.quoteform.r1
 
yes but in the actual car selection part.. it is this..

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

so car1 is the name of the radio buttons

come on the gunners!
 
u see there are a few different pages/form elements being loaded into one main page.. and i was told that there would not be a problem at this stage.. but there is a problem

come on the gunners!
 
snowboardr i dont know what to do man. this thing still aint working.. u still got no idea why?

come on the gunners!
 
>RadioButtonValue = quoteform.car1[counter].value;
[tt]RadioButtonValue = [blue]document.[/blue]quoteform.car1[counter].value;[/tt]
 
damn damn damn, still gettin the same error on the same line..

document.quoteform.car1 has no properties


Code:
function GetPrice() {
108
109 var RadioButtonValue = null;
110 [b]for (counter = 0; counter < document.quoteform.car1.length; counter++) {[/b]
111 if (document.quoteform.car1[counter].checked) {
112 RadioButtonValue = document.quoteform.car1[counter].value;
113 }
114
115 if (RadioButtonValue!="") {
116
117 xmlHttp = createRequestObject();
118 var url="price.asp?PASSMYVALUE=" + RadioButtonValue;
119 xmlHttp.open('GET', url, true);
120 xmlHttp.onreadystatechange = GetPriceComplete;
121 xmlHttp.send('');
122
123 } else {
124 alert('No option was checked.');
125 }
126}

come on the gunners!
 
>yes but in the actual car selection part.. it is this..
meaning????
 
it means this..

there are only 2 of the form elements that are used to query the database and pull a price from my tables..

these two are the

'postcode' and the 'car1' (basically the form elements on the rite hand side of the page..)

the reason i said..

yes but in the actual car selection part.. it is this..

is because in the post before that.. '13sio' said...

No
Code:
document.quoteform.car1
in the page, there is only
Code:
document.quoteform.r1


13sio was tellin me that on the actual blankquote.asp page itself.. the only radio buttons that were visible were the left hand side radio buttons (london postcode, town/location, uk airport, and uk seaport)

these radios are on the main page yes.. but their purpose is only to load the next form element... (in this case the postcodes on the rite hand side of the page)

does that make sense..

now the only problem now is when the final button is pushed, it cant seem to read which car..

(car1 radio buttons in the cars.asp page loaded into a container on the blankquote.asp page)

..has been selected, and it therefore isnt even trying to query the database and load the results in the price.asp page..

do you get me? i am sure that the database query code is correct because i have tried it with everything on the same page and named the same and it works.. you can see it working here..

http://www.londonheathrowcars.com/price-search3a.asp

the only problem is now that because all the form elements are on different pages.. the overall form is not able to operate freely..

im sure its simple but this hasnt worked for 2 days now and i need to fix it

come on the gunners!
 
When you create dynamic elements, in particular, the radio buttons in question (car1), you have to create and insert them contained within the form (quoteform) so as you can refer to them by the qualified name document.quoteform.car1. This is the only thing you have to make sure happening. It does not seem to be so at the moment.
 
ok.. well considering that the car radio buttons are on a different page.. and they are being individually loaded into a table container within my main 'quoteform' on the blankquote page.. how can i get around this..

i was told that it should not be a problem if the individual form elements were on different pages because the page would be viewed as a whole (and so would the quoteform as long as the individual containers were within the <form></form> tags



come on the gunners!
 
For the moment, I think your submit button, radio input buttons, etc are not contained in any form at all. This will absolutely be getting you nowhere. If all the data that you need a quotation be made do not depend on other input data on the quoteform, you can just make a form element with some name (such as "someformname") containing the radio buttons part and refer the data with document.someformname.car1.checked or .value and submit will send that restricted subset of data for a quote to make. Otherwise, and that is what I would guess, you practically _must_ make all those tables and input elements be inserted within the form quoteform---no other way.
 
For the moment, your page after the three choices made and before clicking on the submit button looks like this. For me, it is definitely broken in the sense at least I described above. Your call.
[tt]
<HTML>
<HEAD>
<TITLE>|</TITLE>
<META content="" name="description"/>
<META content="" name="keywords"/>
<META content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<LINK href="style.css" type="text/css" rel="stylesheet"/>
<SCRIPT src="external.js" type="text/javascript"/>
<SCRIPT src="ajax.js" type="text/javascript"/>
</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" onclick="LoadPostcodes();"
onmouseover="style.cursor='pointer'" name="r1" value="v1"/>
&nbsp;&nbsp;&nbsp; <B>
London Postcode </B>
(N1, WC2, E14 etc..) <BR/>
<BR/>
<INPUT type="radio" ;="" onclick="LoadContent2()"
onmouseover="style.cursor='pointer'" name="r1" value="v2"/>
&nbsp;&nbsp;&nbsp; <B>
Town / Location </B>
(Cambridge, Brighton etc..) <BR/>
<BR/>
<INPUT type="radio" ;="" onclick="LoadAirports()"
onmouseover="style.cursor='pointer'" name="r1" value="v3" style="cursor: pointer;"/>
&nbsp;&nbsp;&nbsp; <B>
UK Airport </B>
(Gatwick, Stansted etc..) <BR/>
<BR/>
<INPUT type="radio" ;="" onclick="LoadSeaports()"
onmouseover="style.cursor='pointer'" name="r1" value="v4" style="cursor: pointer;"/>
&nbsp;&nbsp;&nbsp; <B>
UK Seaport </B>
(Dover, Harwich etc..) <BR/>
<BR/>
</P>
<TABLE width="100%" cellspacing="0" border="0">
<TBODY>
<TR>
<TD id="newpricehere"/>
</TR>
</TBODY>
</TABLE>
</FORM>
</DIV>
<DIV id="bright">
<TABLE width="100%" cellspacing="0" border="0">
<TBODY>
<TR>
<TD id="thecellid">
<SCRIPT src="ajax.js" type="text/javascript"/>
<H1 class="top">
Travel From Heathrow </H1>
<P class="mainbody">
2. Select a <B>
UK Seaport </B>
: <BR/>
<SELECT onchange="LoadCarContent();" name="seaport" class="droppy">
<OPTION value="">
... </OPTION>
<OPTION value="Southampton" class="grey">
Southampton </OPTION>
<OPTION value="Harwich" class="grey">
Harwich </OPTION>
<OPTION value="Dover" class="grey">
Dover </OPTION>
<OPTION value="Portsmouth" class="grey">
Portsmouth </OPTION>
<OPTION value="Folkestone" class="grey">
Folkestone </OPTION>
<OPTION value="Felixstowe" class="grey">
Felixstowe </OPTION>
</SELECT>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE width="100%" cellspacing="0" border="0">
<TBODY>
<TR>
<TD id="carcontentid">
<SCRIPT src="ajax.js" type="text/javascript"/>
<BR/>
<P class="mainbody">
3. Choose a <B>
Vehicle </B>
: <BR/>
<BR/>
<INPUT type="radio" onclick="LoadButton();"
onmouseover="style.cursor='pointer'" name="car1" value="c1" style="cursor: pointer;"/>
&nbsp;&nbsp; <B>
Saloon </B>
(1-4 Passengers - 3 Suitcases)
<BR/>
<BR/>
<INPUT type="radio" onclick="LoadButton();"
onmouseover="style.cursor='pointer'" name="car1" value="c2"/>
&nbsp;&nbsp; <B>
Estate </B>
(1-4 Passengers - 4 Suitcases)
<BR/>
<BR/>
<INPUT type="radio" onclick="LoadButton();"
onmouseover="style.cursor='pointer'" name="car1" value="c3"/>
&nbsp;&nbsp; <B>
People Carrier </B>
(1-6 Passengers - 5 Suitcases)
<BR/>
<BR/>
<INPUT type="radio" onclick="LoadButton();"
onmouseover="style.cursor='pointer'" name="car1" value="c4" style="cursor: pointer;"/>
&nbsp;&nbsp; <B>
Executive </B>
(1-4 Passengers - 3 Suitcases)
<BR/>
<BR/>
</P>
</TD>
</TR>
<TR>
<TD id="buttonid">
<SCRIPT src="ajax.js" type="text/javascript"/>
<P>
<INPUT type="submit" onclick="GetPrice();" name="B1"
value="Get Quote" style="margin-top: 20px; margin-bottom: 30px; margin-left: 35px; background-color: rgb(102, 102, 102); font-weight: bold; font-size: 12px; font-family: arial; color: white; width: 100px;"/>
</P>
<BR/>
<BR/>
<BR/>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
</BODY>
</HTML>
[/tt]
I took out many irrelevant blank/whitespaces to safe some space for this over-size broken script so that you can make your own judgement. (I am not going to spend time on the detail.)
 
thank you for trying to help me here.. i am very grateful..

at the moment the page you gave me looks like this..

http://www.londonheathrowcars.com/ajax/new.htm

if you try it with the London Postcode option.. when you click get quote.. it still gives the same error..

is there something fundamentally wrong with what i am doin.. i dont understand..

also the page you gave me does not even load in my internet explorer for some reason..


come on the gunners!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top