[SOLVED] JavaScript Problem

I'm experiencing a behavior where my javascript is working on a regular html page, but not working properly in chronoforms:

In Chronoforms Javascript box:

function show() {
	document.getElementById('testdiv').style.display='block';
}
function hide() {
	document.getElementById('testdiv').style.display='none';
}

In Chronoforms Form HTML box:

<select name="testselect" id="testselect">
    <option value="Selection 1" onClick="hide()">Selection 1</option>
    <option value="Selection 2" onClick="show()">Selection 2</option>
</select>

<div id="testdiv" style="display:none;">Showing Selection 2</div>

Working here: https://spears.okstate.edu/files/javascript/
Not working here: https://spears.okstate.edu/index.php?option=com_chronocontact&chronoformname=test

The chronoforms version seems to hide Selection 1 if you switch them back and forth a couple of times, and it also does not display the div when you select Selection 2. Anybody know what I'm doing wrong? Or is this a chronoforms bug?

Thanks!

Hi redrings,

Sorry, no idea. I'd expect that to work OK. Could be a conflict with the JQuery or Rok code on the same page.

Bob

Hi redrings,

Sorry, no idea. I'd expect that to work OK. Could be a conflict with the JQuery or Rok code on the same page.

Bob

Thanks Bob!

It was the Rok code (Plugin > System - RokBox)

In case anyone else is reading this, thought I should note that I found out that the above code doesn't work in Internet Explorer. To make it work it IE it should be:

In the HTML box:

  <select name="testselect" id="testselect" onclick="showhide()">
    <option value="Selection 1">Selection 1</option>
    <option value="Selection 2">Selection 2</option>
  </select>
<div id="testdiv" style="display:none;">Showing Selection 2</div>

In the JavaScript box:

function showhide() {
	var test = document.getElementById('testselect').value;
	if (test == 'Selection 2') {
			document.getElementById('testdiv').style.display='block';
	}
	else { document.getElementById('testdiv').style.display='none'; }
}