Display data from a field on a previous page

[MOVOX]

I have created a multi-page form and would like to display a summary of the data entered on a confirmation page before the form is submitted.

The summary data needs to be obtained from text fields, multi-select drop-down fields and radio buttons located on certain pages throughout the form. The radio button fields trigger an image based on the selection.

I have searched your forums but can’t find anything specific to my requirements. I did try the instructions form this topic: https://support.themecatcher.net/forums/topic/copying-data-from-a-field-to-another-same-form but that didn’t work and it also prevented conditional logic from working.

Hoping you can help with this.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Hi Ally,

I have followed the instructions in the “Adding a form data preview page” guide.

For my requirements the code works OK for displaying the content of text fields. However, my form has radio buttons which include an image URL in the radio button option settings selected and unselected fields.

The suggested code for radio buttons is displaying the selected radio button value but it is not displaying the image related to the radio button selection.

Is there a fix to display the radio button image?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

• This reply was modified 1 year, 10 months ago by Ally.
• This reply was modified 1 year, 10 months ago by Ally.

[MOVOX]

Hi Ally,

Yes, this makes sense. I have updated the unique ID’s and image URL’s in my code as per your instructions and the radio button image is displayed.

However, then radio button label is now missing. I tried using the code below but this didn’t work.

if (url) {
$(‘#stage-value’).html($(‘‘).attr(‘src’, url));
} else {
$(‘#stage-value’).html(”).text($(this).closest(‘.quform-option’).find(‘.quform-option-text’).text());
}
});
});

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Hi Ally,

I’ve added a new tag in the HTML element and changed the code as suggested. The image is displaying OK but the Label isn’t displayed.

The HTML looks like:

<span id=”stage-value”></span>
<span id=”stage-value-text”></span>

And the JS code looks like (please note that I’ve used a false URL for the image.):

$(‘.quform-field-10_167’).click(function() {
var value = $(this).val(),
url;

if (value === ‘Option 1’) {
url = ‘https://abc.com/wp-content/uploads/2019/04/concept_000044.png&#8217;;
} else if (value === ‘Option 2’) {
url = ‘https://abc.com/wp-content/uploads/2019/04/startup_000044-1.png&#8217;;
} else if (value === ‘Option 3’) {
url = ‘https://abc.com/wp-content/uploads/2019/04/growth_000044.png&#8217;;
} else if (value === ‘Option 4’) {
url = ‘https://abc.com/wp-content/uploads/2019/04/presentation_000044.png&#8217;;
} else if (value === ‘Option 5’) {
url = ‘https://abc.com/wp-content/uploads/2019/04/expand_000044.png&#8217;;
}

if (url) {
$(‘#stage-value’).html($(‘‘).attr(‘src’, url));
} else {
$(‘#stage-value’).html(”);
}

$(‘#stage-value-text’).text($(this).closest(‘.quform-option’).find(‘.quform-option-text’).text());
});
});

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Hi Ally,

I’m not sure that your response is the cause of the problem… In the radio button section of the form where the value is selected both the icon and the label are being displayed in a box which is 120px x 120px. The label is displayed over the image as I have applied the following CSS in Radio button element settings:

width: 120px;
height: 120px;
border: 1px solid #00ccff;
background-position: centre centre;
border-radius: 4px;
background-repeat: no-repeat;
background-color: #ffffff;
text-align: center;
font-size: 9pt;
line-height: 32pt;
color: #000044;
padding-top: 80px;

In the field where the values are to be displayed the box is 75px x 75px and I have applied the following CSS to the Outer Wrapper. I have also increased and decreased the top padding and line height several times to see if the text or part of the text would appear, but it doesn’t.

width: 75px;
height: 75px;
border: 1px solid #00ccff;
background-position: centre centre;
border-radius: 4px;
background-repeat: no-repeat;
background-color: #ffffff;
padding-top: 0px;
text-align: center;
font-size: 8pt;
line-height: 25px;
color: #000044;

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

• This reply was modified 1 year, 10 months ago by Ally.

[MOVOX]

Thanks Ally,

Your instructions and the video explains this clearly. You can close this ticket now.

[Author]

Posts