CODEWITHSUNDEEP
javascriptjqueryhtml
user2596635
user2596635

Reputation: 381

Add value to input on radio click, and remove

I have a donate form where one of the options needs to be populated with a certain amount because its a fixed price point. I found and ran code that works fine to populate the input with the selection of a radio input, but I'd like it to be toggled in a way in that if I select another option, the populated amount will be removed. Is that possible?

Here is what I have working now:

$('input#yearCaring').on('change', function() {
  $('input[name="Amount"]').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="radio" name="In Honor/Memory Of" value="No" />
  <label>No Thanks</label>
  <br />
  <input type="radio" name="In Honor/Memory Of" id="yearCaring" value="100" />
  <label>Year of Caring</label>
  <br />
  <input type="radio" name="In Honor/Memory Of" value="In Memory" />
  <label>In Memory</label>
  <br />
  <input type="text" name="In Memory Note" style="display: none;" value="" />
  <input type="radio" name="In Honor/Memory Of" value="In Celebration" />
  <label>In Celebration</label>
  <br />
  <input type="text" name="In Celebration Note" style="display: none;" value="" />
</div>

<label>Amount (Canadian Dollars):</label>
<input type="text" name="Amount" required="" value="" />

How would I go about 'toggling' it?

fiddle

Upvotes: 1

Views: 89

Answers (2)

j08691
j08691

Reputation: 207900

You could check all the radio buttons and only apply the value if it matches a certain ID like so:

$('input:radio').change(function () {
    $('input[name="Amount"]').val( (this.id == 'yearCaring') ? this.value : '').prop('disabled',(this.id == 'yearCaring') ? true : false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <div>
        <input name="In Honor/Memory Of" type="radio" value="No" />
        <label>No Thanks</label>
        <br />
        <input name="In Honor/Memory Of" id="yearCaring" type="radio" value="100" />
        <label>Year of Caring</label>
        <br />
        <input name="In Honor/Memory Of" type="radio" value="In Memory" />
        <label>In Memory</label>
        <br />
        <input name="In Memory Note" style="display: none;" type="text" value="" />
        <input name="In Honor/Memory Of" type="radio" value="In Celebration" />
        <label>In Celebration</label>
        <br />
        <input name="In Celebration Note" style="display: none;" type="text" value="" />
    </div>
    <label>Amount (Canadian Dollars):</label>
    <input name="Amount" required="" type="text" value="" />
</form>

Upvotes: 3

ajaykumartak
ajaykumartak

Reputation: 776

Use something like this

$('input[name="In Honor/Memory Of"]').on('change', function() {
        $('input[name="Amount"]').val($(this).val());
});

Upvotes: 0

Related Questions