Trying to run function on page load

Question

I have a custom function which is fired once I make a selection from a select list.

Here is my select list:

<select id="payment_type" name="payment_type" onchange="java_script_:show(this.options[this.selectedIndex].value)">
            <option id="default" value="" <cfif #get_ticket.payment_type# eq ''>selected="selected"</cfif>>Please select the payment type</option>
            <option id="check" value="check" <cfif #get_ticket.payment_type# eq 'check'>selected="selected"</cfif>>Check</option>
            <option id="cash" value="cash" <cfif #get_ticket.payment_type# eq 'check'>selected="selected"</cfif>>Cash</option>
            <option id="visa" value="visa" <cfif #get_ticket.payment_type# eq 'visa'>selected="selected"</cfif>>Visa</option>
            <option id="mc" value="mc" <cfif #get_ticket.payment_type# eq 'mc'>selected="selected"</cfif>>Master Card</option>
            <option id="amex" value="amex" <cfif #get_ticket.payment_type# eq 'amex'>selected="selected"</cfif>>American Express</option>
            <option id="discover" value="discover" <cfif #get_ticket.payment_type# eq 'discover'>selected="selected"</cfif>>Discover Card</option>
          </select>

My javascript function will show or hide DIVs in my page based on my selection.

Here is that JS code:

<SCRIPT>          
$( document ).ready(function() {
console.log("My Function was called on page load"); 
    function show(select_item) {
       console.log( select_item);
        if (select_item == "check") {
            $("##check_number").css("display", "block");
            $("##card_number").css("display", "none");
            $("##card_name").css("display", "none");
            $("##expiration_date").css("display", "none");
            $("##cvc_code").css("display", "none");
            $('##submitPaymentForm').prop('disabled', false);
            $('##submitPaymentForm').prop('disabled', false);           
        }
        if (select_item == "cash") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "none");
            $("##card_name").css("display", "none");
            $("##expiration_date").css("display", "none");
            $("##cvc_code").css("display", "none");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "visa") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "mc") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "amex") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        } 
        if (select_item == "discover") {
            $("##check_number").css("display", "none");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        }  
        if(select_item == "") {
            $("##check_number").css("display", "none");
            $("##check_number").css("display", "block");
            $("##card_number").css("display", "block");
            $("##card_name").css("display", "block");
            $("##expiration_date").css("display", "block");
            $("##cvc_code").css("display", "block");
            $('##submitPaymentForm').prop('disabled', false);           
        }
    }
show($("##payment_type").val());
});

</SCRIPT>

I am trying to run this script not just when a selection is made but also when the page is loaded because sometimes a user is coming back to this page after already making the selection and I want the proper DIVs to already be shown or hidden.

It works fine if my selectlist call the function but it is currently not running my function on page load.

What am I doing wrong?

Answer 1

This should solve your problem, windows.onload

<!DOCTYPE html> <html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>

    </body> </html>

Answer 2

You defined a function in a document.ready() section, but haven't called it. Add a call to your function in the end of the document.ready(), like show(<param>);