Disable the button if the linked field has no value

Discussion Ask a question
,
1

I am using an image as a button within one of my dynamic pages. The image links to a field in the database that has urls. This field is optional for imput though. I wanted to grey out the image if there was no value. My other thought was color the image if there was a value. Either way if someone has a solution for this please let me know.

2

Hi Elizabeth!

My suggestion is that you put the ‘no-value’ picture that you want as a default picture in the component and as long as the $w(‘#image’).src isn’t changing thats what the user will see.
When the .src would change the image will too.

Hope it helps!
Best of luck!
Doron. :slight_smile:

3

Doron,
Thanks for the response.
Can you give me an example in code? it is easier to visualize that way.

4

This is what I came up with:

$w.onReady( () => { $w(" #dynamicDataset “).onReady( () => {
if (‘businessWebsite’.value ===‘’) {
$w(” #web ").hide();
}

else {
$w(" #web “).show(); }
if (‘socialMediaUrl’ .value ===‘’) { $w(” #fbook “).hide();
}
else {
$w(” #fbook “).show();
}
if (‘instagramUrl’ .value === ‘’) {
$w(” #insta “).hide();
}
else {
$w(” #insta ").show();
}}
); } );

It is not working

5

Hi,
What elements are you referring in the “if” conditions?
You need to write “$w” before the element’s name, for example:

if ($w("#businessWebsite").value ==='') {   		
     $w("#web").hide();    	
}

Good luck :slight_smile:

6

Hi, those are the field ids that link to the value so $w wouldn’t be necessary here.

7

The $w is used to reference the string to an element in the page. Without the $w you created a new string named “businessWebsite”, it means you are trying to read its “.value” which doesn’t exist because it is a string not an element.

1 Like
8

Hi, so I tried adding the $w and I got unexpected token errors.

This is the code:

$w.onReady( () => { $w(“#dynamicDataset”).onReady( () => {
if $w(‘businessWebsite’.value ===‘’) {
$w(“#web”).hide();
}

else {
$w(“#web”).show(); }
if $w(‘socialMediaUrl’ .value ===‘’) {
$w(“#fbook”).hide();
}
else {
$w(“#fbook”).show();
}
if $w(‘instagramUrl’ .value === ‘’) {
$w(“#insta”).hide();
}
else {
$w(“#insta”).show();
}}
); } );

Please help

9

Hi Elizabeth.

I’ve noticed a few errors in your code.
First, in your if/else statements - all the phrase, including the “$w” of the selector should be in the parenthesis.
Second, all your selectors (including the ones in the if/else statements) should have the full syntax for reference - hence $w(“#yourSelector”).whateverYouWantToDo.

Other than that you just need to make sure that you use all the right object names and you should be fine.

Hope it helps.
Best of luck!

Doron. :slight_smile:

10

P.S.

Your code should look like this after the corrections:

$w.onReady(() => {
	$w("#dynamicDataset").onReady(() => {
		if ($w("#businessWebsite").value === '') {
			$w("#web").hide();
		} else {
			$w("#web").show();
		}
		if ($w("#socialMediaUrl").value === '') {
			$w("#fbook").hide();
		} else {
			$w("#fbook").show();
		}
		if ($w("#instagramUrl").value === '') {
			$w("#insta").hide();
		} else {
			$w("#insta").show();
		}
	});
});

Doron.

11

Doron,
It is saying that ($w(" #instagramUrl “), ($w(” #socialMediaUrl “), ($w(” #businessWebsite ") are not valid selectors. It might be because these are field ids in the database. Please help.

12

Can I get an answer for the error I am getting here.

13

Solved!
Just Putting this in the comments so that others have the code

$w.onReady( function ( ) {
$w(‘#dynamicDataset’).onReady ( ( ) => {
showStars();
});
});

function showStars () {
if ($w(‘#web’).link === “”)
$w(‘#web’).hide();
if ($w(‘#fbook’).link === “”)
$w(‘#fbook’).hide();
if ($w(‘#insta’).link === “”)
$w(‘#insta’).hide();
}

2 Likes