Change text within input tag with Jquery

Question

<input type="checkbox" name="Rates" class="RatesClass">Rates & Fees<br />

How can I change that text Rates & Fees dynamically, using Jquery?

Thanks!

How about this one that doesn't have a class defined?

<input type="checkbox" id="Value" name="Values">Values<br />

EDIT:

<input type="checkbox" id="RatesFees" name="Rates" class="RatesClass">Rates & Fees<br />
<input type="checkbox" id="RatesOnly" name="RatesSpecific" class="RatesClass">Rates (All-In-Rate Only)<br />

From where? You don't need Jquery to change the text, using DOM functions: yourInput.NextSibling.Data='new text'; — Martin Hennings
– Martin Hennings, Commented Feb 28, 2011 at 15:48
Generally you would put a <label> around "Rates & Fees" and set its for attribute to "Rates" so that clicking on the text will also mark the checkbox. That would also give you the label tag to select on. — Endophage
– Endophage, Commented Feb 28, 2011 at 15:48
@Martin The text isn't a child of the input. It's a sibling and it doesn't have any tags around it so it wold be enclosed in the parent domnode of the input. — Endophage
– Endophage, Commented Feb 28, 2011 at 15:48
Generally you would also close the input tag at the end using /> — Simon H
– Simon H, Commented Feb 28, 2011 at 15:49
@Endophage Just saw and changed that, I mistook the <br /> for an end tag... — Martin Hennings
– Martin Hennings, Commented Feb 28, 2011 at 15:49

user113716 · Accepted Answer · 2011-02-28 15:47:17Z

2

The simplest will be to unwrap the input DOM element from the jQuery object, and use the native nextSibling property to get the text node, then update its value with data.

$('input.RatesClass')[0].nextSibling.data = "new value";

If you're in an event handler, you'd just use this to refer to the element.

$('input.RatesClass').change(function() {
    this.nextSibling.data = "new value";
});

answered Feb 28, 2011 at 15:47

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

slandau Over a year ago

What about doing it to an element that does not have a class defined, but everything else is defined the same way?

user113716 Over a year ago

@slandau: You need some way to select the input. The best way to select it will depend on the actual situation. If you're doing this in an event handler where the handler is on the <input>, then just use the this keyword, which will refer to the element. I'll update.

slandau Over a year ago

@patrick, check my edit. That input has no class defined and I cannot use the Id with the way you specified, nor the Jquery .text() property.

Endophage Over a year ago

@patrick dw The text isn't inside its own domnode so it isn't a sibling of the <input>. nextSibling would return the <br />

slandau Over a year ago

So there's no way to get at that?

|

Sam 山 · Accepted Answer · 2011-02-28 15:47:43Z

-1

you need to add an id to the input.

<input id="myInput" type="checkbox" name="Rates" class="RatesClass">Rates & Fees<br/>

Then in your jQuery.

$('#myInput').html('Here is some HTML')

answered Feb 28, 2011 at 15:47

Sam 山

42.9k36 gold badges116 silver badges158 bronze badges

1 Comment

artyom.stv Over a year ago

Where did you find innerHTML here?

Collectives™ on Stack Overflow

Change text within input tag with Jquery

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related