使用 Javascript 将信息传递到隐藏字段的操作顺序

Question

我不经常使用 Javascript，这让我不知道从哪里开始。

目标是创建 JS，根据操作顺序根据其他字段值设置销售渠道隐藏字段值，如下所示：

操作顺序

1. 如果行业 = 洁净室，销售渠道 = ABC
2. 如果行业 = 医疗保健，销售渠道 = DEF
3. 如果员工人数 = 250+，销售渠道 = GHI
4. 如果多个位置为真，则销售渠道 = GHI
5. 所有其他人，销售渠道 = 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>

Answer 1

添加了对每个部分在代码中的作用的描述。试一试，然后分析它以了解它是如何工作的。

// 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>