根据所选值传递隐藏输入答案

【问题标题】：Passing hidden input based on selected value根据所选值传递隐藏输入
【发布时间】：2020-01-29 08:34:30
【问题描述】：

我正在尝试使用表单将几个隐藏值传递给 Servlet。问题是我只想在用户选择特定选项时传递它们。

<!-- FORM ABOVE -->

<input type="hidden" name="foo" id="foo" value="foo">
<input type="hidden" name="boo" id="boo" value="boo">

<fieldset id="selectProductSet">
  <div class="productListing">
    <input type="hidden" id="search" name="search" value="shoppingFor">
    <ul class="productList">
      <li data-value="A" onclick="boo();">product A</li>
      <li data-value="B" onclick="boo();">product B</li>
      <li data-value="C" onclick="boo();">product C</li>
    </ul>
    </input>
  </div>
</fieldset>

<!-- FORM BELOW -->

只有当用户在进行特定选择时提交表单时，我才能传递这些值？

【问题讨论】：

标签： javascript html forms servlets hidden-field

【解决方案1】：

您可以将代码放入您的boo 函数中，从这些输入中设置/删除disabled 属性（如果它们被禁用，它们将不会与表单一起提交）。这是一个输入可见的示例和相应的foo 函数（在Product B 上）：

function boo() {
  document.getElementById('foo').setAttribute('disabled', '');
  document.getElementById('boo').removeAttribute('disabled');
}

function foo() {
  document.getElementById('boo').setAttribute('disabled', '');
  document.getElementById('foo').removeAttribute('disabled');
}

<input name="foo" id="foo" value="foo">
<input name="boo" id="boo" value="boo">

<fieldset id="selectProductSet">
  <div class="productListing">
    <input type="hidden" id="search" name="search" value="shoppingFor">
    <ul class="productList">
      <li data-value="A" onclick="boo();">product A</li>
      <li data-value="B" onclick="foo();">product B</li>
      <li data-value="C" onclick="boo();">product C</li>
    </ul>
    </input>
  </div>
</fieldset>

【讨论】：

@A.J 不用担心。我很高兴能帮上忙。