I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks

 <form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
  <div>
    <fieldset>
      <input id="name" type="text" required placeholder="Client Name">
      ...
      ...
      <input type="hidden" name="itemValue" value="">
      ...
      <div>
      <div>
        <label class="label_radio" for="item1">
          <span class="labelText">$5</span>
          <input type="radio" id="item1" name="item1" value="5"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item2">
          <span class="labelText">$10</span>
          <input type="radio" id="item2" name="item2" value="10"/>
        </label>
      </div>          
      <div>
        <label class="label_radio" for="item3">
          <span class="labelText">$15</span>
          <input type="radio" id="item3" name="item3" value="15"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item4">
          <span class="labelText">$20</span>
          <input type="radio" id="item4" name="item4" value="20"/>
        </label>
      </div>
  </div>
  ....
  ....
  </div>

 </form>

I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks

 <form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
  <div>
    <fieldset>
      <input id="name" type="text" required placeholder="Client Name">
      ...
      ...
      <input type="hidden" name="itemValue" value="">
      ...
      <div>
      <div>
        <label class="label_radio" for="item1">
          <span class="labelText">$5</span>
          <input type="radio" id="item1" name="item1" value="5"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item2">
          <span class="labelText">$10</span>
          <input type="radio" id="item2" name="item2" value="10"/>
        </label>
      </div>          
      <div>
        <label class="label_radio" for="item3">
          <span class="labelText">$15</span>
          <input type="radio" id="item3" name="item3" value="15"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item4">
          <span class="labelText">$20</span>
          <input type="radio" id="item4" name="item4" value="20"/>
        </label>
      </div>
  </div>
  ....
  ....
  </div>

 </form>

• javascript
• jquery

• Do you really need to do this? I don't want to bother you, it's just that it's not a very clean behaviour to link fields like this. If your radios have the same name, they all will represent the same value. – ngasull Commented Apr 25, 2014 at 8:41

4 Answers 4

Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:

<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/> 

Notice how these both have a name of "item"?

Once you've done that, you can use jQuery like this:

$('[name="item"]').on('change', function() {
    $('[name="itemValue"]').val($(this).val());
});

JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)

$("input[type=radio]").change(function () {
    if ($(this).prop(":checked")) {
        $('#yourId').val($(this).val())
    }
});

<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
  <div>
    <fieldset>
      <input id="name" type="text" required placeholder="Client Name">
      ...
      ...
      <input type="hidden" name="itemValue" value="">
      ...
      <div>
      <div>
        <label class="label_radio" for="item1">
          <span class="labelText">$5</span>
          <input type="radio" id="item1" name="item" value="5"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item2">
          <span class="labelText">$10</span>
          <input type="radio" id="item2" name="item" value="10"/>
        </label>
      </div>          
      <div>
        <label class="label_radio" for="item3">
          <span class="labelText">$15</span>
          <input type="radio" id="item3" name="item" value="15"/>
        </label>
      </div>
      <div>
        <label class="label_radio" for="item4">
          <span class="labelText">$20</span>
          <input type="radio" id="item4" name="item" value="20"/>
        </label>
      </div>
  </div>
  ....
  ....
  </div>

 </form>

JQuery>

$(function(){ 
    $("input[name='item']").change(function(){

        $("input[name='itemValue']").val($(this).val());
        alert($("input[name='itemValue']").val());
    });

});

        $('input:radio').change(function () {
            if (this.checked) {
               $('#hidfld').val($(this).val()));
            }
        });