Changing button text via check box

Ask the community
,
1

Hey,
I have a problem that I’m trying to get the text on a button to change when a checkbox is checked, the code works and disables the button if the dates have expired and the expected text displays, but the text seems to get mixed up with the previous function that has run when you check the other checkbox. i.e. the first picture is as expected, buttons disabled and the text shows on the disabled buttons.

1193×353 56.3 KB

But when you click the 2019 box, the button enable, but the previous text stays… I have adjusted the code about 5/6 different ways but can’t get it to stop doing this, any ideas??

1177×359 56 KB

Here is my code, I have only given the code for 2 buttons to keep the code easier to read.

$w.onReady(function () {
    currentYearButtonDisable();
for (let i = 1; i < 3; i++) {
        $w(`#checkbox${i}`).onChange(() => {
 const checkBoxes = ['checkbox1', 'checkbox2'];
 let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
            filtered.forEach((checkbox) => {
                $w(`#${checkbox}`).checked = false;
            });
 if ($w('#checkbox1').checked) {
            currentYearButtonDisable();
            }
 if ($w('#checkbox2').checked) {
            nextYearButtonDisable();
            }
        });
    }
});

function nextYearButtonDisable () {
 var itemDate = $w("#dynamicDataset").getCurrentItem();
 var DateOne= itemDate["dateOneYh"];
 var DateTwo= itemDate["dateTwoYh"];
 var currentDate= new Date();
 if (DateOne, DateTwo !== undefined) {
 if (DateOne<currentDate) { 
             $w("#bookhere1").disable();
             $w("#bookhere1").label = "Trip Expired"
        }
 else $w("#bookhere1").enable();
 if (DateTwo<currentDate) {
             $w("#bookhere2").disable();
             $w("#bookhere2").label = "Trip Expired"
        }
 else $w("#bookhere2").enable();
}

function currentYearButtonDisable () {
 var itemDate = $w("#dynamicDataset").getCurrentItem();
 var Date1= itemDate["dateone"];
 var Date2= itemDate["dateTwo"];
 var currentDate= new Date();
 if (Date1, Date2 !== undefined) {
 if (Date1<currentDate) {
             $w("#bookhere1").disable();
             $w("#bookhere1").label = "Trip Expired"
         }
 else $w("#bookhere1").enable();
 if (Date2<currentDate) {
             $w("#bookhere2").disable();
             $w("#bookhere2").label = "Trip Expired"
         }
 else $w("#bookhere2").enable();
}
2

Hello

Try storing the original text in a temp value and on the else statement when enabling the button set it’s text again to temp (or simply to the wanted text as applied previously).

Best
Massa

3

Hi Massa,

Thank you for your response. My coding has come a long way in the past year but it is usually joining pieces of code together then trail and error.
I have never done anything like you have mentioned above, would you be able to give me an example of some code?

Many thanks

Stephen

4

Anyone any ideas with this one?

5

Hello @stephenmccall

Did you try this:

 else {
     $w("#bookhere2").enable();
     $w("#bookhere2").label = "Book This Date"  
}

Massa

6

@massasalah18 I have tried every workaround I can think of but none of them work…

It works totally fine if you only ave the code for one set of buttons i.e. no checkbox to toggle the state. It’s not super important at the moment but it has been playing on my mind to work out why! I really appreciate your help :slight_smile:

Stephen

7

hello @stephenmccall

would you please provide me with your website url so i can go check the problem out.

Massa

8

@massasalah18 Hi,

Here is one of the URLs for the dynamic pages
https://www.scottishrockandwater.com/Courses/Scrambling/Advanced-Scrambling-Course

The code is setup just to disable the button currently, so no code for the .label

Thank you Stephen

9

Hello Stephen ,

it seems for me like you only need to add the .label when enabling and disabling, see the following:

if (DateOne < currentDate) {
            $w("#bookhere1").disable();
            $w("#bookhere1").label = "Trip expired"
        } else {
            $w("#bookhere1").enable();
            $w("#bookhere1").label = "Book for this day"
        }

However i have a suggestion for your page, i recommend you use a repeater to show the trips it’ll make your code shorter and easier to set. you can check the if condition for each item and based of that you set the label. see: repeater documentation

Best
Massa

10

Hi @massasalah18 ,

Sorry for the delayed response. And thank you for your suggestion, it makes a lot of sense. The only area I’m struggling with is how to populate the dates, as there are different dates for each button, how can I connect different database fields to different columns in the repeater??

Best wishes

Stephen