ITTT Conditional Form Help

Ask the community
,
1

Help??? I’m brand new to coding but I learn pretty fast. I want site visitors to complete a form for their side hustle businesses. I want owners to only have to input the url links to platforms where they have pages (eg some may have Pinterest and Facebook while others have Facebook and Instagram shops). To further explain, I then want to display the information in a repeater, but only showcasing the icons for platforms which they submitted urls for. I was thinking this would need to be done using reference fields and coding but perhaps I’m overthinking it. Any help would be much appreciated!!!

2

Hi @lindseyw :raised_hand_with_fingers_splayed:

I don’t think you have any problem with the form submission, so I assume that you’re asking for help on showing these icons.

OK, so to prepare the layout, add 4 or 5 white images side by side, and set their hidden property to true, give them a unique but continues IDs like this: (social 1 , social 2 , etc…), then write this code.

// Inside the repeater's on Item ready function.
let index = 0; // The number of active social icons.
const totalIcons = 4; // The total icons you have in your layout.

// Now check each platform
if (data.facebook) {
    index++;
    const id = `#social${index}`;
    $w(id).src = "https://....."; // The URL of facebook icon
    $w(id).link = data.facebook;
    $w(id).show(); // Show the icon
}

if (data.instagram) {
    index++;
    const id = `#social${index}`;
    $w(id).src = "https://....."; // The URL of instagram icon
    $w(id).link = data.instagram;
    $w(id).show(); // Show the icon
}

// And so on ......

Hope this helps~!
Happy Coding
Ahmad

3

Thanks so much for the quick response Ahmad!!! I’m just now sitting down and able to take a crack at it. I’ll let you know what happens!!!

4

@ahmadnasriya so, I tried to add the code like you suggested, however, it’s not working, and I’m pretty sure I messed up somewhere, or didn’t understand something I was supposed to change. I only started with 2 icons to test it as opposed to 4. This is what I have:

934×441 18.9 KB

Any help you could give me would be much appreciated! And I promise to attempt this sooner next time. Thanks in advance!!!

5

@lindseyw You said you want to display the icons in a repeater, so I assumed that you’ll know where to put this code, it needs to be inside the repeater’s onItemReady( ) function.

$w('#repeater').onItemReady(($item, data) => {
    // Place my code here ...
})

You just need to change the selectors in my answer from $w to $item.

6

Thanks for answering me back on something so basic. I knew I was missing something! I’m so new to coding. I just discovered the coding class wix offers, so I’m definitely planning on going through that. Thank you again!!

7

@ahmadnasriya IT WORKED!!! THANK YOU THANK YOU THANK YOU!!!

8

@lindseyw Glad that it worked for you :wink: Happy coding