CODEWITHSUNDEEP
javascripthtmlformsservletshidden-field
A.J
A.J

Reputation: 1180

Passing hidden input based on selected value

I am trying to pass a couple of hidden values to a Servlet using a form. The issue is that I want to pass them only if user selects a specific option.

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

Is there a way for me to pass those values only if a user submits the form while while having a specific selection?

Upvotes: 0

Views: 123

Answers (1)

Nick
Nick

Reputation: 147206

You can put code in your boo function that sets/removes the disabled attribute from those inputs (if they are disabled, they will not be submitted with the form). Here's an example with the inputs visible and a corresponding foo function (on 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>

Upvotes: 1

Related Questions