Title: Form preview before submit
Last modified: August 24, 2016

---

# Form preview before submit

 *  Resolved [kodiacc](https://wordpress.org/support/users/kodiacc/)
 * (@kodiacc)
 * [11 years ago](https://wordpress.org/support/topic/form-preview-before-submit/)
 * Is there any possibility to output all entered data before finally submitting
   the data?
 * Like a booking tool for an event or something like that – I want to give the 
   users the opportunity to check for correctness of all data.
 * [https://wordpress.org/plugins/form-maker/](https://wordpress.org/plugins/form-maker/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Contributor [webdorado](https://wordpress.org/support/users/webdorado/)
 * (@webdorado)
 * [11 years ago](https://wordpress.org/support/topic/form-preview-before-submit/#post-6096414)
 * Dear user,
 * Unfortunately that’s not possible to achieve.Thank you for your interest.
 *  [ChristianEllsworth](https://wordpress.org/support/users/christianellsworth/)
 * (@christianellsworth)
 * [11 years ago](https://wordpress.org/support/topic/form-preview-before-submit/#post-6096478)
 * Hi,
    This is how I did it. Drop this in the javascript section and change the“
   myForm” variable. Good luck.
 * // before form is load
    function before_load() { jQuery(‘.button-submit’).before(‘
   <input id=”preview” type=”button” value=”Preview Your Entries” onclick=”preview_submit();”/
   >’); } // before form submit function before_submit() {
 * }
    // before form reset function before_reset() { }
 * function preview_submit() {
 *  var dia_log=””;
    //Specify your form id below var myForm = document.getElementById(“
   form39”); //change
 *  var allelements = myForm.elements;
    var elementid,elementval,elementtype,elementlabel;
 *  //Extract Each Element Value
    for (var i = 0; i < allelements.length; i++) {
   elementtype = allelements[i].type; elementid = allelements[i].id; elementval 
   = allelements[i].value; elementlabel = jQuery(‘#’+elementid).closest(“.wdform-
   field”).find(“.wdform-label”).text();
 *  switch(elementtype){
    case ‘select-one’: if(jQuery(‘#’+elementid).parents().
   eq(3).hasClass(‘wdform_date_fields’)){ if(jQuery(‘#’+elementid).hasClass(‘sel-
   ed’)) { if (elementid.indexOf(“day”) !=-1) { dia_log += elementlabel + ‘ Day:‘
   + elementval + ‘‘; } else if (elementid.indexOf(“month”) !=-1) { dia_log += elementlabel
   + ‘ Month: ‘ + elementval + ‘‘; } else if (elementid.indexOf(“year”) !=-1) { 
   dia_log += elementlabel + ‘ Year: ‘ + elementval + ‘‘; } } } else if(jQuery(‘#’
   +elementid).hasClass(‘sel-ed’)) { if (elementid.indexOf(“country”) !=-1) { dia_log
   += ‘Country: ‘ + elementval + ‘‘; } else { dia_log += elementlabel + ‘ ‘ + elementval
   + ‘‘; } } break; case ‘radio’: if( allelements[i].checked) dia_log += elementlabel
   + ‘ ‘ + elementval + ‘‘; break; case ‘checkbox’: if( allelements[i].checked) 
   dia_log += elementlabel + ‘: ‘ + elementval + ‘‘; break; case ‘undefined’: case‘
   hidden’: case ‘fieldset’: case ‘button’: break; default: if(jQuery(‘#’+elementid).
   parents().eq(2).hasClass(‘wdform_address’) && jQuery(‘#’+elementid).val()){ if(
   elementid.indexOf(“street1”) !=-1) { dia_log += ‘**‘ + elementlabel + ‘**‘; }
   dia_log += jQuery(‘#’+elementid).next(‘label’).text() + ‘: ‘ + elementval + ‘‘;}
   else if(jQuery(‘#’+elementid).hasClass(‘input_active’)) { dia_log += elementlabel
   + ‘ ‘ + elementval + ‘‘; } break; }
 *  }
 *  //popup
    alert(‘Please Confirm Your Information is correct.\n\n’ + dia_log);//
   Using the jQuery modal plugin // jQuery.modal(‘**Please Confirm Your Information
   is correct.**‘ + dia_log);
 * }
 *  [ChristianEllsworth](https://wordpress.org/support/users/christianellsworth/)
 * (@christianellsworth)
 * [11 years ago](https://wordpress.org/support/topic/form-preview-before-submit/#post-6096479)
 * Hi,
    This is what I did. Drop this in the javascript section and change the “
   myForm” variable to the current forms ID.
 *     ```
       // before form is load
       function before_load() {
       jQuery('.button-submit').before('<input id="preview" type="button" value="Preview Your Entries" onclick="preview_submit();" />');
       }
       // before form submit
       function before_submit() {
   
       }
       // before form reset
       function before_reset() {
       }
   
       function preview_submit() {
   
         var dia_log="";
         var myForm = document.getElementById("form39");
         var allelements = myForm.elements;
         var elementid,elementval,elementtype,elementlabel;
   
          //Extract Each Element Value
           for (var i = 0; i < allelements.length; i++) {
             elementtype = allelements[i].type;
             elementid = allelements[i].id;
             elementval = allelements[i].value;
             elementlabel = jQuery('#'+elementid).closest(".wdform-field").find(".wdform-label").text();
   
             switch(elementtype){
               case 'select-one':
                 if(jQuery('#'+elementid).parents().eq(3).hasClass('wdform_date_fields')){
                   if(jQuery('#'+elementid).hasClass('sel-ed')) {
                     if (elementid.indexOf("day") !=-1) {
                       dia_log += elementlabel + ' Day: ' + elementval + '<br/>';
                     }
                     else if (elementid.indexOf("month") !=-1) {
                       dia_log += elementlabel + ' Month: ' + elementval + '<br/>';
                     }
                     else if (elementid.indexOf("year") !=-1) {
                       dia_log += elementlabel + ' Year: ' + elementval + '<br/>';
                     }
                   }
                 }
                 else if(jQuery('#'+elementid).hasClass('sel-ed')) {
                   if (elementid.indexOf("country") !=-1) {
                     dia_log += 'Country: ' + elementval + '<br/>';
                   }
                   else {
                     dia_log += elementlabel + ' ' + elementval + '<br/>';
                   }
                 }
                 break;
               case 'radio':
               if( allelements[i].checked)
                 dia_log += elementlabel + ' ' + elementval + '<br/>';
                 break;
               case 'checkbox':
               if( allelements[i].checked)
                 dia_log += elementlabel + ': ' + elementval + '<br/>';
                 break;
               case 'undefined':
               case 'hidden':
               case 'fieldset':
               case 'button':
                 break;
               default:
                 if(jQuery('#'+elementid).parents().eq(2).hasClass('wdform_address') && jQuery('#'+elementid).val()){
                   if (elementid.indexOf("street1") !=-1) {
                     dia_log += '<strong>' + elementlabel + '</strong><br/>';
                   }
                   dia_log += jQuery('#'+elementid).next('label').text() + ': ' + elementval + '<br/>';
                 }
                 else if(jQuery('#'+elementid).hasClass('input_active')) {
                   dia_log += elementlabel + ' ' + elementval + '<br/>';
                 }
                 break;
               }
   
           }
   
          //popup
          alert('Please Confirm Your Information is correct.\n\n' + dia_log);
          //Use the jQuery Modal plugin
          //jQuery.modal('<strong>Please Confirm Your Information is correct.</strong><br/>' + dia_log);
   
       }
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Form preview before submit’ is closed to new replies.

 * ![](https://ps.w.org/form-maker/assets/icon-256x256.png?rev=2068681)
 * [Form Maker by 10Web - Mobile-Friendly Drag & Drop Contact Form Builder](https://wordpress.org/plugins/form-maker/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/form-maker/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/form-maker/)
 * [Active Topics](https://wordpress.org/support/plugin/form-maker/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/form-maker/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/form-maker/reviews/)

 * 3 replies
 * 3 participants
 * Last reply from: [ChristianEllsworth](https://wordpress.org/support/users/christianellsworth/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/form-preview-before-submit/#post-6096479)
 * Status: resolved