Question & Answer > View Question

Dynamically set the value of fieldB based on the input in fieldA

Confluence User - 25 Feb, 2024

Hi I am new to Joget. How to create a field whose value is based on the value that the user inputs in another field? For example, if the user input in fieldA is 10 then fieldB is A10, if fieldA is 20 then fieldB is B20. Where should I put client-side JavaScript? How could I do that? Is there any tutor? Thanks.

function validate() 
{
    var result = true;
    
    // Get the value of Field A
    var fieldAId = "fieldA"; // Replace with the actual ID of Field A
    var fieldA = FormUtil.getField(fieldAId);
    
    if (fieldA != null) {
        var fieldValue = $(fieldA).val();
        
        // Set the value of Field B based on the input in Field A
        var fieldBId = "fieldB"; // Replace with the actual ID of Field B
        var fieldB = FormUtil.getField(fieldBId);
        
        if (fieldB != null) {
            var fieldBValue;
            
            if (fieldValue === "10") {
                fieldBValue = "Aa";
            } else if (fieldValue === "20") {
                fieldBValue = "Bb";
            } else {
                fieldBValue = ""; // Set a default value or leave it empty if no conditions are met
            }
            
            $(fieldB).val(fieldBValue);
        }
    }
    
    return result;
}

forms

1

Confluence User •

28 Feb, 2024 •

confluenceUser •

•

confluenceUser •

Hi, your code is correct, you can insert them in a custom HTML with the code below. When you save the field A as 10, field B will show as Aa. If you want the values to be updated before form save, you might need to tweak the code to support onChange events for input field. Thanks!

<script type="text/javascript">
 $(function() {
  var result = true;
     
    // Get the value of Field A
    var fieldAId = "fieldA"; // Replace with the actual ID of Field A
    var fieldA = FormUtil.getField(fieldAId);
     
    if (fieldA != null) {
        var fieldValue = $(fieldA).val();
         
        // Set the value of Field B based on the input in Field A
        var fieldBId = "fieldB"; // Replace with the actual ID of Field B
        var fieldB = FormUtil.getField(fieldBId);
         
        if (fieldB != null) {
            var fieldBValue;
             
            if (fieldValue === "10") {
                fieldBValue = "Aa";
            } else if (fieldValue === "20") {
                fieldBValue = "Bb";
            } else {
                fieldBValue = ""; // Set a default value or leave it empty if no conditions are met
            }
             
            $(fieldB).val(fieldBValue);
        }
    }
     
    return result;
 });
</script>

1

CSV | Excel | XML | PDF

Your answer

Print

Dynamically set the value of fieldB based on the input in fieldA

1

RELATED QUESTIONS

Your answer

To answer a question you'll need an account.

1.builder-style-f3bdd471-3892-4317-aec9-dd353ce3f90e{color:#008C60 !important;}

RELATED QUESTIONS

Your answer.builder-style-4834452f-ec0f-4c80-8fec-ae9d4453a710{color:#008C60 !important; margin-left:10px !important;}

To answer a question you'll need an account.

1

Your answer