Home/ Questions/Q 7539291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T07:20:35+00:00

I have a form with a Jquery plugin requirement that creates a form input

  • 0

I have a form with a Jquery plugin requirement that creates a form input field with a type of Facebook-autocomplete kind of style:

<%= javascript_include_tag "form_prettify_library" %>

<div class="box">
  <ul id="first_form" class="tagit">
      <li class="prettify-new"></li>
  </ul>
    <%= form_for @brand do |f| %>
    <%= f.hidden_field :tag_list, :value => @brand.tags_from(current_user).join(", "),
                                  :id => "mytaglist" %>
    <%= f.submit "Add tags" %>
    <%= f.error_messages %>
    <% end %>
</div>

It works well, however without JavaScript the form doesn’t work because the form above only has a hidden_field and no visible entry field (the entry field is created by the plugin inside of the tags), and I need this to work without JavaScript on mobile devices. Is there any way to show the code above if JavaScript is loaded, otherwise the code below will be displayed if it isn’t?

<div class="box">
  <%= form_for @brand do |f| %>
    <%= f.label :tag_list, "Your tags" %>
    <%= f.text_field :tag_list, :value => @brand.all_tags_list %>
    <%= f.submit "Add tags" %>
  <% end %>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, use css to hide it by default, and add a class to the site when js is enabled

    html

    <body class="no_js">
<script type="text/javascript">
(function() {
   var body = document.getElementsByTagName("body")[0];
   body.className = body.className.replace(/\bno_js\b/, " js ")
}())
</script>

    css

    .no_js .jsForm,
.js .no_jsForm  {
   display:none;
}

.js .jsForm,
.no_js .no_jsForm  {
   display: block;
}
    • 0