Auto Populate Form Field based on another Form Field section

Showcase Tips and Tricks
1

Thanks to @kruizf201 for this code.

This code will fill in a name field based on the selection of a radio field option. It can be modified to suit other needs as well. NOTE: the auto fill field will be based on a static value (not dynamic).

  • Name Field
  • Radio Button Field
TB.render('component_X', function(data) {
	var firstNameHolder = $("#field_block_field_XX .t-form-name-first");
	var lastNameHolder = $("#field_block_field_XX .t-form-name-last");
	var radioButton = $("#field_block_field_XX");
	radioButton.on("change", "input[type='radio']", function() {
        var valueSelected = $(this).val();
        if(valueSelected == "Radio One") {
            firstNameHolder.val("Bob").change();
            lastNameHolder.val("Smith").change();
        } else if (valueSelected == "Radio Two"){
            firstNameHolder.val("John").change();
            lastNameHolder.val("Public").change();
        }
    });
});
  • Change the NameHolder field block number to your field’s number
  • Change the radioBlock field block number to your field’s number
  • Change the value of the valueSelected field to the radio button values of your field
  • To add more radio button field options copy and paste:
        } else if (valueSelected == "Radio Three"){
            firstNameHolder.val("Jane").change();
            lastNameHolder.val("Smith").change();
        }

ChatGPT explanation of what the code means for those that would like to learn more:

// TB.render is a method from the Tadabase specific framework.
// It renders a component and takes a callback function that is executed after the component is rendered.
TB.render('component_X', function(data) {

    // jQuery selector to find the first name input field within a specific container.
    var firstNameHolder = $("#field_block_field_136 .t-form-name-first");

    // jQuery selector to find the last name input field within the same container.
    var lastNameHolder = $("#field_block_field_XXX .t-form-name-last");

    // jQuery selector to find the radio button container.
    var radioButton = $("#field_block_field_XX");

    // Attaching an event listener for the 'change' event on any radio input inside the radioButton container.
    // This is an example of event delegation, allowing dynamically added elements to have event listeners.
    radioButton.on("change", "input[type='radio']", function() {
        // Getting the value of the changed radio button.
        var valueSelected = $(this).val();

        // Check if the selected radio button has the value "Radio One".
        if(valueSelected == "Radio One") {
            // If so, set the first name and last name fields to specific values and trigger their change events.
            firstNameHolder.val("Bob").change();
            lastNameHolder.val("Smith").change();
        } 
        // Check if the selected radio button has the value "Radio Two".
        else if (valueSelected == "Radio Two") {
            // If so, set the first name and last name fields to different specific values and trigger their change events.
            firstNameHolder.val("John").change();
            lastNameHolder.val("Public").change();
        }
    });
});
2 Likes