简体   繁体   English

每当输入文本字段发生变化时,如何在RoR中提交表单?

[英]How can I submit a form in RoR whenever an input textfield changes?

I am using Ruby on Rails. 我正在使用Ruby on Rails。

I want to create a filter field on a page such that whenever the input field's value changes I filter a list shown below via ajax. 我想在页面上创建一个过滤器字段,这样每当输入字段的值发生变化时,我都会通过ajax过滤下面显示的列表。 (Exaclty like the Users search works in Stackoverflow) (例如用户搜索在Stackoverflow中工作)

For now, I made it run with a form_remote_tag containing a text_field_tag and a submit_tag, and it filters my list when I push the submit button. 现在,我使用包含text_field_tag和submit_tag的form_remote_tag运行它,当我按下提交按钮时它会过滤我的列表。 I would like to remove the submit button and execute the filtering every time the value of the text input changes. 我想删除提交按钮,并在每次文本输入的值发生变化时执行过滤。 How can I trigger a form submit every time the text in an input field changes? 每当输入字段中的文本发生更改时,如何触发表单提交?

I tried inside my form 我试过我的表格

<%= text_field_tag (:filter), "" , :onchange => "alert ('This is a Javascript Alert')" %>

just to get the onchange event, but somehow not even this alert appears... 只是为了得到onchange事件,但不知何故甚至没有这个警报出现......

Use observe_field helper with a single input, like the code bellow: observe_field助手与单个输入一起使用,如下面的代码:

<%= text_field_tag 'filter' %>
<%= observe_field 'filter', 
    :url => {:controller => 'your_controller', :action => 'filter'},
    :frequency => 1.2,
    :update => 'results',
    :with => "'typed_filter=' + $('filter').value" %>

And then just write a controller that, given a param named 'typed_filter', renders the results, wich will be shown in the element with id 'results' (probably a div). 然后编写一个控制器,给定一个名为'typed_filter'的参数,渲染结果,它将显示在id为'results'的元素中(可能是div)。

In general for text inputs you want to use onkeypress, onkeyup, onkeydown events, not onchange for this type of autocomplete. 通常,对于文本输入,您希望使用onkeypress,onkeyup,onkeydown事件,而不是onchange用于此类自动完成。 @Ricardo Acras solution is far better than writing your own, but I thought you might want to know that onchange doesn't work because it doesn't fire until you navigate out of the text input (and the text has been changed). @Ricardo Acras解决方案比编写自己的解决方案要好得多,但我想你可能想知道onchange不起作用,因为它不会触发,直到你导出文本输入(并且文本已被更改)。

I find that w3schools.com is a great resource for this kind of info. 我发现w3schools.com是这类信息的绝佳资源。 Here is there page on Javascript HTML DOM. 这里有关于Javascript HTML DOM的页面。 And here is the event reference. 是事件参考。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在Chrome浏览器控制台中提交带有输入值的表单? - How can I submit a form with input values in Chrome browser console? 如何在表单中提交禁用输入元素? - How can I submit disable input element in a form? 我如何将输入放入textField? - How can i put the input up into the textField? 如何提交表格? - How can I submit the form? 当我使用JavaScript在表单中输入错误的类型信息时,如何停止表单提交? - How can I stop the form submit when I input wrong type info in the form using javascript? 使用jQuery提交任何输入更改的表单 - Submit form on any input changes with jQuery 我如何制作一个输入类型的提交按钮,填写表格后才能使用 - How can i make a input type submit button that will just can used after filling up the form 如何使用Enter键将项目添加到输入中,并且仅在单击按钮时才提交表单? - How can I add items to an input using the enter key and only submit the form when i click a button? 如何将文件 object 转换为填充的文件输入,以便我可以通过表单提交? - How do I convert a file object to a populated file input so I can submit via form? RoR如何使用:remote =&gt; true提交表单然后执行javascript代码 - RoR how to submit form with :remote=>true and then execute javascript code
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM