首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Rails编辑表单在每次提交表单时都会创建一个新元素,而不是更新选定的元素

。这是因为Rails框架的默认行为是使用HTTP的POST方法来提交表单数据,而POST方法会创建一个新的资源。

在Rails中,表单的提交通常会触发控制器中的一个动作(Action)。这个动作会接收表单数据,并根据数据创建一个新的数据库记录。这意味着每次提交表单时,都会创建一个新的元素。

如果想要更新选定的元素而不是创建新元素,可以使用Rails的资源路由(Resourceful Routing)和HTTP的PUT或PATCH方法。资源路由可以将请求映射到不同的动作,例如更新(update)动作。通过使用PUT或PATCH方法提交表单数据,可以告诉Rails框架执行更新操作而不是创建新元素。

以下是一个示例代码,演示如何在Rails中更新选定的元素:

代码语言:txt
复制
# routes.rb
resources :elements

# elements_controller.rb
class ElementsController < ApplicationController
  def edit
    @element = Element.find(params[:id])
  end

  def update
    @element = Element.find(params[:id])
    if @element.update(element_params)
      redirect_to @element, notice: 'Element was successfully updated.'
    else
      render :edit
    end
  end

  private

  def element_params
    params.require(:element).permit(:name, :description)
  end
end

# edit.html.erb
<%= form_for @element do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>

  <%= f.label :description %>
  <%= f.text_area :description %>

  <%= f.submit 'Update Element' %>
<% end %>

在上述示例中,我们使用了资源路由来定义元素的CRUD操作。在编辑动作(edit action)中,我们通过Element.find(params[:id])找到要编辑的元素。在更新动作(update action)中,我们使用@element.update(element_params)来更新元素的属性。

这样,当我们提交编辑表单时,会执行更新操作而不是创建新元素。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。腾讯云云服务器提供可扩展的计算能力,适用于部署Rails应用程序。腾讯云数据库提供可靠的数据库服务,适用于存储和管理Rails应用程序的数据。

腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm 腾讯云数据库产品介绍链接地址:https://cloud.tencent.com/product/cdb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

三分钟让你了解什么是Web开发?

样本DOM树(来源:Wikimedia Commons) 当在浏览器中呈现HTML页面,浏览器将HTML下载到本地内存中,并创建一个DOM树来显示屏幕上页面。...Forms表单 到目前为止,我们只讨论从服务器获取数据。表单是HTML一个方面,它允许我们向服务器发送信息。我们可以使用表单更新现有信息或添加新信息。...下一个重要部分是让用户通过HTML表单在这些创建数据。请记住,我们正在做这个解剖来理解这些概念——这并不是一个完整编程教程。...通过认证用户创建博客 为此,我们需要一个带有两个输入字段(标题、内容)HTML表单,用户可以通过该表单创建一个博客帖子。...使用Ajax,整个页面并没有刷新—只是需要更改部分。所以,如果你有了新邮件,不是刷新整个页面,你只是看到了一个电子邮件在上面。

5.8K30
  • 文档和元素几何滚动

    文档和元素几何滚动 当浏览器在窗口中渲染文档,它将会创建文档一个视觉表现层,在哪里每个元素都有自己位置和尺寸。通常web应用程序将文档看做元素树。...表单每发生一个改变时候,都会触发一个事件,从而可以通过事件调用回调函数。 一般来说,当按钮表单元素激活(甚至当通过键盘不是鼠标)都会触发click事件。...当用户在一个文本域输入文本或从下拉列表中选择一个选项后就触发change事件,当用户在一个文本域中该数据不是每次用户输入一个键值都会触发该事件。它仅仅当用户改变了值才会触发该事件。...click事件 当按钮表单元素激活时候,将会触发click事件。(即使是通过键盘不是通过鼠标,该事件都会触发)。单选框和复选框也具有click事件。...单选元素为整组有相关性元素而设计,组内所有按钮HTML属性name值都相同。按照这种方式创建按钮为互斥。利用表单属性名字选中元素,它返回一个类数组对象不是单个元素

    5.2K00

    前端面试题-每日练习(3)

    特点: (1)任意放缩 用户可以任意缩放图像显示,不会破坏图像清晰度、细节等。 (2)文本独立 SVG图像中文字独立于图像,文字保留可编辑和可搜寻的状态。...组成:表单标签、表单域、表单按钮 a、表单标签:这里面包含了处理表单数据所用 CGI 程序 URL, 以及数据提交到服务器方法。...主要用途:表单在网页中主要负责数据采集功能,和向服务器传送数据。 9.表单提交中Get和Post方式区别? (1)、 get 是从服务器上获取数据, post 是向服务器传送数据。...容器高度为300px;当内容高度大于这个值,容器高度被撑高,不是出现滚动条。这时候我们就会面临这个兼容性问题。...(4)、当需要设置样式很多时设置className不是直接操作style。 (5)、少用全局变量、缓存DOM节点查找结果。减少IO读取操作。

    15020

    Form 表单在数栈应用(上): 校验篇

    定义: 具有 数据收集、校验 和 提交 功能表单,包含复选框、单选框、输入框、下拉选择框等元素; 用法: 当我们用于创建一个实体或收集信息、或需要对输入数据类型进行校验,可用Form表单。...校验表单值所有字段 这是在数栈用比较高频,一般在提交表单数据,先对当前所有表单域进行校验,只有全部通过校验才能进行下一步操作。(调接口、联动等操作) 2....API 回顾如下: 示例场景1: (标签引擎项目) 场景描述:表单在第一次自定义校验失败报错,经排查为在校验时刻账号权限不足,此时我们给予该用户应该具备权限(此时弹窗未关闭),再次点击确定发现并无效果...多表单联合校验 场景描述:不同业务中都会有很多类似情况会出现——在一个页面里具有多个 form 表单,那么此时 form 表单校验应该如何处理呢?...通常思路可能会有两个: 1.用 antd table 新增 components 属性来自定义列表元素,以覆盖默认 table 元素,再在自定义列表元素中使用 form ; 2.将 table 每一行元素都看作一个独立表单

    2.2K20

    Form 表单在数栈应用(上): 校验篇

    定义: 具有 数据收集、校验 和 提交 功能表单,包含复选框、单选框、输入框、下拉选择框等元素; 用法: 当我们用于创建一个实体或收集信息、或需要对输入数据类型进行校验,可用Form表单。...校验表单值所有字段 这是在数栈用比较高频,一般在提交表单数据,先对当前所有表单域进行校验,只有全部通过校验才能进行下一步操作。(调接口、联动等操作) 2....API 回顾如下: 示例场景1: (标签引擎项目) 场景描述:表单在第一次自定义校验失败报错,经排查为在校验时刻账号权限不足,此时我们给予该用户应该具备权限(此时弹窗未关闭),再次点击确定发现并无效果...多表单联合校验 场景描述:不同业务中都会有很多类似情况会出现——在一个页面里具有多个 form 表单,那么此时 form 表单校验应该如何处理呢?...: 1.用 antd table 新增 components 属性来自定义列表元素,以覆盖默认 table 元素,再在自定义列表元素中使用 form ; 2.将 table 每一行元素都看作一个独立表单

    1.3K20

    02-老马jQuery教程-jQuery事件处理

    scroll 事件适用于所有可滚动元素和 window 对象(浏览器窗口) submit([[data],fn]) $("form").submit(); 当提交表单,会发生 submit 事件。...参数: type 触发事件类型 data 给事件处理程序事件对象额外�参数,数组类型 返回值:依然是jQuery包装对象 实例: //提交一个表单,但不用submit() $("form...第三,这个方法返回是事件处理函数返回值,不是据有可链性jQuery对象。此外,如果最开始jQuery对象集合为空,则这个方法返回 undefined 。...使用 delegate() 方法事件处理程序适用于当前或未来元素(比如由脚本创建新元素)在选择元素上绑定一个或多个事件事件处理函数。...selector:一个选择器字符串用于过滤器触发事件选择器元素后代。如果选择< null或省略,当它到达选定元素,事件总是触发。

    2.7K80

    ASP.NET MVC框架(第四部分): 处理表单编辑提交场景

    表单输入和提交场景 为示范如何在ASP.NET MVC框架中处理表单输入和提交场景一些基本原则,我们将建造一个简单产品列表,产品生成,和产品编辑场景。...这意味着当用户点击表单提交按钮表单输入将被发送到"Create" action方法上来处理和更新数据库。 ?...注意上面,我们在网页上使用了标准 HTML 元素不是form runat=server。...至此,我们运行网站,就有了最基本产品输入功能: ? 实现添加新产品 (第三部分 - 使用HTML辅助方法实现下拉框) 我们在前面一节里创建产品输入屏幕是可行,但不是很友好。...但注意,填充不是一个空对象,我们使用了一个模式,先从数据库中获取老值,然后对它应用用户做改动,然后更新到数据库中。

    5.1K70

    Github 移除 JQuery 过程

    实现CSS类名切换; CSS现在支持在样式不是JavaScript中定义可视化动画; $.ajax请求可以使用Fetch标准执行; addEventListener()接口足够稳定,可以跨平台使用;...作者希望在这个页面上有一个或多个js小部件元素吗?另外,如果我们更新了页面标记,并且意外地漏掉了js小部件类名,浏览器中异常是否会通知我们出了问题?...默认情况下,当没有匹配初始选择器,jQuery会自动跳过整个expresion;但对我们来说,这种行为是一个bug,不是一个特性。...我们创建一个pull请求bot,每当有人试图添加一个eslint禁用规则,它都会在我们团队中对pull请求ping留下评论。这样我们就可以尽早参与代码评审并提出备选方案。...ajax*生命周期事件,并让这些表单像以前一样异步提交其内容;只有这次fetch()在内部使用。

    2.1K10

    【数据库】MySQL进阶四、select

    添加了(行级锁/级锁)锁数据不能被其它事务再锁定,也不被其它事务修改(修改、删除)是级锁,不管是否查询到记录,都会锁定。...这些问题包括:丢失更新、脏读、不可重复读和幻觉读: 1.当两个或多个事务选择同一行,然后基于最初选定更新该行时,会发生丢失更新问题。每个事务都不知道其它事务存在。...因为这个数据是还没有提交数据,那么另外一个事务读到这个数据是脏数据,依据脏数据所做操作可能是不正确。例如,一个编辑人员正在更改电子文档。...如果只有在作者全部完成编写后编辑人员才可以读取文档,则可以避免该问题。 4.幻觉读是指当事务不是独立执行时发生一种现象,例如第一个事务对一个数据进行了修改,这种修改涉及到全部数据行。...例如,一个编辑人员更改作者提交文档,但当生产部门将其更改内容合并到该文档主复本,发现作者已将未编辑新材料添加到该文档中。

    1.6K70

    Java 后台开发面试题分享九

    不可重复读:对于两个事务 T1 和 T2,T1 读取了一个字段,然后 T2 更新了该字段并提交之后,T1 再次提取同一个字段,值便不相等了。...幻读:对于两个事务 T1、T2,T1 从中读取数据,然后 T2 进行了 INSERT 操作并提交,当 T1 再次读取时候,结果不一致情况发生。...() 和 .val() 差异总结: .html(),.text(),.val() 三种方法都是用来读取选定元素内容。....html() 和 .text() 方法不能使用在表单元素上, .val() 只能使用在表单元素上。....html() 方法使用在元素集合上,只读取第一个元素;.val() 方法和 .html() 相同,如果其应用在元素集合上,只能读取第一个表单元素 value 值,但是 .text() 不一样,如果

    73420

    Postmant压力测试

    每次请求历史数据,会被记录下来,但是经常使用请求,还是保存一下,这么每次时候,选择就行了,及其方便。...另外,最好创建一个账号,这样数据将会永久保存下来,不至于重装了系统或者换了台电脑数据都没了尴尬。...我们来看看如何发送POST接口 form-data、x-www-form-urlencoded、raw、binary区别 x-www-form-urlencoded 当用户通过form表单提交数据时候...在使用包含文件上传控件表单,必须使用该值。 text/plain。纯文体传输。空格转换为 “+” 加号,但不对特殊字符编码。...其实form表单在你不写enctype属性,也默认为其添加了enctype属性值,默认值是enctype="application/x- www-form-urlencoded”,所以上面注册用户时候虽然没写

    1.9K20

    Jmeter(四) - 从入门到精通 - 创建网络测试计划(详解教程)

    在下一个字段“加速周期”中,保留默认值1秒。该属性告诉JMeter启动每个用户之间要延迟多长时间。例如,如果您输入5秒钟加速期,JMeter将在5秒钟结束完成所有用户启动。...如果更改元素名称,则在离开控制面板后(例如,选择另一个元素),树将使用新文本进行更新。...单击鼠标右键获得“添加”菜单,然后选择“添加”→“配置元素”→“ HTTP请求默认值”。然后选择此新元素以查看其控制面板(请参见图1.3)。 ? ?...1.6登录网站 宏哥在上边列举不是这种情况,但是某些网站要求您先登录才能允许您执行某些操作。在网络浏览器中,登录名将显示为用户名和密码表单,以及用于提交表单按钮。...图1.8 示例HTTP登录请求 1.7选择同一用户或不同用户 创建测试计划,在每个线程组迭代中,我们可以选择模拟运行多个迭代同一用户,或模拟运行一个迭代不同用户。

    5.2K71

    想不到大厂面试中“幂等”性,竟然如此简单!

    数学中:在一次元运算为幂等,其作用在任一元素两次后会和其作用一次结果相同;在二次元运算为幂等,自己重复运算结果等于它自己元素。...④ 重复提交表单:当用户填写表单提交,可能会因为用户点多次连击提交或者网络波动导致服务端未及时响应,会导致用户重复提交表单,就出现了同一个表单多次请求。...它像是一个彻底地loser,它认为别人每次去拿数据都会修改这条数据,所以每次拿数据时候,都会使数据处于锁定状态。...不推荐使用 Token令牌如何实现幂等性 所谓token令牌其实就是为了防止用户重复提交一个表单信息,这一点基本上PHP框架都会带有token验证。...客户端每次进入表单页面可以优先申请一个唯一令牌存储本地,服务端存储令牌token值(redis,文件,memcache都可) 每次发送请求可以在Headers头部中带上当前这个token令牌 服务端验证

    65900

    react学习

    根据我们已有的知识,更新UI唯一方式是创建一个全新元素,并将其传入ReactDOM.render()。...使用JSX语法你需要传入一个函数作为事件处理函数,不是一个字符串。 在React中不能通过返回false方式阻止默认行为。必须显式使用preventDefault。...a key should be provided for list item,意思是当你创建一个元素,必须包括一个特殊key属性。...比方说,如果提取出一个ListItem组件,应该把key保留在数组中元素上,不是放在ListItem组件中元素上。...由于handlechange在每次按键都会执行并更新Reactstate,因此显示值将随着用户输入更新。 对于受控组件来说,每个state突变都有一个相关处理函数。

    4.3K20

    vue v-model详细介绍

    v-model指令可以在表单input、textarea以及select元素创建双向数据绑定它会根据控件类型自动选取正确方法来更新元素。...表单提交是开发中非常常见功能,也是和用户交互重要手段:比如用户在登录、注册需要提交账号密码;比如用户在检索、创建更新信息,需要提交一些数据;这些都要求我们可以在代码逻辑中获取到用户提交数据,...我们通常会使用v-model指令来完成 v-model基本使用 它会根据控件类型自动选取正确方法来更新元素;尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户输入事件来更新数据...-- type="radio"选中状态不是根据checked来选中,而是在data中定义一个属性, 且让data中属性值等于value值,就会被选中了。...单选: 只能选中一个值,v-model绑定一个值; 当我们选中option中一个,会将它对应value赋值到fruit中; 多选: 可以选中多个值,v-model绑定一个数组;

    9910

    【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    在组件初始化时候会执行一次,传入是 DOM 元素 每次更新组件时候都会调用两次回调函数,第一次传入值为null,第二次才传入参数DOM 元素。...这是因为在每次渲染时会创建一个函数实例,所以React 清空旧 ref 并且设置新。...在React中,可变状态通常保存在组件状态属性中,并且只能使用 setState() 进行更新呈现表单React组件也控制着在后续用户输入时该表单中发生情况,以这种由React控制输入表单元素改变其值方式...例如:某些form表单信息编辑,input表单元素需要初始显示服务器返回某个值然后进行编辑。 2、非受控组件使用场景:一般用于无任何动态初始值信息情况。...例如:form表单创建信息,input表单元素都没有初始值,需要用户输入情况。

    5K30
    领券