使用 Javascript 将值保存在hidden_field_tag中

Saving a value in a hidden_field_tag with Javascript

本文关键字：field tag hidden 存在 Javascript 保存 使用      更新时间：2023-09-26

我在rails应用程序中有一个表单，其中包含一个用于选择城市并保存其ID的字段。

= select_tag 'building[city_id]', 
options_for_select(cities.map{|c| [c.name, c.id]}),
onchange: "myFunction();", include_blank: "Choose city"

我想在用户从选择标签中选择内容后立即将城市名称保存在hidden_field_tag中。如何使用 Javascript 实现这一点？

我对Javascript很陌生，请不要苛刻地判断。

我建议尽可能少地做JS。所以：

首先在 Rails 视图中添加隐藏字段（具有空值）。

现在你需要将Javascript添加到你的页面中（你可能已经在app/assets/javascripts/application.js有一个文件，它包含在你的所有页面中;在你的Rails模板中包括JS是它自己的问题）。你需要两个函数，jQuery会让生活变得更容易：

  1. 一个函数，用于检查选择标签的值，并使用选择标签中的值更新隐藏标签的值。
  2. 一个在页面加载时运行的函数，它将事件侦听器附加到 select 标签;这将侦听 "select" 标签上的 "change" 事件，并在看到它时调用我们的第一个函数。

这些看起来像这样（注意，如果不进行更改，这段代码几乎肯定不适合您）：

function setHiddenValue() {
  // Get the value from the select tag
  var selectValue = $('select#building_city_id').val();
  // Set the hidden tag's value to the select tag value we got in the last line
  $('input[type=hidden]#city_name').val(selectValue);
}

我猜的是获取元素的选择器，但 Rails 正在将 ID 放在它们上面，您可以使用它们。

$(document).ready(function () {
  $('select#building_city_id').on('change', setHiddenValue());
}

显然，这很粗糙，在粘贴后不会立即起作用。您需要确保选择器与 Rails 放入您的 HTML 中的内容相匹配，您需要确保脚本包含在您的页面中并且正在设置事件侦听器，您需要检查 jQuery 是否存在，并且您需要确保 setHiddenValue 函数获得正确的值以放入隐藏的表单标签中。但这就是我开始你想做的事情的方式;其余的是特定于您的页面的详细信息。

相关文章：