Question

I have two radio buttons generated by drupal. I also have a textedit box and a button. The user is supposed to enter its id and when the user clicks on the button, there will be an ajax request that will fetch two values from a database. I want those two values to be shown in the radio button labels.

The generated code by Drupal for the radio buttons looks like this:

<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" />
    Item 1
    </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" />
    Item 2
    </label>
  </div>
</div>

If I do:

alert($("label[for=edit-new-amount-no-cost],#edit-new-amount-no-cost").text());

it will output “Item 1” so I tried changing the text using:

$("label[for=edit-new-amount-no-cost],#edit-new-amount-no-cost").text(values[1]);

However, then I propably changed the entire label content because the radio button next to “Item 1” disappear 🙁

Any ideas? I want to change “Item 1” and “Item 2” to specific values from a ajax request. I don’t want to change the entire label content because then the radio button will disappear.

Kind regards,
Samuel

Answer 1

try this

var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("mylabel");

fiddle example : http://jsfiddle.net/gAypv/1/