Add Bootstrap Glyphicon to Right Side of Form Input via Coffeescript using Simple_Form in Rails

Question

I'm trying to add a bootstrap glyphicon to the right side of a form input using simple_form within rails.

This link shows the rendered result of what I am trying to get here (specifically, the glyphicon-remove which is to the right of the input): http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal_all&stacked=h

I know it has to have a span, and then the classes glyphicon glyphicon-remove within that span. I got the info from this site: http://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp

I'm trying to do this in coffeescript. Coffee script code so far that doesn't work:

$('#serve_dev_sub_email').add("span").addClass("glyphicon glyphicon-remove")

I also attempted this code, but it didn't work either:

$('#serv_dev_sub_email').add("span")
$('#serv_dev_sub_email').first().addClass("glyphicon glyphicon-remove")

Here is the _form partial:

<%= simple_form_for(@serv_dev_sub) do |f| %>

  <div class="form-inputs">
    <div>
        <%= f.input :email, placeholder: "myemail@domain.com" %>
    </div>

  </div>

  <div class="form-actions">
      <%= f.button :submit %>
  </div>
<% end %>

Answer 1

您需要在#input-element和

$('#input-element span:first-child').addClass("glyphicon glyphicon-remove")

Answer 2

here's what i did:

<div class="form-inputs">
  <%= f.input :email, :class => 'form-control', :placeholder => 'myemail@domain.com' %>
  <%=link_to '',root_path,:class => 'glyphicon glyphicon-remove clear-email',:onclick => "$('.search-box').val('');"%>
</div>