Как включить кнопку только когда текстовое поле не пусто

0

Я работаю над приложением RoR. Я хочу, чтобы поиск btton был отключен, пока в поле поиска не появится что-то.

Я попробовал следующее:

<%if Voylla::Application.config.search_swiftype_enabled %>
<form>
<input type="text" id="st-search-input" class="st-search-input" />
</form>
<script type="text/javascript">
  var Swiftype = window.Swiftype || {};
  (function() {
    Swiftype.key = 'Lefxmsx2p9qdqxmxxqSR';
    Swiftype.inputElement = '#st-search-input';
    Swiftype.resultContainingElement = '#st-results-container';
    Swiftype.attachElement = '#st-search-input';
    Swiftype.renderStyle = "inline";

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = "//swiftype.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
  }());
</script>
<%elsif Voylla::Application.config.google_custom_search_enabled %>
  <div id='search-box'>
  <%= form_tag "/search", :method => :get, :id => "search-form" do %>
    <%= text_field_tag :q, params[:q], {:id => "search-text", :placeholder => "SEARCH FOR PRODUCTS"} %>
    <%= submit_tag "Go" %>
<script>
$(document).ready(function() {
    if($('#text_field').val() ==  "")
      $('#submitButtonId').attr('disabled', true);
      $('#text_field').keyup(function(){
        if($('#text_field').val() !=  "")
          $('#submitButtonId').attr('disabled', false);
        else
          $('#submitButtonId').attr('disabled', true);
      });
});
</script>
    <%end%>
  </div>
<%else%>
  <%= form_tag products_url, :method => :get do  %>
    <%= text_field_tag :keywords, params[:keywords], {:id => "productSearch", :placeholder => "Search"} %>
  <%end%>
<%end%>

Но кнопка поиска всегда включена, даже если поле поиска пуст

EDIT: код из браузера:

<div id="search-box">
<form></form>
<input id="search-text" name="q" placeholder="SEARCH FOR PRODUCTS" type="text" value>
<input name="Commit" type="submit" value="Go">
<script>
$('#search-text').on('keydown keyup change', function(){
    if($(this).val() == ''){
        $('#submitButtonId').attr('disabled', 'disabled');
    }else{
        $('#submitButtonId').removeAttr('disabled');
    }
}).trigger('change');
<script>
  • 0
    Можете ли вы сделать jsfiddle ?
Теги:

2 ответа

1
Лучший ответ

Попробуй это:

$('#search-text').on('keydown keyup change', function(){
    var $submit = $(this).nextAll('input[type="submit"]:eq(0)');
    if($(this).val() == ''){
        $submit.attr('disabled', 'disabled');
    }else{
        $submit.removeAttr('disabled');
    }
}).trigger('change');

Вот скрипка, чтобы вы могли ее протестировать: http://jsfiddle.net/merrifield69/hAHHZ/

Поделиться
  • 0
    Я попробовал это. Заменено text_field byt text_field_tag , но это не сработало так, как ожидалось. Кнопка все еще включена
  • 0
    Тогда что-то должно быть не так с вашим HTML. Не могли бы вы опубликовать сгенерированный HTML, чтобы я мог понять, в чем проблема? Кроме того, убедитесь, что идентификатор submitButtonId используется только один раз на этой странице.
Показать ещё 8 комментариев
0

Попробуйте этот путь

HTML

<input type="text" id="text_field"/>
<button type="submit" id="submitButtonId">Submit</button>

скрипт

    $(document).ready(function() {
      if($('#text_field').val() == "")
      $('#submitButtonId').attr('disabled', true);
      $('#text_field').keyup(function(){
        if($(this).val() != "")
          $('#submitButtonId').attr('disabled', false);
        else
          $('#submitButtonId').attr('disabled', true);
      });
   });

DEMO

Поделиться
  • 0
    Мой HTML совершенно другой, поэтому я не могу применить это. Будет ли #text_field_tag вместо #text?
  • 0
    Вы можете использовать #text_field

Ещё вопросы

Сообщество Overcoder
Наверх
Меню