Setting value of radio inputs via button

Home Forums Quform WordPress Setting value of radio inputs via button

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Ally 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #29999

    adg_domme
    Participant

    Hey there,

    I have several buttons on my website and quform running in popup mode. Depending on the button clicked, I want quform to be opened (already works) and the value of a radio group to be preselected.

    This is the JavaScript I got so far:

    jQuery(document).ready(function ($) {
        $('a[href="#anfrage"]').click(function () {
            var buttonText = $(this).text();
    
            if (buttonText == 'Einzelgarage') {
                $('.quform-field-1_7_1').val('Einzelgarage');
            } else if (buttonText == 'Doppelgarage') {
                $('.quform-field-1_7_2').val('Doppelgarage');
            } else if (buttonText == 'Großraumgarage') {
                $('.quform-field-1_7_3').val('Großraumgarage');
            } else if (buttonText == 'Reihengarage') {
                $('.quform-field-1_7_4').val('Reihengarage');
            }
    
            $('.quform-popup-link-1').click();
            return false;
        });
    });

    … where “quform-field-1_7_X” are the radio inputs of the radio group. I already tried to use the “quform_1_7” (unique ID of the radio group) but that’s also not working. I noticed that there is no ID such as “quform_1_7” because the plugin adds another (dynamic) ID like “quform_1_7_7de123”.

    It would also be nice if the form would completely reset on button click and advance to the second page/step of the form, since I’m trying to have a preselection for the first page/step and configured the radio group to advance to the next step directly on click.

    Please help! 🙂

    #30013

    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.

    #30015

    adg_domme
    Participant

    Hi Ally,

    thank you for helping me understand some things better. 🙂

    I finally ended up using the click() function on the radio buttons instead of the checked property, since I configured the radio buttons to advance to the next step on click.

    Thanks again for your help!

    #30016

    adg_domme
    Participant

    One follow up question: Is it possible to navigate to a certain step of the form via JavaScript?

    #30021

    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.

    #30022

    adg_domme
    Participant

    Hi Alley,

    thank you so much.

    I’m going to share the code I’ve used:

    jQuery(document).ready(function ($) {
        $('a[href="#anfrage"]').click(function () {
            var buttonText = $(this).text();
            if (buttonText == 'Einzelgarage') {
                $('.quform-popup-link-1').click();
                $('.quform-field-1_7_1').prop('checked', true);
                $('.quform-form-1').data('quform').goToPage(8);
            } else if (buttonText == 'Doppelgarage') {
                $('.quform-popup-link-1').click();
                $('.quform-field-1_7_2').prop('checked', true);
                $('.quform-form-1').data('quform').goToPage(8);
            } else if (buttonText == 'Großraumgarage') {
                $('.quform-popup-link-1').click();
                $('.quform-field-1_7_3').prop('checked', true);
                $('.quform-form-1').data('quform').goToPage(8);
            } else if (buttonText == 'Reihengarage') {
                $('.quform-popup-link-1').click();
                $('.quform-field-1_7_4').prop('checked', true);
                $('.quform-form-1').data('quform').goToPage(8);
            } else {
                $('.quform-popup-link-1').click();
            }
            return false;
        });
    });

    What this does: I have several anchor links (#anfrage) that open quform in a popup by default. If any of the given strings (text of the link/button) is matched, the code checks the corresponding radio button and advances to the next step of the form. If the user has progressed further and reopens the form through a matching link, the first radio button will be updated if necessary and the form “begins” at the next step again (second step in this case), but the user can still see the selection he/she made for the upcoming steps.

    Exactly what I wanted. I think this case can be considered solved. 🙂

    #30026

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Be inspired. © 2019 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy