Run javascript on page load wordpress

Question

I've created a checkbox and an input field and added these to my WooCommerce checkout. The input field should be hidden when the checkbox is unchecked, while showing up once the checkbox is checked.

This is working fine when the checkbox is clicked - but on initial page load the checkbox is unchecked but the input field is showing.

How am I able to run the javascript on initial page load, such that the input field is hidden.

This is the code I have right now:

  
function conditionally_hide_show_checkout_field() {
   wc_enqueue_js( "
      $('#gift_wrap').change(function() {
         if ($(this).is(':checked') ) {
            $('#personal_message_field').show();
         } else {
            $('#personal_message_field').hide();
         }
      });
   " );
}

add_action( 'wp_footer', 'on_load_script' );

function on_load_script()
{
  ?>
    <script type="text/javascript">
        window.onload = function() { conditionally_hide_show_checkout_field };        
    </script>
    <?php           
};

I'm learning javascript, so it's probably something silly. But everyone has got to learn along the way, so I decided I'll just post my question and learn.

Thanks!

conditionally_hide_show_checkout_field should be conditionally_hide_show_checkout_field() - to call a function you have to use the brackets. — ADyson
– ADyson, Commented Sep 20, 2022 at 11:35
Also I could be wrong but you seem to be trying to call a PHP function from JS? — ADyson
– ADyson, Commented Sep 20, 2022 at 11:36
on_load_script should be removed completely, the action you add should be conditionally_hide_show_checkout_field. And inside the JS code that is adding to the document, you should add a document ready handler, and inside trigger the change event on that element. — C3roe
– C3roe, Commented Sep 20, 2022 at 11:38
Oke thanks for the input. I've tried to made an edit, but it's not working as I excepted. add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_checkout_field', 9999 ); function conditionally_hide_show_checkout_field() { wc_enqueue_js(" $('#gift_wrap').change(function() { if ($(this).is(':checked') ) { $('#personal_message_field').show(); } else { $('#personal_message_field').hide(); } }); Window.onload = function() { conditionally_hide_show_checkout_field()}; " ); }; — Neal
– Neal, Commented Sep 20, 2022 at 12:27

Vijay Hardaha · Accepted Answer · 2022-09-22 11:39:58Z

2

You're doing it in the wrong way.

conditionally_hide_show_checkout_field is a php function you can't call it inside script tag as JS function.
even if you call it using <?php echo conditionally_hide_show_checkout_field(); ?> it won't output any js code since you're using wc_enqueue_js
You have some issues with your jQuery code. in WordPress, you access jquery using jQuery not with $ so you'll have to pass jQuery and use it as $ using the function.

So you just need to write Js code using wc_enqueue_js within a function and hook that function on wp_footer you don't have to write <script> tag or anything else.

Here is the cleaned and correct code for you to use. You can alert something to ensure if it's working or not on page load.

UPDATE

Note: since you're using wc_enqueue_js which is the WooCommerce core function so you should make a function_exists check before using it because in any case you deactivate the plugin and you're using that function in the theme files it will bring an error.

function conditionally_hide_show_checkout_field() {
    if ( function_exists( 'wc_enqueue_js' ) ) {
        wc_enqueue_js(
            "
            ( function( $ ) {
                window.onload = function() {
                    $( document ).on( 'change', '#gift_wrap', function() {
                        if ( $( this ).is( ':checked' ) ) {
                            $( '#personal_message_field' ).show();
                        } else {
                            $( '#personal_message_field' ).hide();
                        }
                    } );
                };
            }( jQuery ) );
            "
        );
    }
}
add_action( 'wp_footer', 'conditionally_hide_show_checkout_field' );

edited Sep 22, 2022 at 11:39

answered Sep 20, 2022 at 19:34

Vijay Hardaha

2,6161 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neal Over a year ago

Thanks for your thorough explanation @vijayhardaha, means a lot while learning along the way. I'm not so much used to mix JS and PHP as you noticed, but I see how things are supposed to work now.

Vijay Hardaha Over a year ago

@Neal I have added an extra note about using function_exists when you use a plugin function in the theme.

Collectives™ on Stack Overflow

Run javascript on page load wordpress

1 Answer 1

UPDATE

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related