CODEWITHSUNDEEP
javascriptjqueryradio-group
Diin
Diin

Reputation: 585

update field on radio select

In a form I have a set of radio buttons with fixed donation amount and another field when a user can enter an amount of choice. For simplicity whilst processing the form I want a functionality where whatever is selected populates in the other field. I have the HTML/JS below:

$("input[id^='radio']").click(function() {
  $("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-1" value="10.00">
  <label for="amount-1">$10</label>
</div>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-2" value="15.00">
  <label for="amount-2">$15</label>
</div>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-3" value="20.00">
  <label for="amount-3">$20</label>
</div>
<div class="radio-select">
  <input type="radio" name="selamount" id="amount-3" value="20.00">
  <label for="amount-4">$25</label>
</div>

<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10"></div>
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">

I have also tried

<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">

But when the first one changes it does not change anymore on subsequent clicks.

Upvotes: 0

Views: 104

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

None of your IDs begin with "radio," which is what your [id^='radio'] selector is trying to match.

They begin with "amount" instead, so you should use:

$("input[id^='amount']").click(...

Also, here's a trick you can use with labels.

Instead of doing:

<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>

… you can put the input inside the label and avoid using the for attribute altogether:

<label>
  <input type="radio" name="selamount" id="amount-1" value="10.00">
  $10
</label>

Working Snippet

$("input[id^='amount']").click(function() { //CHANGE THIS
  $("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-1" value="10.00">
    $10
  </label>
</div>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-2" value="15.00">
    $15
  </label>
</div>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-3" value="20.00">
    $20
  </label>
</div>
<div class="radio-select">
  <label>
    <input type="radio" name="selamount" id="amount-3" value="20.00">
    $25
  </label>
</div>

<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10">
  <input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">

Upvotes: 3

Related Questions