How to handle multipart form submissions with MAKE webhooks and display responses asynchronously without page redirects? Answered

• 

  A J

  • December 04, 2024 00:53

  Hey Matej Svoboda, I tested this implementation with checkboxes and with tweaks in the code and setup via attributes, I was able to get checkbox info on make webhook as well.

  To give you an idea about the implementation, I am writing few steps here:

  1. I added checkbox fields and added ms-checkbox-item="VALUE" where value can be anything via which I can differentiate the selections to each checkbox button
  2. I added few lines of code to the AI image gen memberscript in </body> section:

  const checkboxes = document.querySelectorAll('[ms-checkbox-item]'); 
  const checkboxValues = []; 
  
  for (const checkbox of checkboxes) { 
  if (checkbox.checked) { 
  const value = checkbox.getAttribute('ms-checkbox-item'); 
  checkboxValues.push(value) 
  } 
  }

  And I modified the Webhook POST section to the following:

  fetch('YOUR_HOOK_URL', { 
  method: 'POST', 
  headers: { 
  'Content-Type': 'application/json', 
  }, 
  body: JSON.stringify({ prompt: promptValue, 
  checkboxSelected: checkboxValues}), 
  
  })

   

  For clarity, I have also highlighted the placement of the above in the code section via screenshot #1.

   

  With this, I was able to see results in the hook as required (shared screenshots for how it looks as well)

   

  You can follow similar approach for any type of inputs that you are aiming to add. I haven't been able to test file inputs since I don't have the necessary plan on my workspace to add those, but feel free to tinker and see what works for you.

   

  Hope this helps.

  
  0
• 

  Matej Svoboda

  • December 04, 2024 01:00

  Hi again, I try to send a form data via webhook to MAKE. I use https://app.memberstack.com/apps/app_clwboqh7u001f0sx6eryx4lg4/editor. It works ok if I send only 1 filled form i.e. the original. When I click on add ROW, it creates additional 2 fields that I am unsuccessfully trying to guess their ID (script screenshot) and send via webhook. It should work, that users are going to click on add row, fill as many of new input fields they like and then when they press save. All of these input needs to be send via webhook to make. As I mentioned it sends only the original one (as it has defined ID from beginning I guess) - second screenshot shows that. I will appriciate helperino.

  

  0
• 

  A J

  • December 04, 2024 01:02

  Hey Matej Svoboda, it's me again 🙈 🕺

  I tested this add a row functionality with the existing setup that I shared with you for checkbox use-case.

  I added the following lines of code to the AI generator code in the </body> section:

  const platformValues = []; 
  document.querySelectorAll('[ms-code-row-input="original"], [ms-code-row-input="new-input"]').forEach(function(input) { 
  const value = input.value.trim(); 
  if (value) { 
  platformValues.push(value); 
  } 
  });

  I tweaked the POST call code to the following:

  fetch('https://hook.eu1.make.com/', { 
  method: 'POST', 
  headers: { 
  'Content-Type': 'application/json', 
  }, 
  body: JSON.stringify({ prompt: promptValue, 
  checkboxSelected: checkboxValues, 
  platforms: platformValues }), 
  
  })

   

  I have highlighted the placement of the above code via screenshot #1 as well.

   

  With this when I test the setup, I am able to get multiple platform inputs as added (shown in screenshots as to how it looks). Hope this helps.

   

  
  0

Please sign in to leave a comment.