如何仅当text_field不为空时启用按钮

我正在使用RoR应用程序。我想保持搜索禁用，直到在搜索框中输入内容。如何仅当text_field不为空时启用按钮

我试过如下：

<%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%>

但搜索按钮始终处于启用状态，甚至当搜索框为空

编辑：

<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>

来源

2013-12-11 nish

能否请您做一个[的jsfiddle] （http://jsfiddle.net）？ –

试试这个：

$('#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/

来源

2013-12-11 08:44:07

我试过这个。替换为'text_field' byt'text_field_tag'，但它没有按预期工作。该按钮仍然可用 – nish

然后，您的html一定有问题。你可以请你张贴你生成的HTML，所以我可以看到什么问题可能是？另外，请确保ID'submitButtonId'只在该页面上使用一次。 –

用html更新了问题 – nish

试试这个：从浏览器代码way

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

来源

2013-12-11 08:39:03

我的html完全不同，所以我无法应用这个。将使用'＃text_field_tag'代替#text工作？ – nish

你可以使用#text_field –

如何仅当text_field不为空时启用按钮

回答

相关问题