How to save radio button progress and show completed steps when users return to dashboard? Answered

• 

  Chukwudi Onyekwere

  • July 01, 2025 05:05

  Hi Mubassir,To achieve this, you would have to first create a custom field in Memberstack (in this example below, I called it 'selected-radio') to hold the progress, then update this progress each time the user completes a step. Afterwards, you can retrieve the radio button selection from the custom field in Memberstack.
  Here's how you can implement this:

  Implementation Steps

  1. Retrieve Member Data: Use the Memberstack API to get the current member's custom fields.
  2. Update Radio Button State: Set the radio button state based on the value retrieved from the custom field.
  3. Update Member Data: When the user selects a radio button, update the corresponding custom field in Memberstack.

  Here's a code snippet you'd have to place in the page to achieve your goal:

  <script>
  document.addEventListener("DOMContentLoaded", async function() {
      const memberstack = window.$memberstackDom;
  
      // Function to update radio button state based on custom field data
      function updateRadioButtonState(selectedValue) {
          const radios = document.querySelectorAll('input[type="radio"]');
          radios.forEach(radio => {
              if (radio.value === selectedValue) {
                  radio.checked = true;
                  radio.dispatchEvent(new Event('change')); // Trigger change event if needed
              }
          });
      }
  
      // Get current member data
      try {
          const member = await memberstack.getCurrentMember();
          if (member && member.customFields) {
              const selectedRadioValue = member.customFields['selected-radio']; // Replace with your custom field key
              if (selectedRadioValue) {
                  updateRadioButtonState(selectedRadioValue);
              }
          }
      } catch (error) {
          console.error('Error retrieving member data:', error);
      }
  
      // Add event listeners to radio buttons to update Memberstack data on change
      const radioButtons = document.querySelectorAll('input[type="radio"]');
      radioButtons.forEach(radio => {
          radio.addEventListener('change', async function() {
              const selectedValue = this.value;
  
              // Update Memberstack member data
              try {
                  await memberstack.updateMember({
                      customFields: {
                          'selected-radio': selectedValue // Replace with your custom field key
                      }
                  });
              } catch (error) {
                  console.error('Error updating member data:', error);
              }
          });
      });
  });
  </script>
  

  Explanation:

  1. Retrieve Member Data: The script retrieves the current member's data using `memberstack.getCurrentMember()`. It checks for the custom fields associated with the member.
  2. Update Radio Button State: If a value is found in the custom field (e.g., `'selected-radio'`), it updates the radio button state accordingly.
  3. Event Listeners: Each radio button has an event listener that updates the custom field in Memberstack whenever a selection is made.

  Notes:

  • Ensure that you replace `'selected-radio'` with the actual key of the custom field you are using in Memberstack to store the radio button selection.

  • Make sure the radio buttons have the same `name` attribute to function correctly as a group.
  0
• 

  Mubassir Shaikh

  • July 01, 2025 05:08

  Hi do you have any clonable or read only link?

  it would help me a lot to solve this

  0
• 

  A J

  • July 01, 2025 05:08

  Mubassir Shaikh, here's a cloneable which you can take inspiration from for the structure that you can follow and here's a cloneable from Memberstack which you can take design inspiration from. The latter is a bit more complex than your use-case, as the list is auto-checked based on the necessary actions being taken from the user, but both those cloneables should give you some ideas to customize. It's also best to use checkbox for such use-cases but if you want to use radio buttons, you can customize the cloneables further and follow the necessary steps as stated by Chukwudi above. Hope this helps.

  0
• 

  Mubassir Shaikh

  • July 01, 2025 05:09

  Thankyou so much brother

  0

Please sign in to leave a comment.