我一直在使用 Auroprata 的這個答案(Wordpress Contact Form 7 根據 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 );
}
uj5u.com熱心網友回復:
您的 JS 代碼中有額外的括號,但除此之外它還能作業。您確定第三個服務的頁面參考包含正確的 slugservice-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:
創建自定義表單標簽并選擇課程服務器端。
新表單標簽: [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_refferer = 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 refferer.
$match = stripos( $page_refferer, $slug );
// Check if refferer exists and compare it to the course list.
if ( ! empty( $page_refferer ) && $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;
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/379035.html
標籤:javascript 查询 WordPress的 联系表格 7
上一篇:Jquery資料表,編輯單列值并將值發送到后端進行更新
下一篇:指標其實也沒有那么難
