Displaying Cable Length in Feet and Meters in the Cable Configuration Form

The client requires that cable length be displayed in both feet and meters within the cable configuration form. The length will be entered and stored in feet, while its equivalent in meters should be displayed alongside but remain non-editable. The conversion formula used for this purpose is:

Length in Meters = Length in Feet ÷ 3.281

Implementation Details

1. Cable Length Input Field

• Users will enter the cable length in feet.
• The value in feet will be stored as the primary unit.

1. Cable Length Display in Meters

• The length in meters will be auto-calculated using the provided formula.
• The calculated meter value will be displayed next to the feet input field.

The meter field will be non-editable to ensure accuracy.

HTML Form Section:

<form id="patchCableForm">
    <!-- Cable Length Input -->
    <div>
        <label for="cableLengthFeet">Enter Cable Length (Ft) <span style="color: red;">*</span></label>
        <div class="cable-length-container">
            <input type="number" id="cableLengthFeet" name="cableLengthFeet" min="1" placeholder="Enter length in feet" data-action="addLength">
            <label for="cableLengthMeters" class="lengthMeter">Meters:</label>
            <input type="number" id="cableLengthMeters" name="cableLengthMeters" readonly>
        </div>
    </div>
    <button type="submit" data-action="formSubmission">Generate Patch Cable</button>
</form>

JavaScript Implementation:

addLength: function (event) {
    event.preventDefault();
    const form = document.getElementById('patchCableForm');
    const requiredFields = form.querySelectorAll("#patchCableForm input[id='cableLengthFeet']");
    var lengthInFeet;
    requiredFields.forEach((field) => {
        if (field.value.trim() != "") {
            lengthInFeet = field.value.trim();
        }
    });
    var lengthInMeter = lengthInFeet ? (lengthInFeet / 3.281).toFixed(4) : null;
    document.getElementById("cableLengthMeters").value = lengthInMeter;
}

Key Features and Benefits

• Automatic Calculation: The length in meters is dynamically updated when the user enters a value in feet.
• Non-Editable Meter Field: Ensures that users cannot modify the calculated meter value, preserving accuracy.
• User-Friendly Interface: The meter value is displayed next to the feet input for easy reference.

Conclusion

This enhancement successfully meets the client’s requirement by displaying cable length in both feet and meters while maintaining data integrity. The implementation ensures seamless user experience by automatically converting and displaying the length in meters without additional user input.