Show/hide images when a form is submitted.

Ask the community
,
1

I’ve updated this post and come as far as I can with the code. (see latest comment below).

I have a survey site that user submit their inspections on. When they submit a new survey I want the status to show either passed or failed icons.

I’ve created a function but I can’t see to find the right place to run it so that the icon refreshes when a new form is submitted.

Please can anyone help?

Thank you

import wixData from 'wix-data';

export function changeFloor_click(event) {
    if ($w('#floorMenu').hidden){
        $w('#floorMenu').show();
    }
    else {$w('#floorMenu').hide();
    }
    
}

$w.onReady(function () {
    statusUpdate();
});

export function statusUpdate() {
      $w('#bagnallLatest').onReady(() => {
        let status = $w('#bagnallLatest').getCurrentItem();

        if(status.inspectionResult==='Passed'){
            $w('#passTick').show();
        } else {
            $w('#passTick').hide;
        }
    });

    $w('#bagnallLatest').onReady(() => {
        let status = $w('#bagnallLatest').getCurrentItem();

        if(status.inspectionResult==='Under repair'){
            $w('#underRepair').show();
        } else {
            $w('#underRepair').hide;
        }
    });
}

$w.onReady(function () {

      $w('#fireGlass').onChange(() => {
        if ($w('#fireGlass').value === 'Yes'){
            $w('#fireGlass').style.backgroundColor = "#67E65B";
        } else if ($w('#fireGlass').value === 'No'){
            $w('#fireGlass').style.backgroundColor = "#FF4040";
        }
    });

$w('#iStrip').onChange(() => {
        if ($w('#iStrip').value === 'Yes'){
            $w('#iStrip').style.backgroundColor = "#67E65B";
        } else if ($w('#iStrip').value === 'No'){
            $w('#iStrip').style.backgroundColor = "#FF4040";
        }
    });    

$w('#doorClose').onChange(() => {
        if ($w('#doorClose').value === 'Yes'){
            $w('#doorClose').style.backgroundColor = "#67E65B";
        } else if ($w('#doorClose').value === 'No'){
            $w('#doorClose').style.backgroundColor = "#FF4040";
        }
    });

$w('#doorGap').onChange(() => {
        if ($w('#doorGap').value === 'No'){
            $w('#doorGap').style.backgroundColor = "#67E65B";
        } else if ($w('#doorGap').value === 'Yes'){
            $w('#doorGap').style.backgroundColor = "#FF4040";
        }
    });

$w('#fireDoor').onChange(() => {
        if ($w('#fireDoor').value === 'Yes One Side'){
            $w('#fireDoor').style.backgroundColor = "#67E65B";
        } else if ($w('#fireDoor').value === 'No'){
            $w('#fireDoor').style.backgroundColor = "#FF4040";
        }
    });

$w('#fireDoor').onChange(() => {
        if ($w('#fireDoor').value === 'Yes Both Sides'){
            $w('#fireDoor').style.backgroundColor = "#67E65B";
        } else if ($w('#fireDoor').value === 'No'){
            $w('#fireDoor').style.backgroundColor = "#FF4040";
        }
    });

$w('#doorDamage').onChange(() => {
        if ($w('#doorDamage').value === 'No'){
            $w('#doorDamage').style.backgroundColor = "#67E65B";
        } else if ($w('#doorDamage').value === 'Yes'){
            $w('#doorDamage').style.backgroundColor = "#FF4040";
        }
    });

$w('#inspectionResult').onChange(() => {
        if ($w('#inspectionResult').value === 'Passed'){
            $w('#inspectionResult').style.backgroundColor = "#67E65B";
        } else if ($w('#inspectionResult').value === 'Under repair'){
            $w('#inspectionResult').style.backgroundColor = "#FF4040";
        }
    });

    $w('#btnSubmit').onClick(() => {
        if (validateForm()) {
            submitForm();
        } else {
            updateFormValidation();
        }
    });

function validateForm() {
    return $w('#doorNo').valid &&
        $w('#surveyDate').valid &&
        $w('#fireGlass').valid &&
        $w('#iStrip').valid &&
        $w('#doorClose').valid &&
        $w('#doorGap').valid &&
        $w('#fireDoor').valid &&
        $w('#doorDamage').valid &&
        $w('#failNotes').valid &&
        $w('#inspectionResult').valid;
}

function updateFormValidation() {
    $w('#doorNo').updateValidityIndication();
    $w('#surveyDate').updateValidityIndication();
    $w('#fireGlass').updateValidityIndication();
    $w('#iStrip').updateValidityIndication();
    $w('#doorClose').updateValidityIndication();
    $w('#doorGap').updateValidityIndication();
    $w('#fireDoor').updateValidityIndication();
    $w('#doorDamage').updateValidityIndication();
    $w('#failNotes').updateValidityIndication();
    $w('#inspectionResult').updateValidityIndication();
}

function submitForm() {
    
    const formData = {
        doorNumber: $w('#doorNo').value,
        surveyDate: $w('#surveyDate').value,
        fireGlassPanel: $w('#fireGlass').value,
        intumescentStrip: $w('#iStrip').value,
        doorCloses: $w('#doorClose').value,
        doorGapOver4Mm: $w('#doorGap').value,
        fireDoorSign: $w('#fireDoor').value,
        damageToFireDoor: $w('#doorDamage').value,
        failureNotes: $w('#failNotes').value,
        inspectionResult: $w('#inspectionResult').value,
    };

    $w('#successMessage').hide();
    $w('#errorMessage').hide();

    wixData.insert('Bagnall', formData).then(() => {
        $w('#successMessage').show();
        $w('#formDoneNext').show();
    }).catch(() => {
        $w('#errorMessage').show();
    }).then (() => {
        $w("#bagnallLatest").refresh();
        });
    }
});

1642×1416 144 KB

2

I’ve not had any luck with calling up the function. I’ve only had it working with a second press of the submit button and I can’t figure out why. If anyone has any pointers it would be greatly appreciated

3

I’ve recorded a screencast of what is happening currently. I need help with understanding how to tailor my code to make the status icon update without the need for a refresh.

Please can someone help show me the right way to go with this an if its possible with the approach I’ve taken so far (latest code below).

import wixData from ‘wix-data’ ;

export function changeFloor_click ( event ) {
if ( $w ( ‘#floorMenu’ ). hidden ){
$w ( ‘#floorMenu’ ). show ();
}
else { $w ( ‘#floorMenu’ ). hide ();
}

}

$w . onReady ( function () {

$w ( '#bagnallLatest' ). onReady (() => { 
    let  status  =  $w ( '#bagnallLatest' ). getCurrentItem (); 

    if ( status . inspectionResult === 'Passed' ){ 
        $w ( '#passTick' ). show (); 
    }  **else**  { 
        $w ( '#passTick' ). hide ; 
    } 
}); 

$w ( '#bagnallLatest' ). onReady (() => { 
    let  status  =  $w ( '#bagnallLatest' ). getCurrentItem (); 

    if ( status . inspectionResult === 'Under repair' ){ 
        $w ( '#underRepair' ). show (); 
    }  **else**  { 
        $w ( '#underRepair' ). hide ; 
    } 
}); 


  $w ( '#fireGlass' ). onChange (() => { 
    if  ( $w ( '#fireGlass' ). value  ===  'Yes' ){ 
        $w ( '#fireGlass' ). style . backgroundColor  =  "#67E65B" ; 
    }  **else if**  ( $w ( '#fireGlass' ). value  ===  'No' ){ 
        $w ( '#fireGlass' ). style . backgroundColor  =  "#FF4040" ; 
    } 
});

$w ( ‘#iStrip’ ). onChange (() => {
if ( $w ( ‘#iStrip’ ). value === ‘Yes’ ){
$w ( ‘#iStrip’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#iStrip’ ). value === ‘No’ ){
$w ( ‘#iStrip’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#doorClose’ ). onChange (() => {
if ( $w ( ‘#doorClose’ ). value === ‘Yes’ ){
$w ( ‘#doorClose’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#doorClose’ ). value === ‘No’ ){
$w ( ‘#doorClose’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#doorGap’ ). onChange (() => {
if ( $w ( ‘#doorGap’ ). value === ‘No’ ){
$w ( ‘#doorGap’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#doorGap’ ). value === ‘Yes’ ){
$w ( ‘#doorGap’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#fireDoor’ ). onChange (() => {
if ( $w ( ‘#fireDoor’ ). value === ‘Yes One Side’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#fireDoor’ ). value === ‘No’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#fireDoor’ ). onChange (() => {
if ( $w ( ‘#fireDoor’ ). value === ‘Yes Both Sides’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#fireDoor’ ). value === ‘No’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#doorDamage’ ). onChange (() => {
if ( $w ( ‘#doorDamage’ ). value === ‘No’ ){
$w ( ‘#doorDamage’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#doorDamage’ ). value === ‘Yes’ ){
$w ( ‘#doorDamage’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#inspectionResult’ ). onChange (() => {
if ( $w ( ‘#inspectionResult’ ). value === ‘Passed’ ){
$w ( ‘#inspectionResult’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#inspectionResult’ ). value === ‘Under repair’ ){
$w ( ‘#inspectionResult’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( '#btnSubmit' ). onClick (() => { 
    if  ( validateForm ()) { 
        submitForm (); 
        statusUpdate (); 
    }  **else**  { 
        updateFormValidation (); 
    } 
});

function validateForm () {
return $w ( ‘#doorNo’ ). valid &&
$w ( ‘#surveyDate’ ). valid &&
$w ( ‘#fireGlass’ ). valid &&
$w ( ‘#iStrip’ ). valid &&
$w ( ‘#doorClose’ ). valid &&
$w ( ‘#doorGap’ ). valid &&
$w ( ‘#fireDoor’ ). valid &&
$w ( ‘#doorDamage’ ). valid &&
$w ( ‘#failNotes’ ). valid &&
$w ( ‘#inspectionResult’ ). valid ;
}

function updateFormValidation () {
$w ( ‘#doorNo’ ). updateValidityIndication ();
$w ( ‘#surveyDate’ ). updateValidityIndication ();
$w ( ‘#fireGlass’ ). updateValidityIndication ();
$w ( ‘#iStrip’ ). updateValidityIndication ();
$w ( ‘#doorClose’ ). updateValidityIndication ();
$w ( ‘#doorGap’ ). updateValidityIndication ();
$w ( ‘#fireDoor’ ). updateValidityIndication ();
$w ( ‘#doorDamage’ ). updateValidityIndication ();
$w ( ‘#failNotes’ ). updateValidityIndication ();
$w ( ‘#inspectionResult’ ). updateValidityIndication ();
}

function statusUpdate () {
$w ( ‘#bagnallLatest’ ). onItemValuesChanged (( updatedItem ) => {
let status = updatedItem . inspectionResult ;

    if ( status . inspectionResult === 'Passed' ){ 
        $w ( '#passTick' ). show (); 
    }  **else**  { 
        $w ( '#passTick' ). hide ; 
    } 
}); 

  $w ( '#bagnallLatest' ). onItemValuesChanged (( updatedItem ) => { 
    let  status  =  updatedItem . inspectionResult ; 

    if ( status . inspectionResult === 'Under repair' ){ 
        $w ( '#underRepair' ). show (); 
    }  **else**  { 
        $w ( '#underRepair' ). hide ; 
    } 
});

}

function submitForm () {

const  formData  = { 
    doorNumber :  $w ( '#doorNo' ). value , 
    surveyDate :  $w ( '#surveyDate' ). value , 
    fireGlassPanel :  $w ( '#fireGlass' ). value , 
    intumescentStrip :  $w ( '#iStrip' ). value , 
    doorCloses :  $w ( '#doorClose' ). value , 
    doorGapOver4Mm :  $w ( '#doorGap' ). value , 
    fireDoorSign :  $w ( '#fireDoor' ). value , 
    damageToFireDoor :  $w ( '#doorDamage' ). value , 
    failureNotes :  $w ( '#failNotes' ). value , 
    inspectionResult :  $w ( '#inspectionResult' ). value , 
}; 



$w ( '#successMessage' ). hide (); 
$w ( '#errorMessage' ). hide (); 

wixData . insert ( 'Bagnall' ,  formData ). then (() => { 
    $w ( '#successMessage' ). show (); 
    $w ( '#formDoneNext' ). show (); 
}). catch (() => { 
    $w ( '#errorMessage' ). show (); 
}). then  (() => { 
    $w ( "#bagnallLatest" ). refresh (); 
    }); 
}

});

4

Question:
a) Do you use → WixForms?
b) Or do you have generated an own CUSTOM-FORM ?

Also i can see that you are using a DATASET …

$w('#bagnallLatest').onReady(()=>{letstatus=$w('#bagnallLatest').getCurrentItem();

But using wix-data —> to insert / save items…

wixData.insert('Bagnall',formData).then(()=>{

You are mixing DATASET with Wix-Data → and this is why you get problems.

If you already are using a DATASET which connects your form with DATABASE, why not using…

  1. https://www.wix.com/velo/reference/wix-dataset/dataset/add
  2. setFieldValues - Velo API Reference - Wix.com
  3. https://www.wix.com/velo/reference/wix-dataset/dataset/save

…instead to switch to wix-data-api, what is not really needed to be done in your case.

So your solution would look like…
If → (a) —> $w WixForms - Velo API Reference - Wix.com
If → (b + dataset) —> https://www.wix.com/velo/reference/wix-dataset/dataset/onaftersave

If → (b + wixData-API) —> NOT RECOMMENDE IN YOUR CASE !!!
If you already started to work with DATASET, do everything with DATASET-CODING, do not mix it with Wix-DATA-API-CODES.

BUT IF YOU WANT TO USE IT ANYWAY —> an inserting process needs time!

If this does not work properly…

	wixData.insert('Bagnall',formData).then(()=>{$w('#successMessage').show();$w('#formDoneNext').show();$w("#bagnallLatest").refresh();}).catch(()=>{$w('#errorMessage').show();})

Add a TIME-DELAY for REFRESHING-PROCESS (about 1-second ) 1000 milisecs.

wixData.insert('Bagnall',formData).then(()=>{$w('#successMessage').show();$w('#formDoneNext').show();setTimeout(()=>{$w("#bagnallLatest").refresh();},1000);}).catch(()=>{$w('#errorMessage').show();})

Did it work?

Which kind of version did you use at the end?

2-more things !!!

VERY GOOD !!! → 

$w('#btnSubmit').onClick(()=>{

—> best code-part in your whole code.
Here you did everything perfect, giving your SUBMISSION-BUTTON a perfect definition!
How could i know emmidiatelly, that it is a SUBMISSION-BUTTON ? :wink:

Not perfect variable-declaration !!! (you surely will understand why) !
doorNumber:$w(‘#doorNo’).value,
surveyDate:$w(‘#surveyDate’).value,
fireGlassPanel:$w(‘#fireGlass’).value,
intumescentStrip:$w(‘#iStrip’).value

And last note:
YOU DO NOT NEED MORE THAN ------> 1-$w.onReady() <----in your whole code. Your page can get ready —> JUST ONE TIME !

5

First off, thanks so much for your reply :pray:

B) I’m using a custom form.

So if I’ve got this right, my problem is that I’m saving the data using wix-data but using Dataset to try and change the icon?

I’ll have a go at getting my head round using the onaftersave and see if I have any luck

6

You don’t have to use Wix-Data at all.
You have already your DATASET-connected to your databse.
So write your code, to tell your dataset to save items inside the DATABASE, which is connected to your dataset.

You are using the same DATABSE

$w('#bagnallLatest').onReady(()=>{

wixData.insert('Bagnall',formData).then(()=>{

Kick out → Wix-Data-API-CODE ← of your project and replace it with CODE → related to DATASET-CODING —> using …

  1. add() —> will add a new line inside your database which is connected with your dataset
  2. setFieldValues() —> will define which FIELD-DATA you want to be saved.
  3. save(); will save your data into database with the help of DATASET
  4. onAfterSave(); will start the on AFTER-SAVE event, fired after saving process. Here you will define what to do after saving-process has been done.

As i know DATASET → it could give you anyway an ERROR, something like…

“CAN NOT REFRESH DURING SAVING-PROCESS”

You can RESOLVE THIS ISSUE BY putting some little → TIME-DELAY <— inside of the —> onAfterSave()-Code-Part.

7

I’ll have a go at getting my head round using the onaftersave and see if I have any luck

To help you to solve this issue…

$w.onReady(()=>{
	$w('#dataset1').onReady(()=>{
		//all other normal dataset-code here....
		//all other normal dataset-code here....
		//all other normal dataset-code here....
		//all other normal dataset-code here....
		//all other normal dataset-code here....
	});

	$w('#dataset1').onBeforeSave(()=>{
		//after-save-code here...
		//after-save-code here...
	});

	$w('#dataset1').onAfterSave(()=>{
		//before-save code here...
		//before-save code here...
	});
});

All you have to do right now —> is to find out, where to put in which code-part.

  1. add() —> will add a new line inside your database which is connected with your dataset
  2. setFieldValues() —> will define which FIELD-DATA you want to be saved.
  3. save();
  4. refresh(); —> will refresh your dataset to refresh the visualisation of your repeater or a table (which is surely connected to your dataset, at least in most of cases).
  5. And we do not forget about the → HINT <— with the —> TIME-DELAY <—
setTimeOut(()=>{................},1000);
8

All working now. Massive thank you for your patient guidance and for nudging me in the right direction.

With a little help from a colleague the following code works on the site.

export function changeFloor_click ( event ) {
if ( $w ( ‘#floorMenu’ ). hidden ){
$w ( ‘#floorMenu’ ). show ();
}
else { $w ( ‘#floorMenu’ ). hide ();
}

}

$w . onReady ( function () {

$w ( '#bagnallLatest' ). onReady (() => { 
    **let**  status  =  $w ( '#bagnallLatest' ). getCurrentItem (); 

    **if** ( status . inspectionResult === 'Passed' ){ 
        $w ( '#passTick' ). expand (); 
    }  **else**  { 
        $w ( '#passTick' ). collapse (); 
    } 
}); 

$w ( '#bagnallLatest' ). onReady (() => { 
    **let**  status  =  $w ( '#bagnallLatest' ). getCurrentItem (); 

    **if** ( status . inspectionResult === 'Under repair' ){ 
        $w ( '#underRepair' ). expand (); 
    }  **else**  { 
        $w ( '#underRepair' ). collapse (); 
    } 
}); 

  $w ( '#fireGlass' ). onChange (() => { 
    **if**  ( $w ( '#fireGlass' ). value  ===  'Yes' ){ 
        $w ( '#fireGlass' ). style . backgroundColor  =  "#67E65B" ; 
    }  **else if**  ( $w ( '#fireGlass' ). value  ===  'No' ){ 
        $w ( '#fireGlass' ). style . backgroundColor  =  "#FF4040" ; 
    } 
});

$w ( ‘#iStrip’ ). onChange (() => {
if ( $w ( ‘#iStrip’ ). value === ‘Yes’ ){
$w ( ‘#iStrip’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#iStrip’ ). value === ‘No’ ){
$w ( ‘#iStrip’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#doorClose’ ). onChange (() => {
if ( $w ( ‘#doorClose’ ). value === ‘Yes’ ){
$w ( ‘#doorClose’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#doorClose’ ). value === ‘No’ ){
$w ( ‘#doorClose’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#doorGap’ ). onChange (() => {
if ( $w ( ‘#doorGap’ ). value === ‘No’ ){
$w ( ‘#doorGap’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#doorGap’ ). value === ‘Yes’ ){
$w ( ‘#doorGap’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#fireDoor’ ). onChange (() => {
if ( $w ( ‘#fireDoor’ ). value === ‘Yes One Side’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#fireDoor’ ). value === ‘No’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#fireDoor’ ). onChange (() => {
if ( $w ( ‘#fireDoor’ ). value === ‘Yes Both Sides’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#fireDoor’ ). value === ‘No’ ){
$w ( ‘#fireDoor’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#doorDamage’ ). onChange (() => {
if ( $w ( ‘#doorDamage’ ). value === ‘No’ ){
$w ( ‘#doorDamage’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#doorDamage’ ). value === ‘Yes’ ){
$w ( ‘#doorDamage’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( ‘#inspectionResult’ ). onChange (() => {
if ( $w ( ‘#inspectionResult’ ). value === ‘Passed’ ){
$w ( ‘#inspectionResult’ ). style . backgroundColor = “#67E65B” ;
} else if ( $w ( ‘#inspectionResult’ ). value === ‘Under repair’ ){
$w ( ‘#inspectionResult’ ). style . backgroundColor = “#FF4040” ;
}
});

$w ( '#btnSubmit' ). onClick (() => { 
   
    **if**  ( validateForm ()) { 
        submitForm (); 
       
         
    }  **else**  { 
        updateFormValidation (); 
       
    } 
});

function validateForm () {
return $w ( ‘#doorNo’ ). valid &&
$w ( ‘#surveyDate’ ). valid &&
$w ( ‘#fireGlass’ ). valid &&
$w ( ‘#iStrip’ ). valid &&
$w ( ‘#doorClose’ ). valid &&
$w ( ‘#doorGap’ ). valid &&
$w ( ‘#fireDoor’ ). valid &&
$w ( ‘#doorDamage’ ). valid &&
$w ( ‘#failNotes’ ). valid &&
$w ( ‘#inspectionResult’ ). valid ;
}

function updateFormValidation () {
$w ( ‘#doorNo’ ). updateValidityIndication ();
$w ( ‘#surveyDate’ ). updateValidityIndication ();
$w ( ‘#fireGlass’ ). updateValidityIndication ();
$w ( ‘#iStrip’ ). updateValidityIndication ();
$w ( ‘#doorClose’ ). updateValidityIndication ();
$w ( ‘#doorGap’ ). updateValidityIndication ();
$w ( ‘#fireDoor’ ). updateValidityIndication ();
$w ( ‘#doorDamage’ ). updateValidityIndication ();
$w ( ‘#failNotes’ ). updateValidityIndication ();
$w ( ‘#inspectionResult’ ). updateValidityIndication ();
}

function submitForm () {

$w ( “#bagnallLatest” ). setFieldValues ( {
doorNumber : $w ( ‘#doorNo’ ). value ,
surveyDate : $w ( ‘#surveyDate’ ). value ,
fireGlassPanel : $w ( ‘#fireGlass’ ). value ,
intumescentStrip : $w ( ‘#iStrip’ ). value ,
doorCloses : $w ( ‘#doorClose’ ). value ,
doorGapOver4Mm : $w ( ‘#doorGap’ ). value ,
fireDoorSign : $w ( ‘#fireDoor’ ). value ,
damageToFireDoor : $w ( ‘#doorDamage’ ). value ,
failureNotes : $w ( ‘#failNotes’ ). value ,
inspectionResult : $w ( ‘#inspectionResult’ ). value ,

        } );

function statusUpdate () {
$w ( ‘#bagnallLatest’ ). refresh ();
let status = $w ( ‘#bagnallLatest’ ). getCurrentItem ();

    **if** ( status . inspectionResult === 'Passed' ){ 
        $w ( '#passTick' ). expand (); 
          $w ( '#underRepair' ). collapse (); 
         // $w('#text6').text="Passed"; 
          console . log ( "Passed" ); 

    }  **else if** ( status . inspectionResult === 'Under repair' ) { 
        $w ( '#passTick' ). collapse (); 
         $w ( '#underRepair' ). expand (); 
          console . log ( "underRepair" ); 
          //$w('#text6').text="underRepair"; 
    }

}

$w ( '#successMessage' ). hide (); 
$w ( '#errorMessage' ). hide (); 



        $w ( "#bagnallLatest" ). save () 
    . then ( ( item ) => { 
        
        $w ( '#successMessage' ). show (); 
            $w ( '#formDoneNext' ). show (); 
            $w ( "#bagnallLatest" ). refresh (); 
        setTimeout ( statusUpdate ,  1000 ); 
    } ) 
    . **catch** ( ( err ) => { 
        **let**  errMsg  =  err ; 
        $w ( '#errorMessage' ). show (); 
    } ); 


}

});

9

By the way, please next time use CODE-BLOCK to show your code, like…

$w.onReady(()=> {
    $w('#bagnallLatest').onReady(()=> {
        let status = $w('#bagnallLatest').getCurrentItem();

        if(status.inspectionResult==='Passed'){
            $w('#passTick').expand();}
        else {$w('#passTick').collapse();}
    //});

    //$w('#bagnallLatest').onReady(() => {
    //    let status = $w('#bagnallLatest').getCurrentItem();

        if(status.inspectionResult==='Under repair'){
            $w('#underRepair').expand();
        } 
        else {$w('#underRepair').collapse();}
    });
    
    //--------------------------------------------------------
    $w('#fireGlass').onChange(() => {
        if ($w('#fireGlass').value === 'Yes'){
            $w('#fireGlass').style.backgroundColor = "#67E65B";
        } else if ($w('#fireGlass').value === 'No'){
            $w('#fireGlass').style.backgroundColor = "#FF4040";
        }
    });

    $w('#iStrip').onChange(() => {
        if ($w('#iStrip').value === 'Yes'){
            $w('#iStrip').style.backgroundColor = "#67E65B";
        } else if ($w('#iStrip').value === 'No'){
            $w('#iStrip').style.backgroundColor = "#FF4040";
        }
    });    

    $w('#doorClose').onChange(() => {
        if ($w('#doorClose').value === 'Yes'){
            $w('#doorClose').style.backgroundColor = "#67E65B";
        } else if ($w('#doorClose').value === 'No'){
            $w('#doorClose').style.backgroundColor = "#FF4040";
        }
    });

    $w('#doorGap').onChange(() => {
        if ($w('#doorGap').value === 'No'){
            $w('#doorGap').style.backgroundColor = "#67E65B";
        } else if ($w('#doorGap').value === 'Yes'){
            $w('#doorGap').style.backgroundColor = "#FF4040";
        }
    });

    $w('#fireDoor').onChange(() => {
        if ($w('#fireDoor').value === 'Yes One Side'){
            $w('#fireDoor').style.backgroundColor = "#67E65B";
        } else if ($w('#fireDoor').value === 'No'){
            $w('#fireDoor').style.backgroundColor = "#FF4040";
        }
    });

    $w('#fireDoor').onChange(() => {
        if ($w('#fireDoor').value === 'Yes Both Sides'){
            $w('#fireDoor').style.backgroundColor = "#67E65B";
        } else if ($w('#fireDoor').value === 'No'){
            $w('#fireDoor').style.backgroundColor = "#FF4040";
        }
    });

    $w('#doorDamage').onChange(() => {
        if ($w('#doorDamage').value === 'No'){
            $w('#doorDamage').style.backgroundColor = "#67E65B";
        } else if ($w('#doorDamage').value === 'Yes'){
            $w('#doorDamage').style.backgroundColor = "#FF4040";
        }
    });

    $w('#inspectionResult').onChange(() => {
        if ($w('#inspectionResult').value === 'Passed'){
            $w('#inspectionResult').style.backgroundColor = "#67E65B";
        } else if ($w('#inspectionResult').value === 'Under repair'){
            $w('#inspectionResult').style.backgroundColor = "#FF4040";
        }
    });

    $w('#btnSubmit').onClick(() => {       
        if (validateForm()) {
            submitForm();            
        } else {
            updateFormValidation();
        }
    });

    function validateForm() {
        return $w('#doorNo').valid &&
        $w('#surveyDate').valid &&
        $w('#fireGlass').valid &&
        $w('#iStrip').valid &&
        $w('#doorClose').valid &&
        $w('#doorGap').valid &&
        $w('#fireDoor').valid &&
        $w('#doorDamage').valid &&
        $w('#failNotes').valid &&
        $w('#inspectionResult').valid;
    }

    function updateFormValidation() {
        $w('#doorNo').updateValidityIndication();
        $w('#surveyDate').updateValidityIndication();
        $w('#fireGlass').updateValidityIndication();
        $w('#iStrip').updateValidityIndication();
        $w('#doorClose').updateValidityIndication();
        $w('#doorGap').updateValidityIndication();
        $w('#fireDoor').updateValidityIndication();
        $w('#doorDamage').updateValidityIndication();
        $w('#failNotes').updateValidityIndication();
        $w('#inspectionResult').updateValidityIndication();
    }

    function submitForm() {    
    $w("#bagnallLatest").setFieldValues( {
        doorNumber: $w('#doorNo').value,
        surveyDate: $w('#surveyDate').value,
        fireGlassPanel: $w('#fireGlass').value,
        intumescentStrip: $w('#iStrip').value,
        doorCloses: $w('#doorClose').value,
        doorGapOver4Mm: $w('#doorGap').value,
        fireDoorSign: $w('#fireDoor').value,
        damageToFireDoor: $w('#doorDamage').value,
        failureNotes: $w('#failNotes').value,
        inspectionResult: $w('#inspectionResult').value,
    });

    function statusUpdate() {
        $w('#bagnallLatest').refresh();
        let status = $w('#bagnallLatest').getCurrentItem();
        if(status.inspectionResult==='Passed'){
            $w('#passTick').expand();
                $w('#underRepair').collapse();
                // $w('#text6').text="Passed";
                console.log("Passed");
        } else if(status.inspectionResult==='Under repair') {
            $w('#passTick').collapse();
            $w('#underRepair').expand();
            console.log("underRepair");
            //$w('#text6').text="underRepair";
        }
    }

    $w('#successMessage').hide();
    $w('#errorMessage').hide();

    $w("#bagnallLatest").save()
        .then( (item) => {
            $w('#successMessage').show();
            $w('#formDoneNext').show();
            $w("#bagnallLatest").refresh();
            setTimeout(statusUpdate, 1000);
        })
        .catch( (err) => {
            let errMsg = err;
            $w('#errorMessage').show();
        });
    }
});

export function changeFloor_click(event) {
    if ($w('#floorMenu').hidden){
        $w('#floorMenu').show();
    }
    else {$w('#floorMenu').hide();
    }    
}