Form preview before submit

Resolved kodiacc
(@kodiacc)

11 years ago

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/

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

Plugin Contributor

webdorado

(@webdorado)

11 years ago

Dear user,

Unfortunately that’s not possible to achieve.Thank you for your interest.

ChristianEllsworth

(@christianellsworth)

11 years ago

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

(@christianellsworth)

11 years ago

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.