JavaScript How I can adjust the string output in JavaScript and give a sequence

[irfanjamal]

I need help, I am using Javascript code to detect Radios, TextInputs and Text Area fields and push the detetcted values from field to a sequence in a input field. I've given each field a id with sequence, name1, name2, name3, name4, name5, name6, name7, name8, name8, name10, and name11 and the field id where string is pushied is sc_tgenerator_form_field_prompt_text. I have some code, and wondering if its possible to adjust the sequence of final string that is pushed in sc_tgenerator_form_field_prompt_text
I've tried this code, and this is working. it shows radios values sequencely but it shows all textinputs and textareas at last of string. its not correct sequence correct sequence is the name 1, 2, 4, 5, 9 are radios and name 3, 6, 7 8 are text boxes, and 10 and 11 are text areas Here is code

// Select all radio buttons from the nine forms
const radios = document.querySelectorAll('input[type="radio"]');

// Select the input field where you want to display the generated string
const inputField = document.querySelector('.sc_tgenerator_form_field_inner input[type="text"]');

// Store text input values separately
let textInputValues = {};

// Function to update the input field based on selected radio options
var defaultTextGlobal;
var counter = 0;

function updateInputField() {
    if (counter == 0) {
        defaultTextGlobal = jQuery('.sc_tgenerator_form_field_prompt_text').val() + ',';
    }

    let selectedOptions = [];
    radios.forEach(radio => {
        if (radio.checked) {
            selectedOptions.push(radio.value);
        }
    });

    // Include text input values in the selected options
    Object.keys(textInputValues).forEach(key => {
        if (textInputValues[key].trim() !== '') {
            selectedOptions.push(textInputValues[key].trim());
        }
    });

    counter = counter + 1;
    inputField.value = defaultTextGlobal + ' ' + generateString(selectedOptions);
}

// Generate the string with the desired format
function generateString(options) {
    if (options.length === 0) {
        return '';
    }
    let result = options[0] + ' of ';
    if (options.length > 1) {
        result += options.slice(1).join(', ');
    }
    result = result.replace('Do not include of ', '');
    result = result.replace('Do not include', '');
    result = result.replace('Do not include of,', '');
    result = result.replace('Do not include,', '');

    return result;
}

// Add event listeners to all radio buttons to listen for changes
radios.forEach(radio => {
    radio.addEventListener('change', updateInputField);
});

// jQuery for text inputs and text areas
jQuery(document).ready(function ($) {
    // Select text inputs and text areas and add input event listener
    $('#form-field-name3, #form-field-name6, #form-field-name7, #form-field-name8, #form-field-name10, #form-field-name11').on('input', function () {
        textInputValues[this.id] = $(this).val(); // Store text input values
        updateInputField(); // Update the input field
    });
});

 

[JosiahMaybe]

I think what you could do instead of making one string, make an array of strings with what you desire for each thing then get desired format by concatenating based on which should be where based on order you get them in. Maybe you can keep radios foreach where it is with that but I would have it when jQuery ready HTML before other things. You can use .push and .unshift if you have a dynamic number of them. X E.