Implement jQuery Smart wizard

Question

I want to implement jQuery Smart Wizard to create a form that will let the user input some information. It usually need that all the html is inserted on one page, but I don't know if this is the best approach with wordpress and if it will work well. Is there anyone who have implemented it in his/her theme? I need to figure out how to manage the form submission, I think that the best approach is ajax,but how I save the data after submission?

Answer 1

I haven't used this jQuery library myself, but based on a quick glance on the documentation, you could probably just wrap the wizard inside a <form> tag and add a custom handler for the smartWizard onFinish event. When the event is fired, send the form data to server with either admin ajax or REST API.

So your html could look something like this,

<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>

Script

$(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 to handle ajax saving. Pick a suitable function or write your own custom logic to save the data user sends.

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 This is by no means a complete example and requires you to fill in the details of the implementation.