CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Danny Rancher
Danny Rancher

Reputation: 2005

Using javascript to automatically create input-group from Bootstrap 3

I'm trying to use javascript to automatically modify my input boxes to

<div class="input-group">
**<input type="text" class="form-control " placeholder="Text input">**
<span class="input-group-addon">*</span>
</div>

jsfiddle: http://jsfiddle.net/BEC7N/

The bold line is the line that already exists.

Below is my javascript attempt 

$('[data-val-required]').prepend(' <div class="input-group">');
$('[data-val-required]').append(' <span class="input-group-addon">*</span></div>');

But it doesn't work. Any ideas? Thank you.

Upvotes: 0

Views: 354

Answers (2)

Sebsemillia
Sebsemillia

Reputation: 9476

Change your code to this:

$('[data-val-required]').wrap(' <div class="input-group"></div>');
$('[data-val-required]').after(' <span class="input-group-addon">*</span>');
$('[data-val-required]').after(' <span class="required-indicator">*</span>');

Working Example

Upvotes: 2

Tomanow
Tomanow

Reputation: 7367

Use .wrap()

$('[data-val-required]').wrap('<div class="input-group" />');
$('[data-val-required]').after(' <span class="input-group-addon required-indicator">*</span>');

Upvotes: 2

Related Questions