AJAX

javascript radio buttons and insanity

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2006

Posts: 5

Reputation: davidpitts is an unknown quantity at this point

Solved Threads: 0

davidpitts davidpitts is offline

Offline

Newbie Poster

javascript radio buttons and insanity

Mar 20th, 2006

I am (as you will quickly discover) a novice javascript coder. Here is my issue. I am using a radio button, and it works fine. Then when I change some other element on the page, or hit refresh, the radio button does not remain set. You can see it in action here:

http://claytargetsonline.com/radio2.php?type=line

I have tried check to see which one is checked and every other solution I can think of. I have asked experienced programmers, and didn't want to waste more than 10 minutes of their time, but it was not obvious to them either.

I have spent about 5 hours searching the web. No avail. Help!

I did search this forum also but did not find a similar problem.

Any help woule be appreciated.

David

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
 
function check(charttype)
	{
		document.getElementById("chartType").value=charttype
	}
 
function refresh_window()
	{	
 
	var type = document.getElementById("chartType").value
	window.location=("radio2.php?type=" + type)
 
	}
 
 
</script>
 
 
<form id="form1" action="(EmptyReference!)" method="put" name="form1">
 
<table width="415" border="0" cellspacing="2" cellpadding="0">
	<tr>
			<td width="297"><strong>Chart Type:</strong></td>
			<td valign="bottom" width="112">&nbsp;</td>
	</tr>
	<tr>
			<td width="297">
			<input type="radio" name="chartType" id="chartType" value="line" 	onclick="check(this.value)" <?php if ($type == "line") echo "CHECKED" ?> > line &nbsp;
			<input type="radio" name="chartType" id="chartType" value="column" 	onclick="check(this.value)" <?php if ($type == "column") echo "CHECKED"?> > column  <input type="radio" name="chartType" id="chartType" value="3dcolumn" onclick="check(this.value)" <?php if ($type == "3dcolumn") echo "CHECKED"?> > 3d column
			</td>
			<td align="right" rowspan="2" valign="bottom" width="112">
			<button name="refresh" type="button" onclick="refresh_window()">Refresh Chart </button>
		</td>
	</tr>
	<tr>
			<td width="297"></td>
		</tr>
</table>
 
</form>
<p>The problems is this. </p>
<p>Set the chart type to column and hit refresh. Everything works.</p>
<p>Now hit refresh again. Chart type changes to line.</p>
<p>I hope someone can help me with this. I am losing my mind.</p>
<script type="text/javascript">

function check(charttype)
	{
		document.getElementById("chartType").value=charttype
	}

function refresh_window()
	{	
	
	var type = document.getElementById("chartType").value
	window.location=("radio2.php?type=" + type)
	
	}
	
	
</script>


<form id="form1" action="(EmptyReference!)" method="put" name="form1">

<table width="415" border="0" cellspacing="2" cellpadding="0">
	<tr>
			<td width="297"><strong>Chart Type:</strong></td>
			<td valign="bottom" width="112">&nbsp;</td>
	</tr>
	<tr>
			<td width="297">
			<input type="radio" name="chartType" id="chartType" value="line" 	onclick="check(this.value)" <?php if ($type == "line") echo "CHECKED" ?> > line &nbsp;
			<input type="radio" name="chartType" id="chartType" value="column" 	onclick="check(this.value)" <?php if ($type == "column") echo "CHECKED"?> > column  <input type="radio" name="chartType" id="chartType" value="3dcolumn" onclick="check(this.value)" <?php if ($type == "3dcolumn") echo "CHECKED"?> > 3d column
			</td>
			<td align="right" rowspan="2" valign="bottom" width="112">
			<button name="refresh" type="button" onclick="refresh_window()">Refresh Chart </button>
		</td>
	</tr>
	<tr>
			<td width="297"></td>
		</tr>
</table>

</form>
<p>The problems is this. </p>
<p>Set the chart type to column and hit refresh. Everything works.</p>
<p>Now hit refresh again. Chart type changes to line.</p>
<p>I hope someone can help me with this. I am losing my mind.</p>

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: javascript radio buttons and insanity

Mar 20th, 2006

Not sure I understand the problem. Hitting "Refresh" will, well, refresh the page. No value would be expected to remain, every element would naturally go back to the initial, default values.

•

Join Date: Dec 2004

Posts: 2,413

Reputation: Comatose is a jewel in the rough

Solved Threads: 211

Comatose

Offline

Taboo Programmer

Re: javascript radio buttons and insanity

Mar 20th, 2006

The answer is simple. You have the onclick events launched when you click a radio button. That function (check) sets a document item to the value of the clicked option. Then when you execute a refresh_window, that value is still valid in that page element, when you read the value in order to pass it to window.location, which is good, but when the page refreshes, so does the page element that normally gets set by the check function. So, since the check function isn't executed again, it resorts to it's default value. You can illustrate this, by going to the page, choosing an option, and click refresh, then click the same option, and click refresh again..... as long as you click an option, it remains checked on the refresh... it's only when you do a refresh, and then another refresh (because you aren't calling the check function on the second refresh) that it loses it's value. Now, I'm no programmer, but I'd suggest trying to add a call to the check function inside the refresh_window function....

As a very last resort, assuming the above doesn't solve the issue.... you could have the page write a cookie, and then read the cookie for the value that was previously set.... a tacky fix, but one that would probably work.

•

Join Date: Mar 2006

Posts: 5

Reputation: davidpitts is an unknown quantity at this point

Solved Threads: 0

davidpitts davidpitts is offline

Offline

Newbie Poster

Re: javascript radio buttons and insanity

Mar 20th, 2006

I tried to simplify the code so that it would be the simplest for asking the question. Maybe the full example of what I am trying to do would be better.

I understand what you are saying about refresh setting the state back to the default, but checkboxes stay checked, why do radio buttons reset?

http://claytargetsonline.com/napl/ch...alse&type=line

This link will take you to the charting program that I am working on. If you select a column chart and hit refresh, everything works great. Then if you change ONLY the number of Months and refresh again, it resets the chart type to line.

Any suggestions for how to preserve the setting for columns? Neither the drop down nor the checkboxes seem to have the problem.

Thanks for the responses so far.

•

Join Date: Dec 2004

Posts: 2,413

Reputation: Comatose is a jewel in the rough

Solved Threads: 211

Comatose

Offline

Taboo Programmer

Re: javascript radio buttons and insanity

Mar 20th, 2006

Yeah, I said cookies....

But beyond, the code that you have in both what you posted, and the site in the link..... when you click the radio button, it executes an onclick event.... right? That function is called "check", and it gets called when you click an option button. The check box's don't call any kind of function at all, but the option buttons do. Why the checkbox's retain their value, and the option buttons do not, is beyond me.... but I'll bet if you call the check function within the refresh_window function, it should work just fine.... Look carefully at this line:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="radio" name="chartType" id="chartType" value="column" 	onclick="check(this.value)"  > column
<input type="radio" name="chartType" id="chartType" value="column" 	onclick="check(this.value)"  > column

onclick, it calls check(this.value), when you hit refresh, the first time, it works if you change the option button, because you clicked the option button, and it called this function... when you click it the second time, it never calls "check".... ever. Not once... it needs to. So, somewhere in the refresh_window function, you need to have it call the check function.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function refresh_window()
	{	
	var type = document.getElementById("chartType").value
        check(type);
	window.location=("radio2.php?type=" + type)
	}
function refresh_window()
	{	
	var type = document.getElementById("chartType").value
        check(type);
	window.location=("radio2.php?type=" + type)
	}

Or something along those lines...

•

Join Date: Mar 2006

Posts: 5

Reputation: davidpitts is an unknown quantity at this point

Solved Threads: 0

davidpitts davidpitts is offline

Offline

Newbie Poster

Re: javascript radio buttons and insanity

Mar 20th, 2006

Thanks. I will give it a try.

•

Join Date: Mar 2006

Posts: 5

Reputation: davidpitts is an unknown quantity at this point

Solved Threads: 0

davidpitts davidpitts is offline

Offline

Newbie Poster

Re: javascript radio buttons and insanity

Mar 22nd, 2006

OK. I tried, but I never got it to work. Thanks for the help, but now a lovely dropdown menu that does work sits in place of the radio buttons. I am a beaten man. :-|

•

Join Date: Dec 2004

Posts: 2,413

Reputation: Comatose is a jewel in the rough

Solved Threads: 211

Comatose

Offline

Taboo Programmer

Re: javascript radio buttons and insanity

Mar 22nd, 2006

•

Join Date: Dec 2004

Posts: 2,413

Reputation: Comatose is a jewel in the rough

Solved Threads: 211

Comatose

Offline

Taboo Programmer

Re: javascript radio buttons and insanity

Mar 22nd, 2006

why not use cookies?

•

Join Date: Mar 2006

Posts: 5

Reputation: davidpitts is an unknown quantity at this point

Solved Threads: 0

davidpitts davidpitts is offline

Offline

Newbie Poster

Re: javascript radio buttons and insanity

#10

Mar 25th, 2006

•

Originally Posted by Comatose

why not use cookies?

Remember the part at the start of the thread about being inexperienced? Well cookies is still something that I have not done. :o Soon though. I just can't figure out why the radio buttons lose their value and dropdowns and checkboxes don't. Go figure.

Thanks for your help. It is much appreciated.