javascript - 根据推荐链接自动选择 Contact form 7 中的字段

Question

为了得到我想要的东西，我一直在使用 Aurovrata ( Wordpress Contact Form 7 dynamically select dropdown field based on url ) 的这个答案。

我的脚本是这样的:

(function($){
$(document).ready(function(){

  //determine the previous page,
  let page = document.referrer, opt='';


  switch(true){
    case page.indexOf('service-b')>0:
      opt='serviceb';
      break;
    case page.indexOf('service-c')>0:
      opt='servicec';
      break;
    case page.indexOf('service-a')>0:
      opt='servicea';
      break;
  }

  $('select[name="select-services"]').find('option[value="'+opt+'"]').prop('selected', 'selected');
})
})(jQuery) 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select-services">
 <option value="">select a service</option>
 <option value="servicea">Service A</option>
 <option value="serviceb">Service B</option>
 <option value="servicec">Service C</option>
</select> 

结果是在一秒钟内选择了正确的服务，然后又恢复到默认值。知道我做错了什么吗？

PS:为了完成它，我在 function.php 中添加了这个脚本以防止 CF7 重置表单:

add_action('wpcf7_enqueue_scripts', 'prefix_fix_form_reset');

function prefix_fix_form_reset() {
    $wpcf7 = array();
    wp_localize_script( 'contact-form-7', 'wpcf7', $wpcf7 );
}

Answer 1

您的 JS 代码中有额外的括号，但除此之外它还有效。您确定第三个服务的页面引荐来源网址包含正确的 slug service-c 吗？

选项 A:

这是一个演示:https://jsfiddle.net/9z5m4syd/2/

更新的 JS 代码:

$(document).ready(function() {
  // determine the previous page
  // eg. page referrer
  let page = 'http://website.domain/service-c', opt='';

  switch(true){
    case page.indexOf('service-b')>0:
      opt='serviceb';
      break;
    case page.indexOf('service-c')>0:
      opt='servicec';
      break;
    case page.indexOf('service-a')>0:
      opt='servicea';
      break;
  }
// Run this after 1.5 seconds
setTimeout(function() {
  $('select[name="select-services"]').find('option[value="'+opt+'"]').prop('selected', 'selected');
}, 1500);

})(jQuery);

选项 B:

创建自定义表单标签并在服务器端选择类(class)。

新表单标签:[courses your-field-name]

添加到functions.php:

/**
 * Register a new CF7 form tag.
 * 
 * Use this tag in your form [courses your-field-name]
 */
add_action( 'wpcf7_init', 'custom_add_form_tag_courses' );

function custom_add_form_tag_courses() {
    wpcf7_add_form_tag( array( 'courses', 'courses*' ), 'custom_courses_form_tag_handler', true );
}

/**
 * CF7 callback function that parses the form tag.
 */
function custom_courses_form_tag_handler( $tag ) {

    $tag = new WPCF7_FormTag( $tag );

    if ( empty( $tag->name ) ) {
        return '';
    }

    $custom_select = '';
    $option        = '';

    // Retrieve referer from ‘_wp_http_referer’ or HTTP referer.
    $page_referrer = wp_get_referer();

    // List of courses.
    $courses = array(
        "Alege cursul",
        "CURS MAKEUP",
        "CURS EXTENSII GENE",
        "CURS STILIST PROTEZIST UNGHII",
        "CURS COSMETICA",
        "CURS MASAJ",
        "CURS DESIGN INTERIOR",
        "CURS FRIZERIE/BARBERING",
        "CURS MANICHIURIST PEDICHIURIST",
        "CURS DECORATOR FLORAL",
        "CURS EPILARE",
        "CURS FOTOGRAFIE",
        "CURS VIDEO",
        "CURS MICRONEEDLING",
        "CURS COAFOR",
        "CURS DE EXTENSII PAR",
        "CURS COLORIMETRIE",
        "CURS CROITORIE",
        "CURS STILISM VESTIMENTAR",
        "CURS CONSTRUCTIE TIPARE",
        "WORKSHOP STILIZARE SPRANCENE",
        "WORKSHOP COMBI DRY MANICURE",
        "WORKSHOP AUTO COAFAT",
        "WORKSHOP IMPLETITURI"
    );
 
    // Loop through all the courses and create option values.
    foreach( $courses as $course ) {
        
        // Generate course slug.
        $slug = sanitize_title( $course );

        // Search for course in page referrer.
        $match = stripos( $page_referrer, $slug );

        // Check if referrer exists and compare it to the course list.
        if ( ! empty( $page_referrer ) && $match !== false ) {
            $option .= sprintf( '<option value="%1$s" selected="selected">%2$s</option>', esc_html( $slug ), esc_html( $course ) );
        } else {
            $option .= sprintf( '<option value="%1$s">%2$s</option>', esc_html( $slug ), esc_html( $course ) );     
        }
    }

    // Add previously generated list of options to the select tag.
    $custom_select = sprintf( '<select name="%1$s" id="%2$s">%3$s</select>', $tag->name, esc_attr( $tag->name . '-options' ), $option );

    return $custom_select;
}