How to display previous text input values using only JSON, similar to custom fields?

April 06, 2025 14:32

Hey Karolis Vaiginis, yes I believe it should be possible via modifying this memberscript a bit. For example, in this case, you could replace the #5 code with the following:

<!-- 💙 MEMBERSCRIPT #5 v0.1 💙 FILL TEXT BASED ON SIMPLE ITEM IN JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const memberstack = window.$memberstackDom;

  // Function to fill text elements with attribute ms-code-fill-text
  const fillTextElements = async function() {
    // Retrieve the current member JSON data
    const member = await memberstack.getMemberJSON();

    // Fill text elements with attribute ms-code-fill-text
    const textElements = document.querySelectorAll('[ms-code-fill-text]');
    textElements.forEach(element => {
      const jsonKey = element.getAttribute('ms-code-fill-text');
      const jsonValue = member.data && member.data[jsonKey] ? member.data[jsonKey] : '';
      element.value = jsonValue;
    });
  };

  // Function to handle script #4 event
  const handleScript4Event = async function() {
    // Add a delay of 500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    await fillTextElements();
  };

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", handleScript4Event);
  });

  // Call fillTextElements function on initial page load
  fillTextElements();
});
</script>

And make sure you have the necessary attributes on the input fields that you want the json value to populate in. You can give test this out by cloning and making some modifications via this cloneable. I tested it out in a dummy site and it worked. Hope this helps.

0

Karolis Vaiginis

April 06, 2025 14:33

ohh, thanks!

Also, I have one more question

I have a group named DNA1 and I want to collect information to it from a couple of different forms in the same page. What I noticed is that it collects the information from one form, but then it ignores another form

what should I do to collect information in one group from a couple of different forms that are in the same page?

0

A J

April 06, 2025 14:34

Hmm I was testing this use-case via this memberscript in a dummy site by having multiple forms for adding groups in JSON and it seems to work fine and stores all information in the group 'project' in my case.

Can you double-check if all the form inputs and elements have relevant custom attributes required by the memberscript you are using to push to the Member JSON?

0

Karolis Vaiginis

April 06, 2025 14:36

thanks. here are some looms for you to understand my problems better

https://www.loom.com/share/9747baf6d9374a61a40c9cdc928db108?sid=a510e57f-5922-47ed-992c-49d22b55900b

https://www.loom.com/share/3ee17195bc414e0cbd21b09e93ed1ec1?sid=863ebe9f-97dd-4f6f-b0da-cc7a699c3e63

0

A J

April 06, 2025 14:37

Hey Karolis Vaiginis, for the use-case you shared in the second loom, I had suggested a modified version of another memberscript and not the one you showed in loom. Linking the custom code here, for better access. Hope that helps.

And regarding the first use-case, could you share a read-only link of the page where you have both the forms updating the JSON?

0

Karolis Vaiginis

April 06, 2025 14:39

sure! https://preview.webflow.com/preview/monkeflow2?utm_medium=preview_link&utm_source=desi[…]&pageId=677d3905894e2e4855cbe547&locale=en&workflow=preview

how does it look?

Also, I tried the your answer to the second question, and it doesn't really work...:((( I think that its because my word is in the group

maybe its possible to make a call or sth?

0

A J

April 06, 2025 14:41

Karolis Vaiginis, I tested your first use-case (updating a json group with different forms) in a dummy site and it worked perfectly as required. So I gave a deeper look at your site and found that there is a typo in the second form where you have to set the attribute as ms-code-json-name. I have highlighted the attribute in the screenshot as well. Please edit the attribute and publish the site and test your first use-case out. Let me know if it solves the issue.

And for the second use-case. Since your use-case is of a group, I have further modified the #5 memberscript to adapt to it.

I have tested it out with a dummy site and it works accurately.

You can replace the #5 code with the following:

<!-- 💙 MEMBERSCRIPT #5 v0.1 💙 FILL TEXT BASED ON SIMPLE ITEM IN JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const memberstack = window.$memberstackDom;

  // Function to fill text elements with attribute ms-code-fill-text
  const fillTextElements = async function() {
    // Retrieve the current member JSON data
    const member = await memberstack.getMemberJSON();
    console.log(member);
    // Fill text elements with attribute ms-code-fill-text
    const textElements = document.querySelectorAll('[ms-code-fill-text]');
    textElements.forEach(element => {
      const jsonKey = element.getAttribute('ms-code-fill-text');
      const jsonValue = member.data && member.data['DNA1'][jsonKey] ? member.data['DNA1'][jsonKey] : '';
      console.log(jsonValue);
      element.value = jsonValue;
    });
  };

  // Function to handle script #4 event
  const handleScript4Event = async function() {
    // Add a delay of 500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    await fillTextElements();
  };

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", handleScript4Event);
  });

  // Call fillTextElements function on initial page load
  fillTextElements();
});
</script>

Let me know if this solves your second use-case as well.

0

Karolis Vaiginis

April 06, 2025 14:43

yes, the first use case worked!
The second worked great as well!

what if I have two different groups, but both of them collect the same info inside. For example DNA1 group collects "audience" and DNA2 group collects "audience"

I just tried putting second group on the little form, and tried calling out "audience" (from the second group), but it gave me of whats written in the first one.

Is it possible to fix this?

I'm sorry for these random quests:D but its really important for me

I should probably just give a different name

it will be easier

0

A J

April 06, 2025 14:44

In that case, you could loop through the list names and then loop through each text element via the script. Currently the code works for DNA1, if you want to add-on to it, you can modify the code accordingly.

0

Karolis Vaiginis

April 06, 2025 14:45

true thanks, no more questions from me today

you are the best:)!

0

How to display previous text input values using only JSON, similar to custom fields? Answered

Comments