Changing form fields question...

miniDave · 15th January 2008, 10:30 AM

Ok I have a form (see bottom left of link below)
link

What I want to do is when they select "For Rent" from the dropdown box, it changes the price fields from Purchasing price values (ie. 100k, 200k etc..) to rent values (100pw, 200pw etc..) and vice versa.

Can anyone direct me to any scripts or places I can goto to figure out how to code this (I have some basic Javascript knowledge).

Edit: I've thought of showing/hiding divs using getElementId however I want to use the same price field variable in the form when it submits and also use the dropdown box field. Any help is appreciated

Thanks,

Dave

Herro · 15th January 2008, 11:36 AM

Are you posting those from a database or just plain html??

miniDave · 15th January 2008, 11:38 AM

Quote:

Originally Posted by Herro

Are you posting those from a database or just plain html??

just plain html

Herro · 15th January 2008, 12:05 PM

ok gimme 20 mins, just have to finish something and i'll give you the code.

miniDave · 15th January 2008, 12:17 PM

Just managed to code what I needed with the aid of a few tutorials.

I used divs, getElementId, and just changed the style.display to block or none.

Shall see if the team leader is happy.

Thanks herro, feel free to critique my code. I'm always open to suggestions.

Working design here

Herro · 15th January 2008, 12:17 PM

Insert this into your html Bes ure when editing the slecte options you do not put breaks(enter) into it, javascript cant handle these multiple line strings.

Also the outerHTML = outerHTML reload is to fix an issue with IE where is will fualt on the first option rendering the select box empty with innerHTML.

Modify the content strings to match what you want.

You can optionally also remove all the <OPTION> tags out of price1 and price 2.

just call from <BODY onload="ChangePrice('other');">

Code:

<script type="text/javascript">
function ChangePrice(status) {
alert(status);
	rent_content = "<OPTION value=50 selected>Minimum</OPTION><OPTION value=100>$100</OPTION><OPTION value=150>$150</OPTION><OPTION value=200>$200</OPTION><OPTION value=250>$250</OPTION>";
	other_content= "<OPTION value=0 selected>Minimum</OPTION><OPTION value=100000>$100,000</OPTION> <OPTION value=120000>$120,000</OPTION> <OPTION value=140000>$140,000</OPTION> <OPTION value=160000>$160,000</OPTION> <OPTION value=180000>$180,000</OPTION> <OPTION value=200000>$200,000</OPTION>";

	if (status == "lease") {
		document.getElementById('price1').innerHTML = rent_content;
		document.getElementById('price2').innerHTML = rent_content;
		document.getElementById('price1').outerHTML = document.getElementById('price1').outerHTML
		document.getElementById('price2').outerHTML = document.getElementById('price2').outerHTML
	} 
	else {
		document.getElementById('price1').innerHTML = other_content;
		document.getElementById('price2').innerHTML = other_content;
		document.getElementById('price1').outerHTML = document.getElementById('price1').outerHTML
		document.getElementById('price2').outerHTML = document.getElementById('price2').outerHTML
	}
	
}
</script>

then amend your select box
from

<SELECT class=bodytext id=type name=type>

to

<SELECT onChange="ChangePrice(this.value);" class=bodytext id=type name=type>

also i would highly reccomend hardcoding the width of price1 and price2

eg <INPUT style="width:100px;" ....

Herro · 15th January 2008, 12:20 PM

Quote:

Originally Posted by miniDave

Just managed to code what I needed with the aid of a few tutorials.

I used divs, getElementId, and just changed the style.display to block or none.

Shall see if the team leader is happy.

Thanks herro, feel free to critique my code. I'm always open to suggestions.

Working design here

Cool. Just make sure whatever you are doing it economical. also notice divs move when the DOM object is hidden and displayed, you need to set the width of your select boxes to be absolute. at the moment they are relying on their content to determine ther size. this is in my last post...

Rezin · 15th January 2008, 12:50 PM

Quote:

Originally Posted by Herro

...

I wouldn't do it that way. You're better off either looping through and replacing the option's value, or removing the lot and populating it again.

Here's a couple of links that may help:

Add items in Drop Down List or List Box using Javascript.
How to Add an Option to a Dropdown Select Box with JavaScript. (see the 'related articles' at the end of that link for removing options).

Herro · 15th January 2008, 1:17 PM

Quote:

Originally Posted by Rezin

I wouldn't do it that way. You're better off either looping through and replacing the option's value, or removing the lot and populating it again.

Here's a couple of links that may help:

Add items in Drop Down List or List Box using Javascript.
How to Add an Option to a Dropdown Select Box with JavaScript. (see the 'related articles' at the end of that link for removing options).

Normally neither would I, its storing both sets of data in a string, I would use an addoption() DOM function and i'd loop through values and text with a set increment.

But if he asked this question he is abviously not that advanced, and i didnt want to go through explaining setting an increment as well as adding the pre and post strings ($,pw) as well as setting a limit.

Just a question though, If you have the experience, i have done this two ways before. I've used the DOM to add options to the select field, and I;ve also looped through, built a string and used innerhtml.

I like the simplicity of the DOM solution but I find that its buggy on some browsers, and the only select/innerHTML bug is in IE, and that can be reset with outerHTML...

What do you use and why? The only reason is that on our intranet we have something like 35 dynamic select boxes, both simple html/javascript as well as ajax boxes that take from a database, and the page code is starting to look very untidy, and more importantly I'm starting to get odd errors like select boxes dying or only partially filling with info, its very hard to replicate, but i see it more on Terminal services clients running IE7 for some reason.

Rezin · 16th January 2008, 12:42 AM

Quote:

Originally Posted by Herro

What do you use and why? The only reason is that on our intranet we have something like 35 dynamic select boxes, both simple html/javascript as well as ajax boxes that take from a database, and the page code is starting to look very untidy, and more importantly I'm starting to get odd errors like select boxes dying or only partially filling with info, its very hard to replicate, but i see it more on Terminal services clients running IE7 for some reason.

You should look at Ext JS. This demo doesn't cover adding/removing options, but if there isn't one on that site, it wouldn't be hard to knock one up.

15th January 2008, 10:30 AM	#1
miniDave Member Join Date: Jan 2007 Posts: 8	Changing form fields question... Ok I have a form (see bottom left of link below) link What I want to do is when they select "For Rent" from the dropdown box, it changes the price fields from Purchasing price values (ie. 100k, 200k etc..) to rent values (100pw, 200pw etc..) and vice versa. Can anyone direct me to any scripts or places I can goto to figure out how to code this (I have some basic Javascript knowledge). Edit: I've thought of showing/hiding divs using getElementId however I want to use the same price field variable in the form when it submits and also use the dropdown box field. Any help is appreciated Thanks, Dave Last edited by miniDave; 15th January 2008 at 11:30 AM.

15th January 2008, 11:36 AM	#2
Herro Member Join Date: Nov 2002 Location: Brisbane Posts: 742	Are you posting those from a database or just plain html??

15th January 2008, 12:05 PM	#4
Herro Member Join Date: Nov 2002 Location: Brisbane Posts: 742	ok gimme 20 mins, just have to finish something and i'll give you the code.

15th January 2008, 12:17 PM	#5
miniDave Member Join Date: Jan 2007 Posts: 8	Just managed to code what I needed with the aid of a few tutorials. I used divs, getElementId, and just changed the style.display to block or none. Shall see if the team leader is happy. Thanks herro, feel free to critique my code. I'm always open to suggestions. Working design here