Problem with javascript and html form

bialystock Greenhorn

Messages:: 24

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#1

Hi all,

In the html below, depending on which radio button is selected, the javascript in the head performs the function of changing the active Form Select Options lists from the Rentals Options lists to the Buy options lists.

Problem (1) is that it does not work in Firefox, without the workaround javascript code added *above* the doctype declaration.

Problem (2) is that in xhtml the workaround js above the doctype is not accepted, and the form goes haywire!

Can anyone please suggest a solution that will work both cross-browser and in xhtml?

The html is below.

Many thanks,

Bialystock.
-

<SCRIPT language=javascript>
function fnGoTo(PageNo){
location='property.asp?action=submitquery&preserve=1&psc_rtid=5&psc_pageno=' + PageNo;
}
</SCRIPT>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>.......</title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">

<script language="javascript">

function fnMarketing(value){
if(value==1){
document.all.price_low.style.display='block';
document.all.price_high.style.display='block';
document.all.rent_low.style.display='none';
document.all.rent_high.style.display='none';
form1.psc_isforsale.value='1';
form1.psc_istolet.value='';
form1.psc_orderby.value='2';
}
else if(value==2){
document.all.price_low.style.display='none';
document.all.price_high.style.display='none';
document.all.rent_low.style.display='block';
document.all.rent_high.style.display='block';
form1.psc_isforsale.value='';
form1.psc_istolet.value='1';
form1.psc_orderby.value='4';
}
}
</script>
</head>
<body bgcolor="#FFFFFF"><br>
<table width="228" align="left" cellpadding="0" cellspacing="0"><tr><td width="228" valign="top">

<h4>Property Search </h4>
<FORM style="margin-top: 5px; margin-bottom: 5px;" id=form1 method=post name=form1
action=http://www.xxxxxxx.xxx.asp?action=submitsearchform
target=_self>

<INPUT type="hidden" name="agentid" value="0538" id="agentid">
<INPUT type="hidden" name="psc_branchid" value="" id="psc_branchid">

<INPUT type="hidden" name="psc_isforsale" value="" id="psc_isforsale">
<INPUT type="hidden" name="psc_istolet" value="1" id="psc_istolet">
<INPUT type="hidden" name="psc_orderby" value="4" id="psc_orderby">
<INPUT type="hidden" name="psc_rtid" value="5" id="psc_rtid">
<INPUT type="hidden" name="public" value="1" id="public">

<table border=0 cellpadding="0" cellspacing="0"><tr><td align=center>

<table width=228 border=0 align=center valign=middle><tr><td width=96 align=left valign=middle>Type:</td><td width=128 align=center>
Rent <INPUT TYPE="radio" value=2 checked id=psc_marketing class=clear name=psc_marketing onclick="javascript:fnMarketing(this.value);">   
Buy <INPUT TYPE="radio" value=1 id=psc_marketing class=clear name=psc_marketing onclick="javascript:fnMarketing(this.value);">
</td></tr></table>

<table id=price_low width=228 style="display:none;"><tr><td width=96>
Price From:</td><td align=right><SELECT id=psc_pricelow class=clear name=psc_pricelow style="width:128px">
<OPTION selected value=""><OPTION value=50000>50,000</OPTION> <OPTION
value=60000>60,000</OPTION> <OPTION value=70000>70,000</OPTION> <OPTION
value=80000>80,000</OPTION> <OPTION value=90000>90,000</OPTION> <OPTION
value=100000>100,000</OPTION> <OPTION value=110000>110,000</OPTION> <OPTION
value=120000>120,000</OPTION> <OPTION value=130000>130,000</OPTION> <OPTION
value=140000>140,000</OPTION> <OPTION value=150000>150,000</OPTION> <OPTION
value=160000>160,000</OPTION> <OPTION value=170000>170,000</OPTION> <OPTION
value=180000>180,000</OPTION> <OPTION value=190000>190,000</OPTION> <OPTION
value=200000>200,000</OPTION> <OPTION value=210000>210,000</OPTION> <OPTION
value=220000>220,000</OPTION> <OPTION value=230000>230,000</OPTION> <OPTION
value=240000>240,000</OPTION> <OPTION value=250000>250,000</OPTION> <OPTION
value=260000>260,000</OPTION> <OPTION value=270000>270,000</OPTION> <OPTION
value=280000>280,000</OPTION> <OPTION value=290000>290,000</OPTION> <OPTION
value=300000>300,000</OPTION> <OPTION value=325000>325,000</OPTION> <OPTION
value=350000>350,000</OPTION> <OPTION value=400000>400,000</OPTION> <OPTION
value=450000>450,000</OPTION> <OPTION value=475000>475,000</OPTION> <OPTION
value=500000>500,000</OPTION> <OPTION value=550000>550,000</OPTION> <OPTION
value=600000>600,000</OPTION> <OPTION value=650000>650,000</OPTION> <OPTION
value=700000>700,000</OPTION> <OPTION value=800000>800,000</OPTION> <OPTION
value=900000>900,000</OPTION> <OPTION value=1000000>1,000,000</OPTION> <OPTION
value=1500000>1,500,000</OPTION> <OPTION value=2000000>2,000,000</OPTION>
<OPTION value=3000000>3,000,000</OPTION></SELECT></td></tr></table>

<table id=price_high width=228 style="display:none;"><tr><td width=96>
Price To:</td><td align=right><SELECT id=psc_pricehigh class=clear name=psc_pricehigh style="width:128px">
<OPTION selected value=""><OPTION value=50000>50,000</OPTION> <OPTION
value=60000>60,000</OPTION> <OPTION value=70000>70,000</OPTION> <OPTION
value=80000>80,000</OPTION> <OPTION value=90000>90,000</OPTION> <OPTION
value=100000>100,000</OPTION> <OPTION value=110000>110,000</OPTION> <OPTION
value=120000>120,000</OPTION> <OPTION value=130000>130,000</OPTION> <OPTION
value=140000>140,000</OPTION> <OPTION value=150000>150,000</OPTION> <OPTION
value=160000>160,000</OPTION> <OPTION value=170000>170,000</OPTION> <OPTION
value=180000>180,000</OPTION> <OPTION value=190000>190,000</OPTION> <OPTION
value=200000>200,000</OPTION> <OPTION value=210000>210,000</OPTION> <OPTION
value=220000>220,000</OPTION> <OPTION value=230000>230,000</OPTION> <OPTION
value=240000>240,000</OPTION> <OPTION value=250000>250,000</OPTION> <OPTION
value=260000>260,000</OPTION> <OPTION value=270000>270,000</OPTION> <OPTION
value=280000>280,000</OPTION> <OPTION value=290000>290,000</OPTION> <OPTION
value=300000>300,000</OPTION> <OPTION value=325000>325,000</OPTION> <OPTION
value=350000>350,000</OPTION> <OPTION value=400000>400,000</OPTION> <OPTION
value=450000>450,000</OPTION> <OPTION value=475000>475,000</OPTION> <OPTION
value=500000>500,000</OPTION> <OPTION value=550000>550,000</OPTION> <OPTION
value=600000>600,000</OPTION> <OPTION value=650000>650,000</OPTION> <OPTION
value=700000>700,000</OPTION> <OPTION value=800000>800,000</OPTION> <OPTION
value=900000>900,000</OPTION> <OPTION value=1000000>1,000,000</OPTION> <OPTION
value=1500000>1,500,000</OPTION> <OPTION value=2000000>2,000,000</OPTION>
<OPTION value=3000000>3,000,000</OPTION></SELECT></td></tr</table>

<table id=rent_low width=228><tr><td width=96>
Rental From:</td><td align=right><SELECT id=psc_rentlow class=clear name=psc_rentlow style="width:128px">
<OPTION selected value=""><OPTION value=100>100 pcm</OPTION> <OPTION
value=200>200 pcm</OPTION> <OPTION value=300>300 pcm</OPTION> <OPTION
value=400>400 pcm</OPTION> <OPTION value=500>500 pcm</OPTION> <OPTION
value=600>600 pcm</OPTION> <OPTION value=700>700 pcm</OPTION> <OPTION
value=800>800 pcm</OPTION> <OPTION value=900>900 pcm</OPTION> <OPTION
value=1000>1000pcm</OPTION> <OPTION value=1250>1250 pcm</OPTION> <OPTION
value=1500>1500 pcm</OPTION> <OPTION value=1750>1750 pcm</OPTION> <OPTION
value=2000>2000 pcm</OPTION> <OPTION value=2500>2500 pcm</OPTION> <OPTION
value=3000>3000 pcm</OPTION> <OPTION value=3500>3500 pcm</OPTION> <OPTION
value=4000>4000 pcm</OPTION> <OPTION value=4500>4500 pcm</OPTION> <OPTION
value=5000>5000 pcm</OPTION> <OPTION value=6000>6000 pcm</OPTION> <OPTION
value=7000>7000 pcm</OPTION> <OPTION value=8000>8000 pcm</OPTION> <OPTION
value=9000>9000 pcm</OPTION> <OPTION value=10000>10,000 pcm</OPTION> <OPTION
value=15000>15,000 pcm</OPTION> <OPTION value=20000>20,000 pcm</OPTION>
<OPTION value=25000>25,000 pcm</OPTION> <OPTION value=30000>30,000
pcm</OPTION></SELECT></td></tr></table>

<table id=rent_high width=228><tr><td width=96>
Rental To:</td><td align=right><SELECT id=psc_renthigh class=clear name=psc_renthigh style="width:128px">
<OPTION selected value=""><OPTION value=100>100 pcm</OPTION> <OPTION
value=200>200 pcm</OPTION> <OPTION value=300>300 pcm</OPTION> <OPTION
value=400>400 pcm</OPTION> <OPTION value=500>500 pcm</OPTION> <OPTION
value=600>600 pcm</OPTION> <OPTION value=700>700 pcm</OPTION> <OPTION
value=800>800 pcm</OPTION> <OPTION value=900>900 pcm</OPTION> <OPTION
value=1000>1000pcm</OPTION> <OPTION value=1250>1250 pcm</OPTION> <OPTION
value=1500>1500 pcm</OPTION> <OPTION value=1750>1750 pcm</OPTION> <OPTION
value=2000>2000 pcm</OPTION> <OPTION value=2500>2500 pcm</OPTION> <OPTION
value=3000>3000 pcm</OPTION> <OPTION value=3500>3500 pcm</OPTION> <OPTION
value=4000>4000 pcm</OPTION> <OPTION value=4500>4500 pcm</OPTION> <OPTION
value=5000>5000 pcm</OPTION> <OPTION value=6000>6000 pcm</OPTION> <OPTION
value=7000>7000 pcm</OPTION> <OPTION value=8000>8000 pcm</OPTION> <OPTION
value=9000>9000 pcm</OPTION> <OPTION value=10000>10,000 pcm</OPTION> <OPTION
value=15000>15,000 pcm</OPTION> <OPTION value=20000>20,000 pcm</OPTION>
<OPTION value=25000>25,000 pcm</OPTION> <OPTION value=30000>30,000
pcm</OPTION></SELECT> </td></tr></table>

<table width=228 class="property_type"><tr><td width=96>
Prop Type:</td><td align=right><SELECT id=psc_propertytype class=clear
name=psc_propertytype style="width:128px"> <OPTION selected><OPTION value=2>Houses</OPTION>
<OPTION value=8>Flats / Apartments</OPTION> <OPTION value=6>Bungalows</OPTION>
<OPTION value=9>Character Property</OPTION> <OPTION value=14>Land</OPTION>
<OPTION value=12>Guest House / Hotel</OPTION> <OPTION value=7>Mobile / Park
Homes</OPTION> <OPTION value=13>Commercial Property</OPTION> <OPTION
value=10>Retirement Property</OPTION> <OPTION value=11>House / Flat
Share</OPTION> <OPTION value=15>Garage / Parking</OPTION></SELECT> </td></tr></table>

<table width=228><tr><td width=96>Bedrooms:</td><td align=right><SELECT id=psc_minbeds class=clear name=psc_minbeds style="width:128px">
<OPTION selected value=0>None</OPTION> <OPTION value=1>1 Bedroom</OPTION>
<OPTION value=2>2 Bedrooms</OPTION> <OPTION value=3>3 Bedrooms</OPTION>
<OPTION value=4>4 Bedrooms</OPTION> <OPTION value=5>5 Bedrooms</OPTION>
<OPTION value=6>6 Bedrooms</OPTION> <OPTION value=7>7 Bedrooms</OPTION></SELECT>
</td></tr></table>
<br>

<table width=228><tr><td align=center><INPUT id=cmdSubmit value="Search Now" type=submit name=submit_button>
</td></tr></table></FORM>
</td></tr></table>
</body>
</HTML>

bialystock, Aug 26, 2010 IP

hdewantara Well-Known Member

Messages:: 540

Likes Received:: 47

Best Answers:: 25

Trophy Points:: 155

#2

Hi,
I see that none is using function fnGoTo(PageNo),
so it would safely be deleted, unless you working on some CMS system?

There's also nothing wrong with your doctype, why change it to XHTML?
But if you need to, here's a good start -> http://www.w3schools.com/tags/tag_DOCTYPE.asp

And try replace some lines within function fnMarketing(value),
e.g (see the differences in red and blue):

1) document.all.price_low.style.display='block'; becomes
document.[COLOR="red"]getElementById("price_low")[/COLOR].style.display='block';
Code (markup):
2) form1.psc_isforsale.value='1'; becomes
[COLOR="blue"]document.getElementById("psc_isforsale")[/COLOR].value='1';
Code (markup):
Hendra

hdewantara, Aug 27, 2010 IP

bialystock Greenhorn

Messages:: 24

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#3

Hi hdewantara,

Thanks very much for your reply. The form goes to an asp database. No, not working on any CMS system, but customers are having problems because text editors don't like the illegal js above the DOCTYPE. Also I wish to design some more website templates using Joomla, which produces XHTML.

Thanks, Bialystock

bialystock, Aug 27, 2010 IP

bialystock Greenhorn

Messages:: 24

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#4

Hi hdewantara,

I changed the script as you suggested, but it did not solve the problem. Can you suggest anything else please?

Many thanks, Bialystock.

bialystock, Aug 29, 2010 IP

bialystock Greenhorn

Messages:: 24

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#5

Hi again,

I've sorted it! - with some jquery code. Works fine now.

Bialystock.

bialystock, Aug 29, 2010 IP

xcool101Man Guest

Messages:: 48

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

Please notice that using JQuery makes you code open source too
check their licence

xcool101Man, Aug 30, 2010 IP

Log in or Sign up

Problem with javascript and html form

bialystock Greenhorn

hdewantara Well-Known Member

bialystock Greenhorn

bialystock Greenhorn

bialystock Greenhorn

xcool101Man Guest

Useful Searches