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

问题描述

我使用以下代码在 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 钩子和函数在选择字段中的选择？

解决方法

• 如果在选择字段中未选择任何内容，则在提交表单时会出现错误消息。
• 如果选择了“推荐计划”，则文本字段将变为可见。如果选择了另一个选项，文本字段将被隐藏。
• 由于“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','error' );
        }       
    }
}
add_action( 'woocommerce_checkout_process','action_woocommerce_checkout_process',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',2 );