How to fix a form where show/hide actions are affecting all inputs instead of individual ones? Answered

March 23, 2025 09:57
14 comments

Hey everyone! How do I configure a form with multiple Show/Hide elements? I'm following this guide https://www.memberstack.com/scripts/45-show-hide-password, but if I have multiple inputs in my form, it will show/hide for all of them instead of controlling individual ones

Comments

14 comments

A J

March 23, 2025 09:58

Hey Morten Bruun, I was testing this use-case in a dummy site and I came up with a modification to the script which will enable you to have multiple password inputs in the same form and the show/hide will only work for the clicked input. You can replace the memberscript in the custom code with the following:

<!-- 💙 MEMBERSCRIPT #45 v0.2 💙 SHOW AND HIDE PASSWORD -->
 <script> 
document.querySelectorAll("[ms-code-
password='transform']").forEach(function(button) { 
button.addEventListener("click", transform); 
}); 

var isPassword = true; 

function transform() { 
var button = this; 

var passwordInputs = document.querySelectorAll("
[data-ms-member='password'], [data-ms-member='new-password'], [data-ms-member='current-password']"); 

passwordInputs.forEach(function(myInput) { 
if (myInput.closest('.text-field-wrapper') === button.closest('.text-field-wrapper')) { 
if (isPassword) { 
myInput.setAttribute("type", "text"); 
} else { 
myInput.setAttribute("type", "password"); 
} 
} 
}); 

isPassword = !isPassword; 
} 
</script>

I cloned the memberscript project, so I had a div container with the class text-field-wrapper in which both the password input field and the show/hide div resided. In case you have some other container with a different class, feel free to modify that for the site.

After implementing this, I got the output as shown in the screenshot below. Hope this helps.

Morten Bruun
- March 23, 2025 10:02
This is super helpful, thank you so much 🙏

Also, I've set up the form without the show/hide functionality for now, but I'm only getting the input from the first input field - all the form input fields have been configured using this guide: https://docs.memberstack.com/hc/en-us/articles/7389502579355-Custom-Fields-Inputs 😞

0
A J
- March 23, 2025 10:06
Hey Morten Bruun, do you mean to say the inputs in other form fields are not stored in the custom field in Memberstack dashboard but the first field is updated accurately?

0
Morten Bruun
- March 23, 2025 10:06
Exactly

This is what I'm seeing when I'm configuring the form

The second screenshot shows you what I'm seeing inside memberstack, where I've filled in all input fields, but only 'company-name' actually shows us

0
A J
- March 23, 2025 10:53
Can you double-check if the values in 'data-ms-member' for other fields matches with the ID of the custom field in memberstack dashboard as well?

You could just click on the copy icon of the ID field shown in first screenshot and paste it in the custom attribute value field for the other fields just to ensure that the ID is infact an exact match. You can test it after doing so and publishing the site.

If it still does not work, you can share the site where the form resides, so that I can test it from my end as well.

0
Morten Bruun
- March 23, 2025 10:55
No luck - still doesn't work

Here's a link to the form: https://flashdocs.webflow.io/integrations/looker/step-1

The input with the errors is in step 2

0
A J
- March 23, 2025 10:56
Are you using multi-step form in the step-2?

i.e. is there a step 3 after filling this form?

If not, could you remove the multi-step form attributes and script, I can see some error due to that, not sure if that's interfering with the form submission.

If you want to have multi-step form, could you ensure you have setup all necessary attributes like multi-step, step etc.?

Are you using TryFormly for this or do you want to just have the connect between two forms essentially having a step-by-step format.

I can see few attributes from tryformly in step-2 page specifically where there is a custom script being loaded <script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/multi-step.js"></script> and few attribute like data-form="progress-indicator" is being used. This is leading to an error since not all attributes are setup for each step.

In case, you don't want to use TryFormly, its safe to remove the script and such remaining attributes, as a best practice, since half-way implementation is leading to an error.

0
Morten Bruun
- March 23, 2025 10:59
It is a multi step form in the sense that there is a step 1 before step 2. Step 3 is just a landing page

Gotcha, that's from an old implementation, so I'm just removing them now but still doesn't work 😞

A J have you had a chance to test it out?

Here's the read-only-link of the site: https://preview.webflow.com/preview/flashdocs?utm_medium=preview_link&utm_source=desig[…]s&preview=bc5d96e03621a7ec7c42f235fab66606&workflow=preview

0
A J
- March 23, 2025 11:01
Morten Bruun, I am looking into the site to understand why this is happening, since it is indeed weird that one field gets updated and others do not despite of having correct IDs.

Also can you update some of the custom field of AJ Test user via Memberstack dashboard, so that I can see if it populates on the site from my end?

I can only see these set of custom fields on the front-end. Are you sure you have those other fields in the same app in Memberstack dashboard that you have linked with the site via script?

0
Morten Bruun
- March 23, 2025 11:26
Hm, that's weird

Only have one Memberstack user, so I can't see how that could be happening?

I don't see any AJ test user?

0
A J
- March 23, 2025 11:27
There should be a new sign up on test mode named 'AJ Dev'. Do you see such member in the member list?

Can you update any value in the AJ test user for fields like looker dashboard, looker url etc. via Memberstack dashboard?

0
Morten Bruun
- March 23, 2025 11:28
Nope

But I think you might have completed the form on the stagging server? Here's the production site: https://www.flashdocs.ai/integrations/looker/step-1

Just got the signup now - thx

Jep, Looker URL is updating fine

0
A J
- March 23, 2025 11:30
I can see now that embed secret and client secret fields are also getting updated. Did you make any change in the meantime?

If you just added those now, can you add the rest of the fields freshly and test it out?

0
Morten Bruun
- March 23, 2025 11:31
Cool, that did the trick - works now 🆗

Thanks for your help!

0

Please sign in to leave a comment.