Hiding an Element Based on Database Data

Ask the community
,
1

Hi,

I am trying to hide elements based on a text box’s text.

Right now, I have the text box defaulted to “No Alerts” when there is no data coming in from the database. When it says “No Alerts” i need 3 other text boxes to hide. When there is data coming in, I need them to show as they show data from the database as well.

Here is my code:

$w.onReady( function () {

if ($w(‘#text3’).text ===“NO ALERTS!”); {
$w(‘#text4’).hide();
$w(‘#text5’).hide();
$w(‘#text6’).hide();
}
});

*NOTE: This is a weather website trying to display weather alerts.

2518×1310 159 KB

2

Couple things you can try out — (1) Instead of having ”No Alerts” in a text box make it an input field and make the borders and background transparent. Then do $(‘#input’).value === “No Alert” …

(2) Add an else statement following your if statement. Anything that is not “No Alert” should have your elements shown.

3

Thanks! I tried it. I think it’s going to work, however, I’m getting an error with my code…

if ($w(‘#input1’).inputType === “”); {
$w(‘#text4’).hide();
$w(‘#text5’).hide();
$w(‘#text6’).hide();
}

else {
$w(‘#text4’).show();
$w(‘#text5’).show();
$w(‘#text6’).show();

            }

}
});

It gives me an error right at the else statement.

Also, the input isn’t transparent. I even set it to be transparent…

Thanks in advance!

2868×1574 199 KB

4

Try putting a space between else and bracket. If that doesnt work then send a screenshot of your code. Also, setting your input to white isn’t transparent. Make sure the background is set to 0% opacity

5

The space didn’t work… My background opacity is set at 0%

Code:

$w.onReady( function () {

if ($w(‘#input1’).inputType === “”); {
$w(‘#text4’).hide();
$w(‘#text5’).hide();
$w(‘#text6’).hide();
}

else {
$w(‘#text4’).show();
$w(‘#text5’).show();
$w(‘#text6’).show();

            }

}
});

6

($w(‘#input’).value === “No Alerts”);

7

What I would do: CUT the code. Then start typing it when the menu pops up select “if else” statement and then paste the code outside the if else code and insert the show/hide.

8

Ok I did that… So it shows a blank input on here but when the site is live, it’s white??

2868×1574 283 KB

9

Make sure the input opacity is 0% for all modes of the input field (Regular, Hover, Focus, Disabled, etc).

Also, I am not sure if you want No Alerts showing all the time, but you can easily do that my having it as the initial text/placeholder text.

10

That did the trick! Thank you so much for your help!

11

Looking for some more help now…

I need a checkbox, when checked, to insert text into a text box in a form.

12

Hey,

I’m trying to do something similar to this. On my site, users award themselves points using user input sliders. Once they get to a certain amount of points I’ve used an ‘if’ statement in the backend to generate a badge name in the user database … it looks like this …

if (item.sum <= 250 ) { item.badge = “Brand New BADGE” ;}
if (item.sum > 250 ) { item.badge = “Beginner BADGE” ;}

This works and I can then display the Badge Name on the users account page.

What I’d then like to do is the same as is talked about in this thread, for example, if they are a Beginner BADGE, the Beginner BADGE (a hidden vector Image) un-hides. This is what I have …

$w.onReady( function () {

if ($w( ‘#input1’ ).inputType === “Beginner BADGE” ); {$w( ‘#vectorImage58’ ).show();}

}
);

it doesn’t work, any ideas or help would be massively appreciated.

Cheers,
Andy