CODEWITHSUNDEEP
jquery
MG1
MG1

Reputation: 1687

Enable input based on corresponding radio button

I have a form with multiple options for Amounts to be sent to CC processing. I'd like the user to select the type of payment which then activates the amount input fields. I'm attempting to do this by setting the id of the radio button to correspond to the amount input field. How can I enable the input Amount field based on the radio button selected?

HTML

<input name="doantion-type" id="general" type="radio" value="General" />
<input name="doantion-type" id="occasion" type="radio" value="Occasion" />
<input name="doantion-type" id="building" type="radio" value="Building" />
<input name="doantion-type" id="program" type="radio" value="Program" />

<input id="general" autocomplete="off" class="input required" type="text" size="30" name="Amount">

<input id="occasion" autocomplete="off" class="input required" type="text" size="30" name="Amount">
<input id="building" type="hidden" value="1000" name="Amount">
<input id="program" type="hidden" value="180" name="Amount">

jQuery 

$("input[name=Amount]").prop('disabled', true);

$('input[name=doantion-type]:radio').click(function() {
var selectedDonation = '#' + $(this).attr('id');
//alert(selectedDonation);
$(selectedDonation).prop('disabled', false);

});

Upvotes: 0

Views: 311

Answers (3)

Musa
Musa

Reputation: 97717

Since ids should be unique you'll have to use some other means to get the value, I suggest data attributes

<input name="doantion-type" id="general" data-id="general-amount" type="radio" value="General" />
<input name="doantion-type" id="occasion" data-id="occasion-amount" type="radio" value="Occasion" />
<input name="doantion-type" id="building" data-id="building-amount" type="radio" value="Building" />
<input name="doantion-type" id="program" data-id="program-amount" type="radio" value="Program" />

<input id="general" autocomplete="off" class="input required" type="text" size="30" name="Amount">

<input id="occasion-amount" autocomplete="off" class="input required" type="text" size="30" name="Amount">
<input id="building-amount" type="hidden" value="1000" name="Amount">
<input id="program-amount" type="hidden" value="180" name="Amount">

$('input[name=doantion-type]:radio').click(function() {
    var selectedDonation = '#' + $(this).data('id');
    //alert(selectedDonation);
    $("input[name=Amount]").prop('disabled', true);
    $(selectedDonation).prop('disabled', false);

});

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92983

You can't (or at least shouldn't) do it this way, because IDs are supposed to be unique. Furthermore, the hidden inputs will be submitted with the form whether they're visible or not.

Try something like this. Note, however, that the numbers can be altered by the user and this technique should NOT be used if security is important. Instead, the value for "Amount" should be set server-side if "building" or "program" are selected.

http://jsfiddle.net/mblase75/d2Lcd/

HTML:

General 
<input name="donation-type" data-amount="" id="general" type="radio" value="General" />
Occasion
<input name="donation-type" data-amount="" id="occasion" type="radio" value="Occasion" />
Building
<input name="donation-type" data-amount="1000" id="building" type="radio" value="Building" />
Program
<input name="donation-type" data-amount="180" id="program" type="radio" value="Program" />

<br>
Amount:
<input autocomplete="off" id="amount" class="input required" type="text" size="30" name="Amount">

JS:

$('input[name=donation-type]:radio').change(function () {
    var amt = $(this).data('amount'); // from the data-amount attribute
    $('#amount').val(amt).prop('disabled',!!amt); // !! converts to Boolean
});

http://api.jquery.com/data

Upvotes: 1

palaѕн
palaѕн

Reputation: 73966

Try this:

$("input[name=Amount]").prop('disabled', true);

$('input:radio[name=doantion-type]').change(function () {
    $("input[name=Amount]").prop('disabled', true);
    var selectedDonation = '#' + $(this).attr('id') + '2';
    $(selectedDonation).prop('disabled', false);
});
  • Issue is you are using same id for both the radio & the text input.
  • Please always use unique id in HTML DOM.

FIDDLE

Upvotes: 3

Related Questions