I have a function that enables or disables form elements based on which radio item is checked. It is working ok. However, I wish that one of the radio buttons to be checked at page load with the appropriate form elements already disabled or enabled.

Right now on page load, I have one of the radio buttons checked on the form itself but the javascript will fire when there is a change.

Here is the javascript

<script type="text/javascript">
        function customerChoice() {
            if (document.getElementById('radio1').checked) {
                document.getElementById('pany').disabled = false;
                document.getElementById('onetime').disabled = true;
                document.getElementById('span1').style.color = '#cccccc';
                document.getElementById('span2').style.color = '#000000';
                }
            if (document.getElementById('radio2').checked) {
                document.getElementById('pany').disabled = true;
                document.getElementById('onetime').disabled = false;
                document.getElementById('span1').style.color = '#000000';
                document.getElementById('span2').style.color = '#cccccc';
            }
        }
window.onload = customerChoice();

</script>

And here are the two radio buttons.

<input type="radio" name="type" id="radio1" value="C" onclick="customerChoice()" checked />Current Customer<br />

<input type="radio" name="type" id="radio2" value="O" onclick="customerChoice()" />One Time Customer<br />

Need help figuring out what to change in order to make the javascript fire upon loading. Thank you.

I have a function that enables or disables form elements based on which radio item is checked. It is working ok. However, I wish that one of the radio buttons to be checked at page load with the appropriate form elements already disabled or enabled.

Right now on page load, I have one of the radio buttons checked on the form itself but the javascript will fire when there is a change.

Here is the javascript

<script type="text/javascript">
        function customerChoice() {
            if (document.getElementById('radio1').checked) {
                document.getElementById('pany').disabled = false;
                document.getElementById('onetime').disabled = true;
                document.getElementById('span1').style.color = '#cccccc';
                document.getElementById('span2').style.color = '#000000';
                }
            if (document.getElementById('radio2').checked) {
                document.getElementById('pany').disabled = true;
                document.getElementById('onetime').disabled = false;
                document.getElementById('span1').style.color = '#000000';
                document.getElementById('span2').style.color = '#cccccc';
            }
        }
window.onload = customerChoice();

</script>

And here are the two radio buttons.

<input type="radio" name="type" id="radio1" value="C" onclick="customerChoice()" checked />Current Customer<br />

<input type="radio" name="type" id="radio2" value="O" onclick="customerChoice()" />One Time Customer<br />

Need help figuring out what to change in order to make the javascript fire upon loading. Thank you.

• javascript
• forms

2 Answers 2

Try:

window.onload = customerChoice;

The way you have it runs the function immediately, and sets the onload handler to the result (which is undefined, since the function doesn't return anything), rather than to the function itself. It's not working because it runs before the DOM is loaded.

try putting the customerChoice() function inside an anonymous function:

window.onload = function() {
  customerChoice();  
};