使用动态扩展文本框创建表单

I'm a complete noobie to Rails, HTML, CSS and Javascript.

我是Rails,HTML,CSS和Javascript的完整诺言。

I'm creating a form and I have two requirements:

我正在创建一个表单,我有两个要求:

1) I want text boxes that expand as the text expands in them (see: http://jsfiddle.net/gLhCk/5/)

1)我希望文本框随着文本的扩展而扩展(参见:http://jsfiddle.net/gLhCk/5/)

2.) I want those text boxes to be part of a form that updates objects in a database upon submission.

2.)我希望这些文本框成为提交时更新数据库中对象的表单的一部分。

I've gotten both these pieces working separately -- I can make a text box that expands but doesn't set values in a database, and I can make a form that DOES update a database but doesn't have text boxes that auto-expand.

我已经让这两个部分单独工作 - 我可以创建一个扩展但不在数据库中设置值的文本框,我可以制作一个表格来更新数据库,但没有自动的文本框扩大。

The difficulty is in combining these two things -- incorporating that Javascript text box into my form that's updating the database.

困难在于将这两件事结合起来 - 将Javascript文本框合并到我更新数据库的表单中。

This is my form that updates the database (with static text boxes):

这是我更新数据库的表单(使用静态文本框):

<div class="row">
  <div class="col-md-6 col-md-offset-3">

    <%= form_for(@user) do |f| %>

    <div class="row">
      <h3> Background </h3>

      <div class="row">
        <%= f.label :hobbs, 'Hobbies' %>
        <%= f.text_field :hobbies, class: 'fcdzfform-control' %>
      </div>
    </div> 
  </div>
</div>

And this is the Javascript code that works for an auto-expanding textbox:

这是适用于自动扩展文本框的Javascript代码:

<body>
    <textarea id="txtInput"></textarea>
<script src="jquery.autogrow-textarea" type="text/javascript"></script>

<script>
    $(#txtInput).autoGrow();
</script>

Like I said, I'm a complete noobie to all this stuff, but the impression I've gotten from browsing online is that I need to abandon the .erb form altogether and make a pure Javascript form, but I'm still failing to see how to have that Javascript form update the values in my database, like the above .erb form is doing.

就像我说的那样,我对所有这些东西都是完全无聊的,但是我从在线浏览中得到的印象是我需要完全抛弃.erb表格并制作一个纯粹的Javascript表单,但我仍然没有看看如何让Javascript表单更新我的数据库中的值,就像上面的.erb表单一样。

And advice / guidance? Thanks!

和建议/指导?谢谢!

1 个解决方案

#1

See: Unobtrusive Javascript.

请参阅:不显眼的Javascript。

You'll want to separate your Javascript from your html.erb. You can add this Javascript into a relevant file in your app/assets/javascripts folder. So, for example:

您需要将您的Javascript与html.erb分开。您可以将此Javascript添加到app / assets / javascripts文件夹中的相关文件中。所以,例如:

# app/assets/javascripts/sitewide/field-expand.js
(function(){
  $('.expand').autoGrow();
}());

# app/views/product/_form.html.erb
<div class="row">
  <div class="col-md-6 col-md-offset-3">

    <%= form_for(@user) do |f| %>

    <div class="row">
      <h3> Background </h3>

      <div class="row">
        <%= f.label :hobbs, 'Hobbies' %>
        <%= f.text_field :hobbies, class: 'fcdzfform-control expand' %>
      </div>
    </div> 
  </div>
</div>

I'm not able to test the above at the moment so, of course, it's untested. (Also make sure that your jQuery selectors are wrapped in quotation marks e.g. $('#txtInput') rather than $(#txtInput))

我现在无法测试上述内容,当然,这是未经测试的。 (还要确保你的jQuery选择器用引号括起来,例如$('#txtInput')而不是$(#txtInput))

#1