Show/hide images when a form is submitted.

Ask the community
,
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 (); 
    } ); 


}

});