根据在 WooCommerce 结帐中进行验证的选择字段显示/隐藏自定义字段

Question

我使用下面的代码在 WooCommerce 的结帐页面上添加了一个自定义选择字段和一个自定义文本字段。

我想默认隐藏此文本字段，并且仅在从选择字段中选择“推荐计划”选项时才可见

这是我的代码，它有效。除了文本字段始终可见之外， 无论做出什么选择。

// 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'] ));
 
}
//

---

能否请您指导我如何实现文本字段仅可见，这取决于使用 WordPress 钩子和函数在选择字段中的选择？

Answer 1

• 如果在选择字段中未选择任何内容，则在提交表单时会出现错误消息。
• 如果选择“推荐计划”，文本字段将变为可见。如果选择了另一个选项，文本字段将被隐藏。
• 由于“referralname”文本字段是可选的，因此不提供验证。

所以你得到：

// 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 );