I’ve done a lot of searching as my JS is not up to par, but every result seems to show how to change visibility based on the value that is selected from a dropdown. I would like to hide the form option (label and textbox in this case) UNTIL ANY value is selected from a given dropdown. I am trying to filter visibility based on the "column" dropdown, that gets populated from the "table" element selection. I am trying to hide the label and input box for "lookup" until the "column" is selected.
I feel that I’m close, but not sure what the problem is.
My current attempt:
function showDiv(divId, element) {
document.getElementById(divId).style.display = element.value === "" ? 'table-row' : 'none';
}
var data = {
"coh_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "type", "co_num", "est_num", "cust_num", "cust_seq", "contact", "phone", "cust_po", "order_date", "taken_by", "terms_code", "ship_code", "price", "weight", "qty_packages", "freight", "misc_charges", "prepaid_amt", "sales_tax", "stat", "cost", "close_date", "slsman", "eff_date", "exp_date", "whse", "sales_tax_2", "logifld", "edi_order", "trans_nat", "process_ind", "delterm", "use_exch_rate", "tax_code1", "tax_code2", "frt_tax_code1", "frt_tax_code2", "msc_tax_code1", "msc_tax_code2", "disc", "pricecode", "ship_partial", "ship_early", "matl_cost_t", "lbr_cost_t", "fovhd_cost_t", "vovhd_cost_t", "out_cost_t", "end_user_type", "exch_rate", "fixed_rate", "orig_site", "lcr_num", "projected_date", "order_source", "convert_type", "aps_pull_up", "NoteExistsFlag", "RecordDate", "RowPointer", "charfld1", "charfld2", "charfld3", "decifld1", "decifld2", "decifld3", "datefld", "config_id", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "include_tax_in_price", "trans_nat_2", "export_type", "external_confirmation_ref", "is_external", "lead_id", "opp_id", "days_shipped_before_due_date_tolerance", "days_shipped_after_due_date_tolerance", "shipped_over_ordered_qty_tolerance", "shipped_under_ordered_qty_tolerance", "consignment", "discount_type", "disc_amount", "prospect_id", "demanding_site", "demanding_site_po_num", "shipment_approval_required", "surcharge", "surcharge_t", "config_doc_id"],
"coitem_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "co_num", "co_line", "co_release", "item", "qty_ordered", "qty_ready", "qty_shipped", "qty_packed", "disc", "cost", "price", "ref_type", "ref_num", "ref_line_suf", "ref_release", "due_date", "ship_date", "reprice", "cust_item", "qty_invoiced", "qty_returned", "cgs_total", "feat_str", "stat", "cust_num", "cust_seq", "prg_bill_tot", "prg_bill_app", "release_date", "promise_date", "whse", "wks_basis", "wks_value", "comm_code", "trans_nat", "process_ind", "delterm", "unit_weight", "origin", "cons_num", "tax_code1", "tax_code2", "export_value", "ec_code", "transport", "pick_date", "pricecode", "u_m", "qty_ordered_conv", "price_conv", "co_cust_num", "packed", "bol", "qty_rsvd", "matl_cost", "lbr_cost", "fovhd_cost", "vovhd_cost", "out_cost", "cgs_total_matl", "cgs_total_lbr", "cgs_total_fovhd", "cgs_total_vovhd", "cgs_total_out", "cost_conv", "matl_cost_conv", "lbr_cost_conv", "fovhd_cost_conv", "vovhd_cost_conv", "out_cost_conv", "ship_site", "sync_reqd", "co_orig_site", "cust_po", "rma_num", "rma_line", "projected_date", "consolidate", "inv_freq", "summarize", "NoteExistsFlag", "RecordDate", "RowPointer", "description", "config_id", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "rcpt_rqmt", "trans_nat_2", "suppl_qty_conv_factor", "print_kit_components", "due_date_day", "external_reservation_ref", "non_inv_acct", "non_inv_acct_unit1", "non_inv_acct_unit2", "non_inv_acct_unit3", "non_inv_acct_unit4", "days_shipped_before_due_date_tolerance", "days_shipped_after_due_date_tolerance", "shipped_over_ordered_qty_tolerance", "shipped_under_ordered_qty_tolerance", "priority", "invoice_hold", "manufacturer_id", "manufacturer_item", "qty_picked", "fs_inc_num", "promotion_code", "external_shipment_line_id", "last_external_shipment_doc_id", "last_process_shipment_doc_id", "external_shipment_status"],
"item_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "item", "description", "qty_allocjob", "u_m", "lead_time", "lot_size", "qty_used_ytd", "qty_mfg_ytd", "abc_code", "drawing_nbr", "product_code", "p_m_t_code", "cost_method", "lst_lot_size", "unit_cost", "lst_u_cost", "avg_u_cost", "job", "suffix", "stocked", "matl_type", "family_code", "low_level", "last_inv", "days_supply", "order_min", "order_mult", "plan_code", "mps_flag", "accept_req", "change_date", "revision", "phantom_flag", "plan_flag", "paper_time", "dock_time", "asm_setup", "asm_run", "asm_matl", "asm_tool", "asm_fixture", "asm_other", "asm_fixed", "asm_var", "asm_outside", "comp_setup", "comp_run", "comp_matl", "comp_tool", "comp_fixture", "comp_other", "comp_fixed", "comp_var", "comp_outside", "sub_matl", "shrink_fact", "alt_item", "unit_weight", "weight_units", "charfld4", "cur_u_cost", "feat_type", "var_lead", "feat_str", "next_config", "feat_templ", "backflush", "charfld1", "charfld2", "charfld3", "decifld1", "decifld2", "decifld3", "logifld", "datefld", "track_ecn", "u_ws_price", "comm_code", "origin", "unit_mat_cost", "unit_duty_cost", "unit_freight_cost", "unit_brokerage_cost", "cur_mat_cost", "cur_duty_cost", "cur_freight_cost", "cur_brokerage_cost", "tax_code1", "tax_code2", "bflush_loc", "reservable", "shelf_life", "lot_prefix", "serial_prefix", "serial_length", "issue_by", "serial_tracked", "lot_tracked", "cost_type", "matl_cost", "lbr_cost", "fovhd_cost", "vovhd_cost", "out_cost", "cur_matl_cost", "cur_lbr_cost", "cur_fovhd_cost", "cur_vovhd_cost", "cur_out_cost", "avg_matl_cost", "avg_lbr_cost", "avg_fovhd_cost", "avg_vovhd_cost", "avg_out_cost", "prod_type", "rate_per_day", "mps_plan_fence", "pass_req", "lot_gen_exp", "supply_site", "prod_mix", "stat", "status_chg_user_code", "chg_date", "reason_code", "supply_whse", "due_period", "order_max", "mrp_part", "infinite_part", "NoteExistsFlag", "RecordDate", "RowPointer", "supply_tolerance_hrs", "exp_lead_time", "var_exp_lead", "buyer", "order_configurable", "job_configurable", "cfg_model", "co_post_config", "job_post_config", "auto_job", "auto_post", "setupgroup", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "mfg_supply_switching_active", "time_fence_rule", "time_fence_value", "earliest_planned_po_receipt", "use_reorder_point", "reorder_point", "fixed_order_qty", "unit_insurance_cost", "unit_loc_frt_cost", "cur_insurance_cost", "cur_loc_frt_cost", "tax_free_matl", "tax_free_days", "safety_stock_percent", "tariff_classification", "lowdate", "rcpt_rqmt", "active_for_data_integration", "rcvd_over_po_qty_tolerance", "rcvd_under_po_qty_tolerance", "include_in_net_change_planning", "kit", "print_kit_components", "safety_stock_rule", "show_in_drop_down_list", "controlled_by_external_ics", "inventory_ucl_tolerance", "inventory_lcl_tolerance", "separation_attribute", "batch_release_attribute1", "batch_release_attribute2", "batch_release_attribute3", "picture", "active_for_customer_portal", "featured", "top_seller", "overview", "preassign_lots", "preassign_serials", "attr_group", "dimension_group", "lot_attr_group", "track_pieces", "bom_last_import_date", "save_current_rev_upon_bom_import", "nafta_pref_crit", "subject_to_nafta_rvc", "producer", "nafta_country_of_origin", "must_use_future_rcpts_before_pln", "portal_pricing_site", "portal_pricing_enabled", "subject_to_excise_tax", "excise_tax_percent", "freight_amt", "item_content", "estimated_matl_use_up_date", "last_matl_use_up_report_date", "PP_length_linear_dimension", "PP_width_linear_dimension", "PP_height_linear_dimension", "PP_linear_dimension_u_m", "PP_density", "PP_density_u_m", "PP_area", "PP_area_u_m", "PP_bulk_mass", "PP_bulk_mass_u_m", "PP_ream_mass", "PP_ream_mass_u_m", "PP_grade", "PP_abnormal_size", "PP_paper_mass_basis", "charge_item", "pull_up_safety_stock_rule", "pull_up_safety_stock_value", "commodity_jurisdiction", "eccn_usml_value", "export_compliance_program", "sched_b_num", "hts_code", "country", "fcst_bom_supply_flag"],
"itemloc_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "whse", "item", "rank", "loc", "qty_on_hand", "mrb_flag", "loc_type", "inv_acct", "unit_cost", "perm_flag", "qty_rsvd", "matl_cost", "lbr_cost", "fovhd_cost", "vovhd_cost", "out_cost", "lbr_acct", "fovhd_acct", "vovhd_acct", "out_acct", "wc", "inv_acct_unit1", "inv_acct_unit2", "inv_acct_unit3", "inv_acct_unit4", "lbr_acct_unit1", "lbr_acct_unit2", "lbr_acct_unit3", "lbr_acct_unit4", "fovhd_acct_unit1", "fovhd_acct_unit2", "fovhd_acct_unit3", "fovhd_acct_unit4", "vovhd_acct_unit1", "vovhd_acct_unit2", "vovhd_acct_unit3", "vovhd_acct_unit4", "out_acct_unit1", "out_acct_unit2", "out_acct_unit3", "out_acct_unit4", "NoteExistsFlag", "RecordDate", "RowPointer", "NewRank", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "last_count_qty_on_hand", "last_count_qty_rsvd", "qty_contained", "assigned_to_be_picked_qty", "inv_in_proc_acct", "inv_in_proc_acct_unit1", "inv_in_proc_acct_unit2", "inv_in_proc_acct_unit3", "inv_in_proc_acct_unit4", "lbr_in_proc_acct", "lbr_in_proc_acct_unit1", "lbr_in_proc_acct_unit2", "lbr_in_proc_acct_unit3", "lbr_in_proc_acct_unit4", "fovhd_in_proc_acct", "fovhd_in_proc_acct_unit1", "fovhd_in_proc_acct_unit2", "fovhd_in_proc_acct_unit3", "fovhd_in_proc_acct_unit4", "vovhd_in_proc_acct", "vovhd_in_proc_acct_unit1", "vovhd_in_proc_acct_unit2", "vovhd_in_proc_acct_unit3", "vovhd_in_proc_acct_unit4", "out_in_proc_acct", "out_in_proc_acct_unit1", "out_in_proc_acct_unit2", "out_in_proc_acct_unit3", "out_in_proc_acct_unit4", "count_sequence"],
"job_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "type", "job", "suffix", "job_date", "cust_num", "ord_type", "ord_num", "ord_line", "ord_release", "est_job", "est_suf", "item", "qty_released", "qty_complete", "qty_scrapped", "stat", "lst_trx_date", "root_job", "root_suf", "ref_job", "ref_suf", "ref_oper", "ref_seq", "low_level", "effect_date", "wip_acct", "wip_total", "wip_complete", "wip_special", "revision", "picked", "whse", "jcb_acct", "ps_num", "wip_lbr_acct", "wip_fovhd_acct", "wip_vovhd_acct", "wip_out_acct", "wip_matl_total", "wip_lbr_total", "wip_fovhd_total", "wip_vovhd_total", "wip_out_total", "wip_matl_comp", "wip_lbr_comp", "wip_fovhd_comp", "wip_vovhd_comp", "wip_out_comp", "rollup_date", "wip_acct_unit1", "wip_acct_unit2", "wip_acct_unit3", "wip_acct_unit4", "jcb_acct_unit1", "jcb_acct_unit2", "jcb_acct_unit3", "jcb_acct_unit4", "wip_lbr_acct_unit1", "wip_lbr_acct_unit2", "wip_lbr_acct_unit3", "wip_lbr_acct_unit4", "wip_fovhd_acct_unit1", "wip_fovhd_acct_unit2", "wip_fovhd_acct_unit3", "wip_fovhd_acct_unit4", "wip_vovhd_acct_unit1", "wip_vovhd_acct_unit2", "wip_vovhd_acct_unit3", "wip_vovhd_acct_unit4", "wip_out_acct_unit1", "wip_out_acct_unit2", "wip_out_acct_unit3", "wip_out_acct_unit4", "prod_mix", "NoteExistsFlag", "RecordDate", "RowPointer", "description", "config_id", "co_product_mix", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "scheduled", "rcpt_rqmt", "export_type", "contains_tax_free_matl", "midnight_of_job_sch_end_date", "midnight_of_job_sch_compdate", "rework", "unlinked_xref", "prospect_id", "is_external", "preassign_lots", "preassign_serials", "config_doc_id", "MO_bom_alternate_id", "MO_bom_alternate_description", "MO_co_job", "MO_product_cycle", "MO_qty_per_cycle", "MO_job_description"],
"jobmatl_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "job", "suffix", "oper_num", "sequence", "matl_type", "item", "matl_qty", "units", "cost", "qty_issued", "a_cost", "ref_type", "ref_num", "ref_line_suf", "ref_release", "po_unit_cost", "effect_date", "obs_date", "scrap_fact", "qty_var", "fixovhd_t", "varovhd_t", "feature", "probable", "opt_code", "inc_price", "description", "pick_date", "bom_seq", "matl_qty_conv", "u_m", "inc_price_conv", "cost_conv", "backflush", "bflush_loc", "fmatlovhd", "vmatlovhd", "matl_cost", "lbr_cost", "fovhd_cost", "vovhd_cost", "out_cost", "a_matl_cost", "a_lbr_cost", "a_fovhd_cost", "a_vovhd_cost", "a_out_cost", "matl_cost_conv", "lbr_cost_conv", "fovhd_cost_conv", "vovhd_cost_conv", "out_cost_conv", "NoteExistsFlag", "RecordDate", "RowPointer", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "alt_group", "alt_group_rank", "planned_alternate", "new_sequence", "manufacturer_id", "manufacturer_item", "PP_matl_is_paper", "MO_formula_matl_weight_pct"],
"jobroute_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "job", "suffix", "oper_num", "wc", "setup_hrs_t", "setup_cost_t", "complete", "setup_hrs_v", "wip_amt", "qty_scrapped", "qty_received", "qty_moved", "qty_complete", "effect_date", "obs_date", "bflush_type", "run_basis_lbr", "run_basis_mch", "fixovhd_t_lbr", "fixovhd_t_mch", "varovhd_t_lbr", "varovhd_t_mch", "run_hrs_t_lbr", "run_hrs_t_mch", "run_hrs_v_lbr", "run_hrs_v_mch", "run_cost_t_lbr", "cntrl_point", "setup_rate", "efficiency", "fovhd_rate_mch", "vovhd_rate_mch", "run_rate_lbr", "varovhd_rate", "fixovhd_rate", "wip_matl_amt", "wip_lbr_amt", "wip_fovhd_amt", "wip_vovhd_amt", "wip_out_amt", "NoteExistsFlag", "RecordDate", "RowPointer", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "yield", "opm_consec_oper", "MO_shared", "MO_seconds_per_cycle", "MO_formula_matl_weight", "MO_formula_matl_weight_units"],
"location_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "loc", "description", "loc_type", "mrb_flag", "wc", "NoteExistsFlag", "RecordDate", "RowPointer", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow"],
"poitem_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "AUDIT_UID", "AUDIT_RecType", "AUDIT_TransId", "site_ref", "po_num", "po_line", "po_release", "item", "stat", "qty_ordered", "qty_received", "qty_rejected", "qty_voucher", "qty_returned", "item_cost", "ref_type", "ref_num", "ref_line_suf", "ref_release", "due_date", "rcvd_date", "vend_item", "root_job", "root_suf", "plan_cost", "voucher_cost", "non_inv_acct", "drop_ship_no", "drop_seq", "ship_addr", "promise_date", "release_date", "whse", "item_type", "cost_type", "comm_code", "trans_nat", "process_ind", "unit_weight", "delterm", "origin", "cons_num", "unit_mat_cost", "unit_duty_cost", "unit_freight_cost", "unit_brokerage_cost", "tax_code1", "tax_code2", "export_value", "ec_code", "transport", "req_num", "req_line", "u_m", "qty_ordered_conv", "item_cost_conv", "plan_cost_conv", "unit_mat_cost_conv", "unit_duty_cost_conv", "unit_freight_cost_conv", "unit_brokerage_cost_conv", "non_inv_acct_unit1", "non_inv_acct_unit2", "non_inv_acct_unit3", "non_inv_acct_unit4", "lc_override", "revision", "drawing_nbr", "po_vend_num", "NoteExistsFlag", "RecordDate", "RowPointer", "description", "CreatedBy", "UpdatedBy", "CreateDate", "InWorkflow", "expedited", "rcpt_rqmt", "unit_insurance_cost", "unit_insurance_cost_conv", "unit_loc_frt_cost", "unit_loc_frt_cost_conv", "trans_nat_2", "suppl_qty_conv_factor", "unlinked_xref", "due_date_day", "preassign_lots", "preassign_serials", "ipr_id", "ipr_seq", "manufacturer_id", "manufacturer_item", "fa_num", "fa_class", "dept"]
}
window.onload = function() {
var tableSel = document.getElementById("table");
var columnSel = document.getElementById("column");
var lookupSel = document.getElementById("lookup");
for (var x in data) {
tableSel.options[tableSel.options.length] = new Option(x, x);
}
table.onchange = function() {
columnSel.length = 1;
var z = data[this.value];
for (var i = 0; i < z.length; i++) {
columnSel.options[columnSel.options.length] = new Option(z[i], z[i]);
}
}
}
form {
display: table;
}
p {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
hideMe {
display: none;
}
<form action="pageToVisit">
<p>
<label for="table">Choose a table:</label>
<select name="table" id="table" required>
<option value="" selected="selected">Select a Table</option>
</select>
</p>
<br><br>
<p>
<label for="column">Column to Filter:</label>
<select name="column" id="column">
<option value="" selected="">Please Select a Table First</option>
</select>
</p>
<br><br>
<p id="hideme">
<label for="lookup">Lookup Value:</label>
<input type="text" id="lookup" name="lookup" value="" onchange="showDiv('hideMe', this)">
</p>
<br><br>
</form>
TIA for any and all advice!
(edited to include data variable in js)
2
Answers
You have a typo in the
id
of the paragraph containing the hidden input. It should beid="hideMe"
to match the CSS and the call toshowDiv()
.The call to
showDiv()
shouldn’t be in theonchange
of the hidden input, it should be in the previous dropdown.The condition in
showDiv()
is backwards. It should show the element when the dropdown’s value is not empty.I’ve done that… if it’s would be useful..