Custom code to hide new forms after form submission Answered

• 

  Jayess

  • May 25, 2023 11:53

  Hello Alican 👋🏼

  Great question! The easiest no-code way I can think of is when they submit a form they change to another “free plan” so as they upgrade any content from the last membership automatically hides. To add the item’s ID you could create a profile form to add the item’s ID.

  You could also try and use Webflow’s filter function

  However I’m not really sure if that’s a good solution for you depending on your needs. Can you share a little more information and use-case for your users?

  0
• 

  Alican Avcuoğlu

  • May 25, 2023 11:53

  Unfortunately, this situation probably requires code. My users apply for jobs, and by adding the job they applied to their metadata, I should prevent them from applying a second time for the same job. I should also show the jobs they have applied for on their profile. I had custom code on MS 1.0 that did this. Code basically worked like this, it checked if the item’s ID in member’s metadata. If it was in metadata it hid the applying form. If not it showed the form and once it was submitted it was then added to metadata.

  0
• 

  Jayess

  • May 25, 2023 11:53

  ah okay, if you already have code for this in 1.0, we have an article here that you could guide you in converting your code to 2.0 🎊

  0
• 

  Alican Avcuoğlu

  • May 25, 2023 11:58

  I kinda need some help on the code. This is the code I came up but it doesn’t work as I wanted it to work. I manually added applied metadata in Memberstack as “applied: 12”, and console.log(metadata) shows as {applied: '12', fileNames: Array(0)}. It’s not in fileNames though. Also submitting a form doesn’t add anything to metadata. I don’t know what I’m doing wrong. If you want I can provide the older code for 1.0.
  Thank you in advance. 🙏

  const memberstack = window.$memberstackDom;
  
  memberstack.getCurrentMember().then(async ({ data: member }) => {
  if (member) {
  let metadata = member.metaData;
  
  // If no metadata exists, create it in Memberstack.
  metadata.fileNames = metadata.fileNames || [];
  
  console.log(metadata);
  console.log(metadata.fileNames);
  
  const itemID = {{Webflow Item ID}};
  
  // If they have the item ID in their profile, hide the form, show the 'completed button'
  if (metadata.fileNames.includes(itemID)) {
    document.getElementById("job-application-form").style.display = "none";
    document.getElementById("job-applied").style.display = "flex";
  }
  
  // When the button is clicked, if the itemID doesn't exist on their profile add it, then push the metadata to MemberStack.
  $("#job-application-form").click(function () {
    if (metadata.fileNames.indexOf(itemID) === -1) {
      metadata.fileNames.push(itemID);
    }
  });
  
  await memberstack.updateMember({
    metaData: {
      applied: metadata
    }
  });
  
  
  }
  });

  0
• 

  Marc Hudson

  • May 25, 2023 11:58

  Hopefully this works for you. (It’s untested but it’s based on working code).

  Here’s some helper functions for the “Footer code” region in settings (will be available site-wide on all pages):

  // Check whether Object key exists
  function checkKeyExists(obj, key) {
  return typeof obj === "object" && key in obj;
  }
  
  // get Member's JSON then fire callback function.
  function getMemberJSON(callback) {
  window.$memberstackDom.getMemberJSON().then(({ data: memberJSON }) => {
  if (!!callback) {
  var output = memberJSON || {};
  callback(output);
  }
  });
  }
  
  // update Member's JSON.
  function updateMemberJSON(json, callback) {
  window.$memberstackDom.updateMemberJSON({ json: json }).then(({ data: memberJSON }) => {
  if (!!callback) {
  var output = memberJSON || {};
  callback(output);
  }
  });
  }

  And the page code:

  // Doc ready.
  Webflow.push(function(){
  
  // Get and update JSON.
  getMemberJSON(function(memberJSON){
  if (!checkKeyExists(memberJSON, 'fileNames')){
  // If no metadata exists, create it in Memberstack.
  memberJSON.fileNames = [];
  }
  
  const itemID = {{Webflow Item ID}};
  
  // If they have the item ID in their profile, hide the form, show the 'completed button'
  if ($.inArray(itemID, memberJSON.fileNames) > -1){
    $("#job-application-form").hide();
    $("#job-applied").css('display', 'flex');
  }
  
  // ID should be on the <form> element, not the wrapper DIV.
  $("#job-application-form").on('submit.updateJSON', function(e){
    // prevent form from submitting.
    e.preventDefault();
  
    var form = $(this);
  
    if (memberJSON.fileNames.indexOf(itemID) < 0){
      // update JSON.
      memberJSON.fileNames.push(itemID);
  
      updateMemberJSON(memberJSON, function(memberJSON){
        console.log('Response:', memberJSON);
  
        // remove the custom submit handler and re-submit the form.
        $(form).off('submit.updateJSON').submit();
      });
    }
    else {
      alert("itemID already exists");
    }
  });
  
  
  });
  
  });

  I recommend storing things like Arrays in a Member’s JSON and not in Metadata.

  Hopefully this works first try but there might be a slight oversight. Let me know how you go.

  0
• 

  Alican Avcuoğlu

  • May 25, 2023 11:58

  Unfortunately it didn’t work

  0
• 

  Marc Hudson

  • May 25, 2023 11:58

  Hmm, I just tested it and it worked for me, I just changed the itemID variable to const itemID = 1234; while I test it. Maybe try that. What does your browser’s console say?

  0
• 

  Alican Avcuoğlu

  • May 25, 2023 11:58

  Ha! That worked out great. Thank you so much

  0
• 

  Nicolas Scott

  • May 25, 2023 11:58

  If anyone else lands here, quick reminder:
  You can no longer update metadata from the front end anymore. We removed that ability a couple months ago for security.

  Also Marc is correct that storing arrays of data is best used in member JSON. 👌

  0
• 

  Marc Hudson

  • May 25, 2023 11:58

  No worries

  0

Please sign in to leave a comment.