3

I need to change text to change. How can do it with jQuery?

<form name="loginform" id="loginform" action="" method="post">
    <p>
        <label for="user_login">text to change<br />
        <input type="text" name="log" value="" /></label>
    </p>
</form>
Igor Parra
  • 10,214
  • 10
  • 69
  • 101
  • Why not wrap the text in a span tag or close the label tag before the input? – danijar Aug 10 '12 at 22:08
  • No, see that inner label content includes more html content! – Igor Parra Aug 10 '12 at 22:08
  • @Mahn. This isn't the same question because Nomik's label contains another tag (the input). – danijar Aug 10 '12 at 22:09
  • @NomikOS any reason to have the input inside the label tag? afaik most people don't structure it that way. – Mahn Aug 10 '12 at 22:10
  • @sharethis I can't touch the already existing html! that's why I need do it dynamically. – Igor Parra Aug 10 '12 at 22:10
  • @mahn I work over the `wordpress` login form (not editable by me) – Igor Parra Aug 10 '12 at 22:12
  • @Mahn - I typically _do_ put my inputs inside their corresponding label elements, mainly because then you don't need the `for="someid"` attribute though also you can then use styles like `label { display : block; }` to put each field on its own line. – nnnnnn Aug 10 '12 at 22:12

5 Answers5

3
$("label[for='user_login']").text("New text");

See: Attribute Equals Selector [name="value"]

I see, a bit different, something like:

var splitElem = "<br>";
var saveHtml = $("label[for='user_login']").html().split(splitElem)[1];
var newText = "New Text"
var newHtml = newText + splitElem + saveHtml;
$("label[for='user_login']").html(newHtml);
artlung
  • 33,305
  • 16
  • 69
  • 121
  • 3
    this solution replace all inner label content (input included) – Igor Parra Aug 10 '12 at 22:06
  • Ah, my bad. I wasn't looking at your label close enough. In a fiddle I made the `
    ` actually turns into a `
    ` by my browser, so you'll need to tune that.     – artlung Aug 10 '12 at 22:13
  • Yes, I tried a similar solution before came here. The good of your final solution is that can be applied to text in various parts inside `label`. To take in account... THX.- – Igor Parra Aug 11 '12 at 00:43
2

To replace only the textnode :

var newText = 'some text',
    elm = $('label[for="user_login"]').children();
    $('label[for="user_login"]').html(newText).append(elm);

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
2

Give this a try then:

var newText = 'some text';
$('label[for="user_login"]').contents().filter(function() { return this.nodeType == 3; }).first().replaceWith(newText);​

Fiddle

I give no warranties on the performance of this though :) but otherwise it should do.

Mahn
  • 16,261
  • 16
  • 62
  • 78
  • @NomikOS I would advise against it to be honest; this is a solution if you absolutely, utterly cannot modify the markup, but otherwise a couple changes would allow faster selectors. – Mahn Aug 11 '12 at 01:04
  • Of course. In this case I replace the classic `Username` label in the `Wordpress` login form (/wp-login.php) for `Username or Email` (it can't be modified by any WP `hook`). Thanks again.- – Igor Parra Aug 11 '12 at 01:15
0

Wrap the text with a span tag.

<label for="user_login"><span>text to change<span><br />
<input type="text" name="log" value="" /></label>

$("label[for=user_login] > span").text("replaced text");
Marcelo De Zen
  • 9,439
  • 3
  • 37
  • 50
0

There would be a good solution because in HTML you can't select and approach text. You are only able to affect the surrounding tags.

There are some possibilities for you now.

  • close the label before the input tag and change the content of the hole label
  • wrap the text of the label in another tag like a span and affekt the span
  • don't change your HTML structure, use JS to get the content of the label and replace the blank text filtered by a regex before
  • in JS save the input element, replace the hole content of the label and then append the input element again
danijar
  • 32,406
  • 45
  • 166
  • 297
  • _"You are only able to affect the surrounding tags."_ - That's not true. Once you get a reference to the text node you can change it with [`nodeValue`](https://developer.mozilla.org/en-US/docs/DOM/Node.nodeValue). – nnnnnn Aug 10 '12 at 22:15
  • @nnnnnn. Didn't know that before. But how to get the reference then? – danijar Aug 10 '12 at 22:17
  • Well here's the first one I found with a search: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery – nnnnnn Aug 10 '12 at 22:32