Using javascript to automatically create input-group from Bootstrap 3

Question

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.

Sebsemillia · Accepted Answer · 2014-12-03 21:12:57Z

2

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

edited Dec 3, 2014 at 21:12

answered Dec 3, 2014 at 20:58

Sebsemillia

9,4863 gold badges58 silver badges72 bronze badges

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

5 Comments

Danny Rancher Over a year ago

This does work. Thank you :) but my extra * is not attached to the original input box. Any ideas? jsfiddle.net/BEC7N/48

Sebsemillia Over a year ago

Just run your $('[data-val-required]').after(' <span class="required-indicator">*</span>'); after the other two lines. If this is what you mean?

Danny Rancher Over a year ago

I've updated my comment with a jsfiddle illustrating the problem.

Sebsemillia Over a year ago

As well you need to add the class form-control to your input if you want to use bootstrap styles.

Danny Rancher Over a year ago

I solved my design issues by putting the * before the textbox instead of after. Thank you both.

Tomanow · Accepted Answer · 2014-12-03 20:58:01Z

2

Use .wrap()

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

answered Dec 3, 2014 at 20:58

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

3 Comments

Danny Rancher Over a year ago

This does work. Thank you :) but my extra * is not attached to the original input box. Any ideas? jsfiddle.net/BEC7N/48

Tomanow Over a year ago

Can you post desired output?

Danny Rancher Over a year ago

I solved my design issues by putting the * before the textbox instead of after. Thank you both.

Collectives™ on Stack Overflow

Using javascript to automatically create input-group from Bootstrap 3

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related