CODEWITHSUNDEEP
javascriptjquery
MChan
MChan

Reputation: 7162

JQuery update input value based on another form input

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>

Upvotes: 0

Views: 4888

Answers (4)

TechStone
TechStone

Reputation: 141

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

Upvotes: 1

Tuhin
Tuhin

Reputation: 3373

<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());
    });

});

Upvotes: 1

Gaurang s
Gaurang s

Reputation: 832

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

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128781

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.)

Upvotes: 3

Related Questions