根据选择字段显示/隐藏自定义字段并在 WooCommerce 结帐中进行验证 [英] Show/hide custom field based on a select field with validation in WooCommerce checkout

问题描述

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

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

---

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

---

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?

推荐答案

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

所以你得到:

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

这篇关于根据选择字段显示/隐藏自定义字段并在 WooCommerce 结帐中进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！