创建带有动态扩展文本框的表单

Question

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表单，但是我仍然无法像上面的.erb表格一样，了解如何让Javascript表格更新数据库中的值。

And advice / guidance? 有意见/指导吗？ Thanks! 谢谢！

Answer 1

See: Unobtrusive Javascript . 请参阅：简洁的Javascript 。

You'll want to separate your Javascript from your html.erb. 您需要将Javascript与html.erb分开。 You can add this Javascript into a relevant file in your app/assets/javascripts folder. 您可以将此Javascript添加到app/assets/javascripts文件夹中的相关文件中。 So, for example: 因此，例如：

# 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 eg $('#txtInput') rather than $(#txtInput) ) （还要确保您的jQuery选择$('#txtInput')引号引起来，例如$('#txtInput')而不是$(#txtInput) ）

创建带有动态扩展文本框的表单

问题描述

1 个解决方案

解决方案1
0 2016-08-16 14:15:01

创建带有动态扩展文本框的表单

问题描述

1 个解决方案

解决方案1 0 2016-08-16 14:15:01

解决方案1
0 2016-08-16 14:15:01