asked on

Form javascript help and EI9 problem

I have this form and need a little JAVA to perform the following:
1. "Any property" is checked by default. When any other option is checked the "Any Property" option should automatically be unchecked.

2.IF any of these are checked:
Single family
Condo
Townhouse
Farmhouse
Manufactured

then id="class1" All Residential for sale should be unchecked.

3. I am a Mac user but someone reported that in EI9 betta this form goes to a blank page because IE is adding the parameter: "&submit=submit" to the end of the URL, which produces no search results, while all the other browsers work fine. Could anyone using IE9 confirm this an suggest how to resolve it?

<form name="findsales" method="get" action="index.php" onSubmit="return sendFormToCMS(this, 'index.php?option=com_cmsrealty&cmsrealty=user');">
						<input checked="checked" name="pclass[]" value="" type="checkbox" id="class0" onClick="SearchClassCheckALL()" />Any Properties<br /><span class="addon_iconizer_pclass">
						<img src="/sale/addons/transparentmaps/icons/1.png" alt="Homes for sale"/><input name="pclass[]" value="1" type="checkbox" id="class1" onclick="SearchClassUnCheckALL()" /> All Residential for sale

<div id="clasp_8"><a href="javascript:lunchboxOpen('8','condo, farm, etc?');"><img alt="Closed_arrow" class="arrow_icon" id="home-features-arrow" src="images/closed_arrow.gif" />
<span class="options" style="cursor:pointer">condo, farm, etc?</span>
<span class="link_open" style="cursor:pointer">open</span></a></div><br />                                    
<div id="green_8" class="lunchbox" style="width:100%;">
Only show these property types?<br />
<input type="checkbox" name="propertytype_or[]" value="Single family home" />Single family<br />
<input type="checkbox" name="propertytype_or[]" value="Condo" />Condo<br />
<input type="checkbox" name="propertytype_or[]" value="Townhouse" />Townhouse<br />
<input type="checkbox" name="propertytype_or[]" value="Farm" />Farmhouse<br />
<input type="checkbox" name="propertytype_or[]" value="Manufactured" />Manufactured<br />
</div>

						<img src="/sale/addons/transparentmaps/icons/2.png" alt="Land for sale"/><input name="pclass[]" value="2" type="checkbox" id="class2" onclick="SearchClassUnCheckALL()" />Land for sale<br />
						<img src="/sale/addons/transparentmaps/icons/3.png" alt"=Multifamily or Commercial for sale"/><input name="pclass[]" value="3" type="checkbox" id="class3" onclick="SearchClassUnCheckALL()" />Multifamily or Commercial<br />
						<img src="/sale/addons/transparentmaps/icons/6.png" alt="Businesses for sale"/><input name="pclass[]" value="6" type="checkbox" id="class4" onclick="SearchClassUnCheckALL()" />Businesses for sale<br />
						<img src="/sale/addons/transparentmaps/icons/7.png" alt="Cars, RVs for sale"/><input name="pclass[]" value="7" type="checkbox" id="class5" onclick="SearchClassUnCheckALL()" />Transportation for sale<br />
<img src="/sale/addons/transparentmaps/icons/15.png" alt="Aircraft for sale"/><input name="pclass[]" value="15" type="checkbox" id="class6" onclick="SearchClassUnCheckALL()" />Aircraft for sale<br />
						<img src="/sale/addons/transparentmaps/icons/16.png" alt="Sailboats for sale"/><input name="pclass[]" value="16" type="checkbox" id="class6" onclick="SearchClassUnCheckALL()" />Sailboats for sale<br />
						<img src="/sale/addons/transparentmaps/icons/12.png" alt="Yachts for sale"/><input name="pclass[]" value="12" type="checkbox" id="class6" onclick="SearchClassUnCheckALL()" />Yachts & Boats for sale<br />
						<img src="/sale/addons/transparentmaps/icons/5.png" alt="Timeshares for sale"/><input name="pclass[]" value="5" type="checkbox" id="class9" onclick="SearchClassUnCheckALL()" />Vacation Rentals & Timeshares </span><br />

<input name="submit" type="image" value="submit" src="./images/find-sales-rotating.gif" alt="Find Matches" width="220" height="43" border="0">
<input type="button" value="Reset Form" onClick="this.form.reset()" />
</form>

Open in new window

TiberiuGal

Hi,

I'ts a bad idea to use input name="submit" when dealing with javascript beacause it will conflict with form.submit();
Also, if it's only IE9 problem, I'd say leave it there, don't bind beta browsers.

Cheers

leakim971

>1. "Any property" is checked by default. When any other option is checked the "Any Property" option should automatically be unchecked.

And if the user click on it back (Any property) ? Same question for class1

greenerpastures

ASKER

Correct, when any other options is checked "Any property" should uncheck, but it does not right now. This is mostly for visual representation so that user understands that the search is now for specific property types.

If the user clicks back on "Any property" the others should uncheck--good point.

leakim971

Try this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">

	function SearchClassUnCheckALL(cb) {
		var inputs = document.getElementsByTagName("input");
		if(cb.id == "class0" && cb.checked) {
			document.getElementById("class1").checked = false;
			for(var i=0;i<inputs.length;i++)
				if( cb != inputs[i] && (inputs[i].name == "propertytype_or[]" || inputs[i].name == "pclass[]" || inputs[i].id == "class1" ) )
					inputs[i].checked = false;
		}
		else if(cb.id == "class1" && cb.checked) {
			document.getElementById("class0").checked = false;
			for(var i=0;i<inputs.length;i++)
				if( inputs[i].name == "propertytype_or[]" )
					inputs[i].checked = false;
		}
		else if(cb.id != "class0" && cb.id != "class1" && cb.checked) {
			document.getElementById("class0").checked = false;
			document.getElementById("class1").checked = false;
		}
	}

</script>
</head>

<body>
<form name="findsales" method="get" action="index.php" onSubmit="return sendFormToCMS(this, 'index.php?option=com_cmsrealty&cmsrealty=user');">
						<input checked="checked" name="pclass[]" value="" type="checkbox" id="class0" onClick="SearchClassUnCheckALL(this)" />Any Properties<br /><span class="addon_iconizer_pclass">
						<img src="/sale/addons/transparentmaps/icons/1.png" alt="Homes for sale"/><input name="pclass[]" value="1" type="checkbox" id="class1" onclick="SearchClassUnCheckALL(this)" /> All Residential for sale

<div id="clasp_8"><a href="javascript:lunchboxOpen('8','condo, farm, etc?');"><img alt="Closed_arrow" class="arrow_icon" id="home-features-arrow" src="images/closed_arrow.gif" />
<span class="options" style="cursor:pointer">condo, farm, etc?</span>
<span class="link_open" style="cursor:pointer">open</span></a></div><br />                                    
<div id="green_8" class="lunchbox" style="width:100%;">
Only show these property types?<br />
<input type="checkbox" name="propertytype_or[]" onclick="SearchClassUnCheckALL(this)" value="Single family home" />Single family<br />
<input type="checkbox" name="propertytype_or[]" onclick="SearchClassUnCheckALL(this)" value="Condo" />Condo<br />
<input type="checkbox" name="propertytype_or[]" onclick="SearchClassUnCheckALL(this)" value="Townhouse" />Townhouse<br />
<input type="checkbox" name="propertytype_or[]" onclick="SearchClassUnCheckALL(this)" value="Farm" />Farmhouse<br />
<input type="checkbox" name="propertytype_or[]" onclick="SearchClassUnCheckALL(this)" value="Manufactured" />Manufactured<br />
</div>

						<img src="/sale/addons/transparentmaps/icons/2.png" alt="Land for sale"/><input name="pclass[]" value="2" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Land for sale<br />
						<img src="/sale/addons/transparentmaps/icons/3.png" alt"=Multifamily or Commercial for sale"/><input name="pclass[]" value="3" type="checkbox" id="class3" onclick="SearchClassUnCheckALL(this)" />Multifamily or Commercial<br />
						<img src="/sale/addons/transparentmaps/icons/6.png" alt="Businesses for sale"/><input name="pclass[]" value="6" type="checkbox" id="class4" onclick="SearchClassUnCheckALL(this)" />Businesses for sale<br />
						<img src="/sale/addons/transparentmaps/icons/7.png" alt="Cars, RVs for sale"/><input name="pclass[]" value="7" type="checkbox" id="class5" onclick="SearchClassUnCheckALL(this)" />Transportation for sale<br />
<img src="/sale/addons/transparentmaps/icons/15.png" alt="Aircraft for sale"/><input name="pclass[]" value="15" type="checkbox" id="class6" onclick="SearchClassUnCheckALL(this)" />Aircraft for sale<br />
						<img src="/sale/addons/transparentmaps/icons/16.png" alt="Sailboats for sale"/><input name="pclass[]" value="16" type="checkbox" id="class6" onclick="SearchClassUnCheckALL(this)" />Sailboats for sale<br />
						<img src="/sale/addons/transparentmaps/icons/12.png" alt="Yachts for sale"/><input name="pclass[]" value="12" type="checkbox" id="class6" onclick="SearchClassUnCheckALL(this)" />Yachts & Boats for sale<br />
						<img src="/sale/addons/transparentmaps/icons/5.png" alt="Timeshares for sale"/><input name="pclass[]" value="5" type="checkbox" id="class9" onclick="SearchClassUnCheckALL(this)" />Vacation Rentals & Timeshares </span><br />

<input name="submit" type="image" value="submit" src="./images/find-sales-rotating.gif" alt="Find Matches" width="220" height="43" border="0">
<input type="button" value="Reset Form" onClick="this.form.reset()" />
</form>
</body>
</html>

Open in new window

greenerpastures

ASKER

Your code works great. But I now discovered that any time any of the "name="propertytype_or" are checked the "All Residential for sale" must be also checked for the script to work properly.
I tried changing but I am not a javascript buff, so help is appreciated.

leakim971

2.IF any of these are checked:
Single family -> name="propertytype_or[]"
Condo -> name="propertytype_or[]"
Townhouse -> name="propertytype_or[]"
Farmhouse -> name="propertytype_or[]"
Manufactured -> name="propertytype_or[]"

then id="class1" All Residential for sale should be unchecked.

?

greenerpastures

ASKER

it is actually the opposite:

2.IF any of these are checked:
Single family -> name="propertytype_or[]"
Condo -> name="propertytype_or[]"
Townhouse -> name="propertytype_or[]"
Farmhouse -> name="propertytype_or[]"
Manufactured -> name="propertytype_or[]"

then id="class1" All Residential for sale should be CHECKED.

This is because my listings script does not work because all of those condos, townhouse, etc are part of the Residential, that must be checked for the listings script to work.

greenerpastures

ASKER

In other words, if a user pushes Condo, or Townhouse, then id="class1" All Residential should automatically be checked (unfortunately)

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

greenerpastures

ASKER

hanks so much, it is working! I hate to be such a bother, but after extensive testing I discovered one last thing: Apparently if any of these are checked (all non residential items):

javascript:document.getElementById('selector2').className='selectedAttach';%20editCS('1087838',%20false,%20false);

...then ALL name="propertytype_or[]" items must be unchecked.

In Other words, is a user checks Land, or Multifamily, or Business or Vacation , etc then Single family, and Condo, and Farm, and Townhouse, and Manufactured must be all unchecked, while id="class1" All residential could still be checked.

If it would thinks easier we can appliy id="class2" to all Non Residential items, (and id="class3" to name="propertytype_or[]" items) like so:

<input type="checkbox" name="propertytype_or[]" value="Single-family" id="class3" onclick="SearchClassUnCheckALL(this)" />Single family
<input type="checkbox" name="propertytype_or[]" value="Condo" id="class3" onclick="SearchClassUnCheckALL(this)" />Condo
<input type="checkbox" name="propertytype_or[]" value="Townhouse" id="class3" onclick="SearchClassUnCheckALL(this)" />Townhouse
<input type="checkbox" name="propertytype_or[]" value="Farm"id="class3" onclick="SearchClassUnCheckALL(this)" />Farmhouse
<input type="checkbox" name="propertytype_or[]" value="Manufactured" id="class3" onclick="SearchClassUnCheckALL(this)" />Manufactured

                                    <input name="pclass[]" value="2" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Land for trade
                                    <input name="pclass[]" value="3" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Multifamily or Commercial
                                    <input name="pclass[]" value="6" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Businesses for trade
                                    <input name="pclass[]" value="7" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Transportation for trade
<input name="pclass[]" value="15" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Aircraft for trade
                                    <input name="pclass[]" value="16" type="checkbox" id="class2"onclick="SearchClassUnCheckALL(this)" />Sailboats for trade
                                    <input name="pclass[]" value="12" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Yachts & Boats for trade
                                    <input name="pclass[]" value="5" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Vacation Rentals & Timeshares

<img src="/sale/addons/transparentmaps/icons/2.png" alt="Land for sale"/><input name="pclass[]" value="2" type="checkbox" id="class2" onclick="SearchClassUnCheckALL(this)" />Land for sale<br />
						<img src="/sale/addons/transparentmaps/icons/3.png" alt"=Multifamily or Commercial for sale"/><input name="pclass[]" value="3" type="checkbox" id="class3" onclick="SearchClassUnCheckALL(this)" />Multifamily or Commercial<br />
						<img src="/sale/addons/transparentmaps/icons/6.png" alt="Businesses for sale"/><input name="pclass[]" value="6" type="checkbox" id="class4" onclick="SearchClassUnCheckALL(this)" />Businesses for sale<br />
						<img src="/sale/addons/transparentmaps/icons/7.png" alt="Cars, RVs for sale"/><input name="pclass[]" value="7" type="checkbox" id="class5" onclick="SearchClassUnCheckALL(this)" />Transportation for sale<br />
<img src="/sale/addons/transparentmaps/icons/15.png" alt="Aircraft for sale"/><input name="pclass[]" value="15" type="checkbox" id="class6" onclick="SearchClassUnCheckALL(this)" />Aircraft for sale<br />
						<img src="/sale/addons/transparentmaps/icons/16.png" alt="Sailboats for sale"/><input name="pclass[]" value="16" type="checkbox" id="class6" onclick="SearchClassUnCheckALL(this)" />Sailboats for sale<br />
						<img src="/sale/addons/transparentmaps/icons/12.png" alt="Yachts for sale"/><input name="pclass[]" value="12" type="checkbox" id="class6" onclick="SearchClassUnCheckALL(this)" />Yachts & Boats for sale<br />
						<img src="/sale/addons/transparentmaps/icons/5.png" alt="Timeshares for sale"/><input name="pclass[]" value="5" type="checkbox" id="class9" onclick="SearchClassUnCheckALL(this)" />Vacation Rentals & Timeshares </span><br />

Open in new window

leakim971

...and you don't try to understand the code to update it to your needs ?

greenerpastures

ASKER

I did, believe me, I spent 2 hours playing with it. I have no problem with PHP but javascript is new to me. I will have to hit the books probably. I know you've done more than enough. Thanks.

leakim971

Javascript and php are not so different. : starting from the following you can create a php like code,

function SearchClassUnCheckALL(cb) {

		$class0IsChecked = getCheckboxByID("class0").checked;
		$class1IsChecked = getCheckboxByID("class1").checked;
		$propertytype_orIsChecked = checkboxesWithThisNameIsChecked("propertytype_or[]");
		$pclassIsChecked = checkboxesWithThisNameIsChecked("pclass[]");
		
		// rest of the code PHP like here

	}
	
	function getCheckboxByID(id) { return document.getElementById(id); }
	function getCheckboxesByTag(TagName) { return document.getElementsByTagName(TagName); }
	function checkboxesIsCheckedByName(name){ var inputs = getCheckboxesByTag("input");var c=false;for(var i=0;i<inputs.length;i++) if(inputs[i].name==name)c=c||inputs[i].checked;return c; }
	function checkCheckboxByID(id) { document.getElementById(id).checked = true; }
	function uncheckCheckboxByID(id) { document.getElementById(id).checked = false }
	function checkCheckboxesByName(name) { var inputs = getCheckboxesByTag("input");for(var i=0;i<inputs.length;i++) if(inputs[i].name==name) inputs[i].checked = true; }
	function uncheckCheckboxesByName(name) { var inputs = getCheckboxesByTag("input");for(var i=0;i<inputs.length;i++) if(inputs[i].name==name) inputs[i].checked = false; }

Open in new window

greenerpastures

ASKER

Got the last bit resolved, too.

Thanks so much

leakim971

You're welcome! Thanks for the points!