Trying to Change Conflicting Form Elements with JS

[OtagoHarbour]

I have the following html form.

<form name="displayForm" style="margin: 0px; padding: 0px;"><input type="checkbox" name="logarithmicIncrease" value="logarithmicIncrease"  onchange="DisableExpIncrease()"/>Logarithmic Increase<br /><input type="checkbox" name="exponentialIncrease" value="exponentialIncrease" />Exponential Increase<br /><input type="submit" value="Submit" /></form>

A logarithmic increase and exponential increase are mutually incompatible. They may both be false but may not both be true. Hence I would like exponential increase to be set to false if logarithmic increase is set to true. I try to do this with the following JS code immediately following </form>.

<script type="text/javascript">function DisableExpIncrease(){	if (document.displayForm.logarithmicIncrease==true)		document.displayForm.exponentialIncrease=false}</script>

It has no effect. I would be grateful if someone could tell me why it does not set exponential increase to false.Many thanks in advance,Peter.

[justsomeguy]

The checkboxes are not simply set to "true" or "false", they have a checked property which says whether or not the box is checked.http://www.w3schools.com/jsref/dom_obj_checkbox.aspWhy not make them radio buttons instead?

[OtagoHarbour]

The checkboxes are not simply set to "true" or "false", they have a checked property which says whether or not the box is checked.http://www.w3schools.com/jsref/dom_obj_checkbox.aspWhy not make them radio buttons instead?

Thank you for your reply. I changed the JavaScript code to the following.

<script type="text/javascript">function DisableExpIncrease(){	if (document.displayForm.logarithmicIncrease.checked==true)		document.displayForm.exponentialIncrease.checked=false}</script>

But checking the LogarithmicIncrease box does not uncheck the ExponentialIncrease box. I see your point about radio buttons. However I would need to use 3 radio buttons since the increase may be linear (the default). Also I also have logarithmic and exponential decrease in this application. I also have radio buttons to choose the color look up table to use. I have never used more than one set of radio buttons in a form but I guess it can be done. I would prefer to unset the check boxes if possible.Part of the reason I would like to use JavaScript is that some of the color look up tables do not have the option of logarithmic and/or exponential increase so I would like to disable the appropriate check boxes if those look up tables are selected.Thanks,Peter.

[Ingolme]

Thank you for your reply. I changed the JavaScript code to the following.

<script type="text/javascript">function DisableExpIncrease(){	if (document.displayForm.logarithmicIncrease.checked==true)		document.displayForm.exponentialIncrease.checked=false}</script>

But checking the LogarithmicIncrease box does not uncheck the ExponentialIncrease box. I see your point about radio buttons. However I would need to use 3 radio buttons since the increase may be linear (the default). Also I also have logarithmic and exponential decrease in this application. I also have radio buttons to choose the color look up table to use. I have never used more than one set of radio buttons in a form but I guess it can be done. I would prefer to unset the check boxes if possible.Part of the reason I would like to use JavaScript is that some of the color look up tables do not have the option of logarithmic and/or exponential increase so I would like to disable the appropriate check boxes if those look up tables are selected.Thanks,Peter.

The valus of checked can either be "checked" or an empty string. It's not true or false (though it is if you cast it to boolean)

[OtagoHarbour]

The valus of checked can either be "checked" or an empty string. It's not true or false (though it is if you cast it to boolean)

I figured it out. I change the check box elements in the form to

<input type="checkbox" id="logarithmicIncrease" name="logarithmicIncrease" value="logarithmicIncrease" onclick="DisableExpIncrease()"/>Logarithmic Increase<br /><input type="checkbox" id="exponentialIncrease" name="exponentialIncrease" value="exponentialIncrease" />Exponential Increase<br />

and changed the JavaScript code to this

<script type="text/javascript">function DisableExpIncrease(){	if (document.getElementById("logarithmicIncrease").checked==true)		document.getElementById("exponentialIncrease").checked=false}</script>

Thank you for your help,Peter.