我自己还没有使用过这个jQuery库,但只要快速浏览一下文档,就可以将向导包装在<form>
标记并添加smartWizard
onFinish
事件触发事件时,将表单数据发送到服务器admin ajax 或REST API.
所以你的html看起来像这样,
<form id="wizzard-form">
<div id="wizzard" class="swMain">
<ul>
<!-- step li items -->
</ul>
<div id="step-n">
<!-- step input fields -->
</div>
<!-- more steps -->
</div>
</form>
脚本
$(document).ready(function(){
// Smart Wizard
$(\'#wizzard\').smartWizard({
onFinish:onFinishCallback
});
function onFinishCallback(objs, context){
if(validateAllSteps()){
$(\'#wizzard-form\').submit(function(event){
event.preventDefault();
var data = {
\'action\': \'my_wizzard_ajax\',
// form data
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
alert(\'You are a wizzard \' + response);
});
});
}
}
});
PHP来处理ajax保存。选择合适的函数或编写自己的自定义逻辑来保存用户发送的数据。
add_action( \'wp_ajax_my_wizzard_ajax\', \'my_wizzard_ajax\' );
add_action( \'wp_ajax_nopriv_my_wizzard_ajax\', \'my_wizzard_ajax\' ); // if available to non logged-in users
function my_wizzard_ajax() {
// nonce check
// capabilities check
// required data exists checks, get data from $_POST super global variable
if ( $all_good ) {
// do something
// wp_insert_post
// wp_update_post
// wp_update_meta
// wp_update_user
// update_user_meta
wp_send_json_success( \'Harry\' );
} else {
wp_send_json_error( \'Rincewind\' );
}
}
N.B 这绝不是一个完整的示例,需要您填写实现的详细信息。