Show/hide images when a form is submitted.

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

});