CODEWITHSUNDEEP
javascripthtml
Matt Sach
Matt Sach

Reputation: 1170

Replace content of a <label>, except the contained form control

I am integrating with Janrain's Capture widget system, and the client wishes to customise many of the standard form labels presented by the Janrain code. It would be possible for these customisations to be made by Janrain, but that requires going through their development queue (which will take too long).

Their recommendation was to trap a a javascript event (onCaptureRenderComplete), and make the necessary changes in code (which feels hacky, but is the officially recommended option).

I need to change the text of a label associated with a checkbox, where the checkbox itself is nested inside the label. For other labels we've either simply rewritten the innerHTML, or used a string replace to alter just a few words. The label I'm dealing with looks like:

<label for="capture_traditionalRegistration_traditionalRegistration_privacyPolicy">
    <input type="checkbox" name="traditionalRegistration_privacyPolicy" class="capture_traditionalRegistration_privacyPolicy capture_input_checkbox" value="true" data-capturefield="traditionalRegistration_privacyPolicy" id="capture_traditionalRegistration_traditionalRegistration_privacyPolicy">
    I understand that by signing up or using the site, I agree to the
    <a target="_blank" href="/about-freesat/privacy-policy">Privacy Policy</a> and
    <a target="_blank" href="/about-freesat/terms">Terms of Service</a>
</label>

In this case, it's terribly fragile to have the entire chunk of HTML after the checkbox hard-coded in a string so that it can be replaced. What I'd like to do is just do a blanket replacement of everything - but I can't replace the checkbox as it has event handlers attached.

I have jQuery available. Any suggestions on how to remove or replace just the part after the checkbox?

Upvotes: 3

Views: 113

Answers (1)

Haneev
Haneev

Reputation: 775

You can do something like this: First detach the input, and then empty the label and adding the input again.

var inp = $('label').find('input').detach();
$('label').empty().append(inp);

Upvotes: 6

Related Questions