CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Marco Herrarte
Marco Herrarte

Reputation: 1620

How to transform my simple input into input group bootstrap with jquery

It is possible to transform my simply input into a input-group bootstrap like this with jquery:

input

To create this input i use:

<div class='input-group date' id='ff'>
  <input type='text' class="form-control" name="end_date" id="ed" required      placeholder="Select date"/>
  <span class="input-group-addon add-on"><span class="fa fa-calendar"></span></span>
</div>

I need to transform the input cause it has been generated before and it is simply input with and id

Upvotes: 0

Views: 595

Answers (2)

Nicolai
Nicolai

Reputation: 1953

Example in jSFiddle:

HTML:

<input type='text' class="form-control" name="end_date" id="ed" required="" placeholder="Select date" />

JavaScript:

var $input = $("#ed");
var $inputGroup=$("<div/>").addClass("input-group date").attr("id","ff");
$inputGroup.append($input.clone());
$inputGroup.append("<span class='input-group-addon add-on'><span class='fa fa-calendar'></span></span>");
$input.replaceWith($inputGroup);

But I don't like the html in javascript code, I prefer using templates like unserscore.js template. In that case code will be like the following:

HTML:

<input type='text' class="form-control" name="end_date" id="ed" required="" placeholder="Select date" />
<script type="text/template" id="inputGroupTemplate">
  <div class='input-group date' id='<%=divId%>'>
    <%=inputHTML%>
    <span class="input-group-addon add-on"><span class="<%=iconClass%>"></span></span>
  </div>
</script>

JavaScript:

var template= _.template($("#inputGroupTemplate").html());
var $input = $("#ed");
$input.replaceWith(template({divId:"ff",iconClass:"fa fa-calendar",inputHTML:$input.clone()}));

Upvotes: 0

Jonathan Carter
Jonathan Carter

Reputation: 231

I am assuming you have a standard input to start with like:

    <input type="text" id="ed" />

You can use jQuery to manipulate the DOM like so:

    var txtbox = $("#ed"); //target your input
    txtbox.wrap( "<div class='input-group date' id='ff'></div>" ); //wrap it with input group
    txtbox.after("<span class='input-group-addon add-on'><span class='fa fa-calendar'></span></span>"); //add spans after the input
    //then specify attributes of the text field
    txtbox.addClass("form-control");
    txtbox.attr("name", "end_date").attr("placeholder", "Select date");
    txtbox.prop("required", true);

Upvotes: 1

Related Questions