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

问题描述：

我是Rails，HTML，CSS和Javascript的完全noobie。使用动态展开文本框创建表单

我创建一个形式，我有两个要求：

1）我想是扩大文本框的文本（请参阅扩展：http://jsfiddle.net/gLhCk/5/）

2）我希望这些文字框是提交时更新数据库中对象的表单的一部分。

我得到了这两个部分单独工作 - 我可以做一个文本框展开，但不设置数据库中的值，我可以做一个表格，更新数据库，但没有文字自动展开的框。

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

这是我的表单更新数据库（静态文本框）：

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

这是JavaScript代码，用于自动展开的文本框的工作原理：

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

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

就像我说，我是一个完全noobie所有这些东西，但我从网上浏览得到的印象是，我需要完全放弃.erb表格和make a pure Javascript form，但我仍然没有看到如何拥有该Javascript形式更新我的数据库中的值，如上面的.erb表单是在做。

并建议/指导？谢谢！

答

参见：Unobtrusive Javascript。

你会想要分开你的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>

我目前无法测试上述内容，所以当然未经测试。（也请确保你的jQuery选择器用引号括起来，例如$('#txtInput')而不是$(#txtInput)）

当我尝试这样做时，类似乎没有正确加载 - 我得到的行为没有展开文本框。这可能是因为我不太了解$（'。expand'）。autoGrow（）;部分。我是否仅仅使用该行中的文件创建文件，或者将该行添加到呈现可展开文本框的JavaScript文件中？ – ineedahero

我正在假设'.autoGrow（）'是一个调用DOM对象来调整它的大小的函数。考虑到这一点，它可以放在'app/assets/javascripts'中的自己的.js文件中。我忘了立即调用它，所以我编辑了我原来的回应。如果它仍然不起作用，我将不得不在家里做一个项目，以便在大约2个小时内尝试。 –

嗯。那么我从这里的第一个答案复制Javascript。 http://stackoverflow.com/questions/9784547/jquery-textarea-auto-grow-plugin-cross-browser-compatible因此，我只是创建了一个名为'jquery.autogrow.js'的文件，并将其放入我的应用程序/集合/ javascripts目录和它的工作，虽然我还不得不包括一个“JavaScript链接标记”来链接它。 – ineedahero

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

相关推荐