asked on

Javascript Back Button Issue in PHP

I have a search page here (TinyURL used to avoid google indexing):

http://tinyurl.com/6y5gqfd

By default the form action is this:

<form action="residential?frame=RESI&base=frames" method="post" name="byCity" id="byCity">

Open in new window

Under Step 2, I have the following form action onClick event.

<input type="radio" name="proptype" id="RESI" value="RESI" checked="checked" onClick="this.form.action='residential?frame=RESI&base=frames';" />

Open in new window

This works great EXCEPT when the user performs a search and then click the Back button in their browser to return to the search page.

When they do this, the form shows the Radio select in Step 2 is still selected but in reality it defaults to the default form action in Firefox. I assume its the same for other browsers.

Is there a javascript I can insert to make sure it maintains the onClick action when back is clicked?

Please provide a sample to try.

bartvd

<body onload="document.getElementsById('RESI').checked=true;" >

This ensures your first radio button is selected, also when you go back.

pda4me

ASKER

bart,

I just realized, should have included the whole group in step 2. Their id is not always RESI? How do I update your code to do this? Also, is it possible to have this as a javascript and not attached to the <body> tag?

	<label>
					<input type="radio" name="proptype" id="RESI" value="RESI" checked="checked" onClick="this.form.action='residential?frame=RESI&base=frames';" />
					Residential</label>
				<label>
					<input type="radio" name="proptype" id="LOTL" value="LOTL" onClick="this.form.action='residential?frame=LOTL&base=frames';" />
					Land and Lots</label>
				<label>
					<input type="radio" name="proptype" id="COMI" value="COMI" onClick="this.form.action='residential?frame=COMI&base=frames';" />
					Commercial</label>
				<label>
					<input type="radio" name="proptype" id="INCP" value="INCP" onClick="this.form.action='residential?frame=INCP&base=frames';" />
					Income Producing</label>
				<label>
					<input type="radio" name="proptype" id="RNTL" value="RNTL" onClick="this.form.action='residential?frame=RNTL&base=frames';" />
					Rentals</label>

Open in new window

bartvd

There are two choises, you can ensure the first radio button is always checked, so the action of the form is always correct, or check the value of the radiobutton and adapt the action of the form to that. It is easier to do the first option, the code does not need to change for that. You can set it between javascript tags, then place this code at the end of the body.

<script type="text/javascript">
document.getElementsById('RESI').checked=true;
</script>

If you want to do the second option, please tell me.

pda4me

ASKER

Okay, option #1 worked great in FF but I just tested in IE 7 and it still does the same thing?

pda4me

ASKER

I tried moving the script to the bottom of the page and get the same thing? How can I get this to function the same in IE and FF?

bartvd

It could be a typo, try this:

<script type="text/javascript">
document.getElementById('RESI').checked=true;
</script>

If it still doesn't work, please use this:
<script type="text/javascript">
alert('test');
</script>

and test if there is a popup 'test' after you pressed the back button.

pda4me

ASKER

Yes, I get the test prompt and replaced the code. It works like a charm in FF just not IE...what do you think?

ASKER CERTIFIED SOLUTION

bartvd

membership

This solution is only available to members.

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

Start Free Trial