Display data from a field on a previous page

Home Forums Quform WordPress Display data from a field on a previous page

This topic is: not resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #34307
    MOVOX
    Participant

    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.

    #34308
    Ally
    Support Staff

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

    #34309
    MOVOX
    Participant

    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?

    #34315
    Ally
    Support Staff

    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 month ago by Ally.
    • This reply was modified 1 month ago by Ally.
    #34319
    MOVOX
    Participant

    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());
    }
    });
    });

    #34323
    Ally
    Support Staff

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

    #34326
    MOVOX
    Participant

    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());
    });
    });

    #34331
    Ally
    Support Staff

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

    #34351
    MOVOX
    Participant

    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;

    #34356
    Ally
    Support Staff

    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 3 weeks, 3 days ago by Ally.
    #34429
    MOVOX
    Participant

    Thanks Ally,

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy