Show/hide custom field based on a select field with validation in WooCommerce checkout

Question

I have added a custom select field and a custom text field on the checkout page in WooCommerce using the code below.

I want to hide this text field by default and it should only be visible when the "Referral Program" option is selected from the select field

Here is my code, which works. Except that the textfield is always visible, whatever choice is made.

// add fields

add_action( 'woocommerce_after_checkout_billing_form', 'my_select_field' );
add_action( 'woocommerce_after_order_notes', 'referralName_textbox' );
 
// save fields to order meta
add_action( 'woocommerce_checkout_update_order_meta', 'save_what_we_added' );
 
// select
function my_select_field( $checkout ){
 
    // you can also add some custom HTML here
 
    woocommerce_form_field( 'referrence', array(
        'type'          => 'select', // text, textarea, select, radio, checkbox, password, about custom validation a little later
        'required'  => true, 
        'class'         => array('my-field', 'form-row-wide'), // array only, read more about classes and styling in the previous step
        'label'         => 'From where you hear about us',
        'label_class'   => 'my-label',
        'options'   => array( // options for <select> or <input type="radio" />
            ''      => 'Please select', // empty values means that field is not selected
            'Google'    => 'Google', // 'value'=>'Name'
            'LinkedIn'  => 'LinkedIn',
            'Facebook'  => 'Facebook',
            'Email' => 'Email',
            'Referral Program'  => 'Referral Program', // 'value'=>'Name'
            'Other' => 'Other'
            )
        ), $checkout->get_value( 'referrence' ) );
 
    // you can also add some custom HTML here
 
}
 
// checkbox
function referralName_textbox( $checkout ) {
 
    woocommerce_form_field( 'referralName', array(
        'type'  => 'text',
        'class' => array('my-field form-row-wide'),
        'label' => ' Referral Name',
        ), $checkout->get_value( 'Referral Name' ) );
 
}
 
// save field values
function misha_save_what_we_added( $order_id ){
 
    if( !empty( $_POST['referrence'] ) )
        update_post_meta( $order_id, 'referrence', sanitize_text_field( $_POST['referrence'] ) );
 
 
    if( !empty( $_POST['ReferralName'] ) )
        update_post_meta( $order_id, 'ReferralName', sanitize_text_field( $_POST['ReferralName'] ));
 
}
//

Can you please guide me on how to achieve the text field is only visible, depending on the choice in the select field using WordPress hooks and functions?

7uc1f3r 7uc1f3r · Accepted Answer · 2021-05-07T07:46:45

If nothing is selected in the select field, an error message will appear, when submitting the form.
If "Referral Program" is selected, the textfield will become visible. If another option is selected, the textfield will be hidden.
Since the "referralname" textfield is optional, no validation is provided.

So you get:

// Add fields
function action_woocommerce_after_checkout_billing_form( $checkout ) {
    // Add select field
    woocommerce_form_field( 'referrence', array(
        'type'          => 'select', // text, textarea, select, radio, checkbox, password, about custom validation a little later
        'required'      => true, 
        'class'         => array( 'my-field', 'form-row-wide' ), // array only, read more about classes and styling in the previous step
        'label'         => 'From where you hear about us',
        'label_class'   => 'my-label',
        'options'       => array( // options for <select> or <input type="radio" />
            ''                 => 'Please select', // empty values means that field is not selected
            'Google'           => 'Google', // 'value' => 'Name'
            'LinkedIn'         => 'LinkedIn',
            'Facebook'         => 'Facebook',
            'Email'            => 'Email',
            'Referral Program' => 'Referral Program',
            'Other'            => 'Other'
        )
    ), $checkout->get_value( 'referrence' ) );
    
    // Add textfield
    woocommerce_form_field( 'referralname', array(
        'type'  => 'text',
        'class' => array( 'my-field form-row-wide' ),
        'label' => ' Referral Name',
    ), $checkout->get_value( 'referralname' ) );

    // jQuery show/hide custom textfield
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Hide textfield by default
        $( '#referralname_field' ).hide();

        // On change
        $( 'select#referrence' ).change( function() {
            if ( $( 'select#referrence' ).val() == 'Referral Program' ) {
                $( '#referralname_field' ).show();
            } else {
                $( '#referralname_field' ).hide();              
            }
        });
      
    });
    </script>
    <?php
}
add_action( 'woocommerce_after_checkout_billing_form', 'action_woocommerce_after_checkout_billing_form', 10, 1 );

// Validate select field
function action_woocommerce_checkout_process() {
    // Isset    
    if ( isset( $_POST['referrence'] ) ) {
        $domain = 'woocommerce';
        $referrence = $_POST['referrence'];
        
        // Empty
        if ( empty ( $referrence ) ) {
            wc_add_notice( __( 'Please select from where you hear about us', $domain ), 'error' );
        }
        
        // NOT empty but value is 'Please select'
        if ( ! empty ( $referrence ) && $referrence == 'Please select' ) {
            wc_add_notice( __( 'Please select from where you hear about us', $domain ), 'error' );
        }       
    }
}
add_action( 'woocommerce_checkout_process', 'action_woocommerce_checkout_process', 10, 0 );

// Save fields
function action_woocommerce_checkout_create_order( $order, $data ) {
    // Isset    
    if ( isset( $_POST['referrence'] ) ) {
        $referrence = $_POST['referrence'];
    
        // Update meta data
        $order->update_meta_data( 'referrence', sanitize_text_field( $referrence ) );
    }
    
    // Isset    
    if ( isset( $_POST['referralname'] ) ) {
        $referralname = $_POST['referralname'];
    
        // Update meta data
        $order->update_meta_data( 'referralname', sanitize_text_field( $referralname ) );
    }   
}
add_action( 'woocommerce_checkout_create_order', 'action_woocommerce_checkout_create_order', 10, 2 );

Show/hide custom field based on a select field with validation in WooCommerce checkout

1 Answers