Question

I have three radio buttons and a textfield generated by drupal. What I want is for the first two buttons to hide the textfield when they are clicked on, and for the last radio button to show the textfield. (It is used to select an amount of money where the first two options are standard amounts and the last is a custom amount).

I have the following code generated by drupal:

<div class="form-item">
 <label>Jag uppgraderar till: </label>
 <div class="form-radios"><div class="form-item" id="edit-new-amount-no-cost-wrapper">
 <label class="option" for="edit-new-amount-no-cost"><input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost"   class="form-radio" /> Ingen kostnad</label>

</div>
<div class="form-item" id="edit-new-amount-rounded-wrapper">
 <label class="option" for="edit-new-amount-rounded"><input type="radio" id="edit-new-amount-rounded" name="new_amount" value="rounded"   class="form-radio" /> Avrundat upp</label>
</div>
<div class="form-item" id="edit-new-amount-other-wrapper">
 <label class="option" for="edit-new-amount-other"><input type="radio" id="edit-new-amount-other" name="new_amount" value="other"   class="form-radio" /> Annat belopp</label>
</div>
</div>
</div>
<div class="form-item" id="edit-other-amount-wrapper">
 <label for="edit-other-amount">Annat belopp:: </label>

 <input type="text" maxlength="128" name="other_amount" id="edit-other-amount" size="60" value="" class="form-text" />
</div>

I have tried using this in jquery:

// When clicking on 1st radio button
$('#edit-new-amount-no-cost').change(function(){
  $('#edit-other-amount-wrapper').hide();
});

// When clicking on 2nd radio button
$('#edit-new-amount-rounded-cost').change(function(){
  $('#edit-other-amount-wrapper').hide();
});

// When clicking on 3rd radio button
$('#edit-new-amount-other').change(function(){
  $('#edit-other-amount-wrapper').show();
});

That didn’t work. Only the 3rd button worked.

I also tried looping through them (and setting them all to hide the textfield, even the 3rd button):

$('input[type=radio]').each(function() { 
  alert('Id: '+$(this).attr('id')); // Just to see that the loop works
  $(this).change(function(){
    alert('Id: '+$(this).attr('id')); // Just to see that the function fires
    $('#edit-other-amount-wrapper').hide();
  });
});

That didn’t work either. I even added an alert box to know when the click function executes. The same goes here, it’s only when the 3rd button is clicked something happens.

So my problem is: I can’t set onclick (or onchange, I tried .change as well) for all radio buttons.

Do you have any ideas on what to do?

Kind regards,
Samuel

Answer 1

The ID of the second radio is wrong like kinakuta mentioned but also you might want to hide the text box by default. Have a look at the jsfiddle: http://jsfiddle.net/valanto/fShAv/