Order of operations to pass information to a hidden field using Javascript-CodePudding

I don't use Javascript a lot and this has me stumped on where to start.

Goal is to create JS that sets the Sales Channel Hidden field value based on other field values per the order of operations as follows:

Order of operations

If Industry = Cleanroom, Sales Channel = ABC
If Industry = Healthcare, Sales Channel = DEF
If # of Employees = 250 , Sales Channel = GHI
If Multiple Location is True, Sales Channel = GHI
All others, Sales Channel = JK

<form>
  <p class="FormIndustry pd-radio required">
    <label class="field-label" for="13039">Industry</label>
    <span class="value"> <span>
  <input type="radio" name="industryname[]" id="47773" value="47773" onchange="" />
  <label class="inline" for="47773">Cleanroom</label>
  </span> <span>
  <input type="radio" name="industryname[]" id="47777" value="47777" onchange="">
  <label class="inline" for="47777">Healthcare</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47779" value="47779" onchange="">
  <label class="inline" for="47779">Manufacturing</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47781" value="47781" onchange="">
  <label class="inline" for="47781">Restaurant / Bar</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47783" value="47783" onchange="">
  <label class="inline" for="47783">Retail</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47785" value="47785" onchange="">
  <label class="inline" for="47785">Other</label>
  </span></span>
  </p>
  <p class="FormEmployees pd-radio required">
    <label class="field-label" for="numberemp">Number of Employees</label>
    <span class="value"><span>
  <input type="radio" name="numberemp[]" id="47765" value="47765" onchange="">
  <label class="inline" for="47765">1-99</label>
  </span><span>
  <input type="radio" name="numberemp[]" id="47767" value="47767" onchange="">
  <label class="inline" for="47767">100-249</label>
  </span><span>
  <input type="radio" name="numberemp[]" id="47769" value="47769" onchange="">
  <label class="inline" for="47769">250 </label>
  </span></span>
  </p>
  <p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio">
    <label class="field-label" for="13011">We Have Multiple Locations</label>
    <span class="value"><span>
  <input type="radio" name="13011[]" id="47787" value="47787" onchange="">
  <label class="inline" for="47787">Yes</label>
  </span><span>
  <input type="radio" name="13011[]" id="147789" value="47789" onchange="">
  <label class="inline" for="47789">No</label>
  </span></span>
  </p>
  <p class="form-field  Sales_Channel pd-hidden  hidden">
    <label>Sales Channel Hidden </label>
    <input type="text" name="hidden" id="14592" value="" />
  </p>
</form>

CodePudding user response：

Added a description of what each part does within the code. Try it and then analyze it to understand how it is working.

// First we should define the state so we can store it later on.
const state = {
  industry: null,
  numberEmp: null,
  multipleLocations: null
};

// Get the hidden user input. The attribute name is used as a
// selector but the id attribute would be better, keep that in mind.
const salesChannelInput = document.querySelector('[name="hidden"]');

// Then we setup listeners for all 3 input groups and when one of them
// changes, we store it in the previously created state.
// Also we run a function called 'selectSalesChannel' which will
// apply the correct value to the hidden sales channel input.
const industryInputs = document.querySelectorAll('[name="industryname[]"]');
industryInputs.forEach(input => {
  input.addEventListener('input', event => {
    state.industry = event.target.value;
    selectSalesChannel(salesChannelInput, state.industry, state.numberEmp, state.multipleLocations);
  });
});

const numberEmpInputs = document.querySelectorAll('[name="numberemp[]"]');
numberEmpInputs.forEach(input => {
  input.addEventListener('input', event => {
    state.numberEmp = event.target.value;
    selectSalesChannel(salesChannelInput, state.industry, state.numberEmp, state.multipleLocations);
  });
});

const multipleLocationsInputs = document.querySelectorAll('[name="13011[]"]');
multipleLocationsInputs.forEach(input => {
  input.addEventListener('input', event => {
    state.multipleLocations = event.target.value;
    selectSalesChannel(salesChannelInput, state.industry, state.numberEmp, state.multipleLocations);
  });
});

// Function with your logic, any mistake to the logic, should be
// changed here.
// Note: We are comparing with strings and not numbers, this is important.
function selectSalesChannel(salesInput, industry, numOfEmployees, multipleLocations) {
  if (industry === '47773') {
    salesInput.value = 'ABC';
  }
  else if (industry === '47777') {
    salesInput.value = 'DEF';
  }
  else if (numOfEmployees === '47769' || multipleLocations === '47787') {
    salesInput.value = 'GHI';
  }
  else {
    salesInput.value = 'JK';
  }
}

<form>
  <p class="FormIndustry pd-radio required">
    <label class="field-label" for="13039">Industry</label>
    <span class="value"> <span>
  <input type="radio" name="industryname[]" id="47773" value="47773" onchange="" />
  <label class="inline" for="47773">Cleanroom</label>
  </span> <span>
  <input type="radio" name="industryname[]" id="47777" value="47777" onchange="">
  <label class="inline" for="47777">Healthcare</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47779" value="47779" onchange="">
  <label class="inline" for="47779">Manufacturing</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47781" value="47781" onchange="">
  <label class="inline" for="47781">Restaurant / Bar</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47783" value="47783" onchange="">
  <label class="inline" for="47783">Retail</label>
  </span><span>
  <input type="radio" name="industryname[]" id="47785" value="47785" onchange="">
  <label class="inline" for="47785">Other</label>
  </span></span>
  </p>
  <p class="FormEmployees pd-radio required">
    <label class="field-label" for="numberemp">Number of Employees</label>
    <span class="value"><span>
  <input type="radio" name="numberemp[]" id="47765" value="47765" onchange="">
  <label class="inline" for="47765">1-99</label>
  </span><span>
  <input type="radio" name="numberemp[]" id="47767" value="47767" onchange="">
  <label class="inline" for="47767">100-249</label>
  </span><span>
  <input type="radio" name="numberemp[]" id="47769" value="47769" onchange="">
  <label class="inline" for="47769">250 </label>
  </span></span>
  </p>
  <p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio">
    <label class="field-label" for="13011">We Have Multiple Locations</label>
    <span class="value"><span>
  <input type="radio" name="13011[]" id="47787" value="47787" onchange="">
  <label class="inline" for="47787">Yes</label>
  </span><span>
  <input type="radio" name="13011[]" id="147789" value="47789" onchange="">
  <label class="inline" for="47789">No</label>
  </span></span>
  </p>
  <p class="form-field  Sales_Channel pd-hidden  hidden">
    <label>Sales Channel Hidden </label>
    <input type="text" name="hidden" id="14592" value="" />
  </p>
</form>