How to apply my hide/show fields after saving?

JavaScript
1

Hello,

I have a Javascript code which is I can hide/show fields based on my Dropdown values using on(change)
But the problem is when I click save and the all my fields are showing. In short my hide/fields

Here’s my script and example below.

First I show all of my fields first using foreach loop .(Code below)

<?php foreach($options as $key_option=>$val_option):?>
         <!--INPUT BOX -->
            <?php if($val_option['id'] == '1081' || $val_option['id'] == '1082' || $val_option['id'] == '1083' || $val_option['id'] == '1168'):?>


           <div class="col-lg-3" id="<?php echo $val_option['id']; ?>">
            <label class="control-label"><?php echo $required_notice . $val_option['option'] ?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>

            <div class="controls">
                <?php echo form_input('option' . $val_option['id'] . '_' . $key, set_value('option' . $val_option['id'] . '_' . $key, isset($estate['option' . $val_option['id'] . '_' . $key]) ? $estate['option' . $val_option['id'] . '_' . $key] : ''), 'class="form-control ' . $val_option['type'] . '" id="inputOption_' . $key . '_' . $val_option['id'] . '" placeholder="' . $val_option['option'] . '" ' . $required_text . ' ' . $max_length_text) ?>

            <?php if (!empty($options_lang[$key][$key_option]->prefix) || !empty($options_lang[$key][$key_option]->suffix)): ?>
                <?php echo $options_lang[$key][$key_option]->prefix . $options_lang[$key][$key_option]->suffix ?>
            <?php endif; ?>
            </div>
            </div>
        <?php endif;?>
    <?php endforeach;?>

This is the output

1112×578 62.4 KB

Then I set a javascript to hide fields based on my dropdown value( check code below)

  <script type="text/javascript">
$(document).ready(function(){
$('#inputOption_1_2').on('change',function(){
if( $(this).val()==="Apartment" ){
    //Unitinfo
$('#20').show(); //bedroom
$('#19').show(); //bathroom
$('#1176').show(); //type of floorplan
$('#1063').show(); //no. of parking
$('#1177').show(); //Indoor Area
$('#1078').show(); //Balcony Area
$('#1179').show(); //Terrace Area
$('#1191').show(); //Price
$('#1192').show(); //REF#
$('#1193').show(); //RERA #
$('#1194').hide(); //Storey
$('#1195').hide(); //Plot Area
$('#1196').hide(); //Hotel Brand
$('#1197').hide(); //Built up Area
$('#1198').hide(); //Type of use
$('#1199').hide(); //Total Capacity
$('#1200').hide(); //No of kitchen
$('#1201').hide(); //No of dining
$('#1172').hide(); //Total Area
$('#1202').hide(); //Total Built up area
$('#1203').hide(); //Total Plot Area
$('#1071').hide(); //License Authority
$('#1211').hide(); //Nature of Business
$('#1212').hide(); //Total Price
$('#1204').hide(); //Area
//Decor
$('#1000').hide(); //Furnish
$('#1084').hide(); //Decoration
$('#1085').hide(); //Kitchen Type
$('#1087').hide(); //Floor Materials
$('#1086').hide(); //Window type
$('#1088').hide(); //Window Type
$('#1091').show(); //Smart System
$('#1089').hide(); //Private Garage
$('#1013').hide(); //Private Swimming Pool
$('#1006').show(); //Built in Wardrobe
$('#1138').hide(); //BBQ Area
$('#1205').hide(); //Bathroom Type
$('#1061').hide(); //Fitted
$('#1092').hide(); //Pantry
$('#1206').hide(); //Shared Meeting Room
$('#1207').hide(); //Shared Reception
//View
$('#1080').show(); //Main Direction
$('#1136').show(); //Master Bed
$('#1137').show(); //Other Bed
$('#1167').show(); //Kitchen Direction
$('#1166').show(); //Entrance
$('#1181').show(); //Primary view
$('#1182').show(); //View from Master bed
$('#1183').show(); //View from Other bed
$('#1168').show(); //Kitchen View
//Brand
$('#1140').show(); //Cooker   
$('#1141').show(); //Fridge
$('#1142').show(); //Washing Machine
$('#1143').show(); //Dryer
$('#1144').show(); //Dishwasher
$('#1145').show(); //Floor
$('#1146').show(); //Furniture
$('#1147').show(); //Bathroom
$('#1208').hide(); //Elevator
//Status
$('#1170').show(); //Rent Status
$('#1193').show(); //Tenancy Vacating Letter
$('#1095').show(); //Vacant on transfer
$('#1148').show(); //Rent Period
$('#1092').show(); //Expirty Date
$('#1093').show(); //Vacating Letter
$('#1094').show(); //Vacating Date
//Building Info
$('#1057').show(); //Building Name
$('#7').hide(); //Community
$('#1187').hide(); //Sub Community
$('#1186').show(); //Master Community
$('#1003').hide(); //Developer
$('#1044').hide(); //Year Completion
$('#1209').hide(); //Community Management 
$('#1169').show(); //Building Management
$('#1005').show(); //Annual Service Charge
$('#1101').hide(); //Cooling System
$('#1002').hide(); //Cooker Type
$('#1103').hide(); //Total Floors
$('#1104').hide(); //Building Heigts
$('#1105').hide(); //Building Color
$('#1106').hide(); //Ext Material
}
else if.....
</script>

When I select a value on my dropdown Example is apartment this my output looks like

1075×312 35 KB

(see the difference?)

Then I will save this form
After saving all field are showing like on a first image.

It back to normal which is all my fields are showing.
So my problem is how can apply my on.change function aftersaving? Base on my dropdown value selected.

Thanks
PS: Sorry I cannot put all the screenshot because of restrictions

2

Can you trigger the change event afterwards?

$('#inputOption_1_2').trigger("change");
1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.