如何实现多文本框联动触发事件？Oracle Apex BMI计算优化

Hey there! Let's tackle this problem step by step—since you're building a medical records prototype in Oracle APEX and want to trigger BMI calculation only when all three fields (height in feet, height in inches, weight) are filled, here's how you can fix your dynamic action and implement a pure JavaScript solution:

Option 1: Fix Oracle APEX Dynamic Action #

If you prefer sticking with APEX's built-in tools, you can adjust your existing dynamic action to only run when all three fields have values:

1. Create/Edit the Dynamic Action

   • Set the Event to Change, then add all three input fields (feet, inches, weight) as Triggering Elements.
   • Under Conditions, select JavaScript Expression and paste this check (replace PXX_ with your actual page item IDs):

     $v('PXX_HEIGHT_FEET') !== '' && $v('PXX_HEIGHT_INCHES') !== '' && $v('PXX_WEIGHT') !== '' && !isNaN(parseFloat($v('PXX_HEIGHT_FEET'))) && !isNaN(parseFloat($v('PXX_HEIGHT_INCHES'))) && !isNaN(parseFloat($v('PXX_WEIGHT')))
     

     This ensures all fields have valid numeric values before proceeding.

2. Add the BMI Calculation Action

   • Add a True Action of type Execute JavaScript Code, then paste your BMI logic:

     const feet = parseFloat($v('PXX_HEIGHT_FEET'));
     const inches = parseFloat($v('PXX_HEIGHT_INCHES'));
     const weight = parseFloat($v('PXX_WEIGHT'));
     
     // Convert height to meters (1ft = 0.3048m, 1in = 0.0254m)
     const heightInMeters = (feet * 0.3048) + (inches * 0.0254);
     // Calculate BMI (weight in kg / height in m²)
     const bmi = weight / Math.pow(heightInMeters, 2);
     
     // Update your BMI page item (replace PXX_BMI with your item ID)
     $s('PXX_BMI', bmi.toFixed(2));
     

Option 2: Pure JavaScript Multi-Field Trigger #

If you want full control with custom JS, add this code to your page's Function and Global Variable Declaration section:

// Core BMI calculation logic
function calculateBMI() {
  // Get references to your input fields (replace IDs with yours)
  const feetField = document.getElementById('PXX_HEIGHT_FEET');
  const inchesField = document.getElementById('PXX_HEIGHT_INCHES');
  const weightField = document.getElementById('PXX_WEIGHT');
  const bmiResultField = document.getElementById('PXX_BMI');

  // Parse values and validate
  const feet = parseFloat(feetField.value);
  const inches = parseFloat(inchesField.value);
  const weight = parseFloat(weightField.value);

  // Only calculate if all values are valid positive numbers
  if (!isNaN(feet) && feet > 0 && !isNaN(inches) && inches >= 0 && inches <= 11 && !isNaN(weight) && weight > 0) {
    const heightInMeters = (feet * 0.3048) + (inches * 0.0254);
    const bmi = weight / Math.pow(heightInMeters, 2);
    bmiResultField.value = bmi.toFixed(2);
  } else {
    // Clear BMI if any field is invalid/empty
    bmiResultField.value = '';
  }
}

// Bind event listeners to all three fields on page load
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('PXX_HEIGHT_FEET').addEventListener('input', calculateBMI);
  document.getElementById('PXX_HEIGHT_INCHES').addEventListener('input', calculateBMI);
  document.getElementById('PXX_WEIGHT').addEventListener('input', calculateBMI);
});

Key Notes: #

• Replace all PXX_ prefixes with your actual page item IDs (e.g., P100_HEIGHT_FEET).
• The JS solution adds extra validation (inches 0-11, positive values) which is useful for medical data—you can extend this further if needed.
• For both approaches, consider adding page item validations (via APEX's Validation section) to enforce input rules server-side as well.

内容的提问来源于stack exchange，提问作者fireside68