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!

CodePudding user response：

You're doing it in the wrong way.

1. conditionally_hide_show_checkout_field is a php function you can't call it inside script tag as JS function.
2. 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
3. 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' );