无法将 javascript 附加的 html 表单字段传递给 rails 控制器

Question

我正在使用 ruby​​-on-rails 制作表单，但表单中有一部分我不明白发生了什么。

表单有一个名为antecedentes的字段，英文翻译为背景。 我有一个包含所有不同背景的选择标签，以及一个调用名为 addBackground 的 javascript 函数的按钮。 addBackground 函数将一些 html 字段附加到表单内的表 div 中。

在我按下提交按钮之前一切都很好，问题是添加的背景字段没有通过 rails 参数传递到我的应用程序控制器中的创建操作。

这是我的 html 代码：

<div class="col-sm-4 text-center">      
  <h4><%= t('titles.backgrounds') %></h4>
  <div class="input-group col-sm-12">
    <%= text_field_tag 'text_bgd_bgd', 7, placeholder: t('st_sheet.st_dots'), class: "form-control" %>
    <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
    <%= select_tag 'select_bgd', options_for_select(@backgrounds), include_blank: false, class: "form-control" %>
    <span class="input-group-btn">
      <button id="add_user" type="button" class="btn btn-default btn-md" , onclick="addBackground(select_bgd)" ><span class="fa fa-plus" aria-hidden="true"></span></button>
    </span>
  </div>
  <br>
  <div class="table-responsive">
    <table id="table_backgrounds" class="table table-hover table-striped ">
      <thead>
        <tr>
          <th><%= label_tag t('Backgrounds.background') %></th>
          <th><%= label_tag t('Backgrounds.value') %></th>
          <th><%= label_tag t('Backgrounds.operation') %></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>

这是我的 javascript 代码：

function addBackground(select) {
  var backgroud_id = select.options[select.selectedIndex].value;
  var background_name  = select.options[select.selectedIndex].text;

  if (!document.getElementById('row_' + background_name)) {
    $('#table_backgrounds > tbody:last').append(
      '<tr id="row_' + background_name + '">' +
        '<td>' + background_name + '<input type="hidden" id="bgd_id_' + backgroud_id + '" value="' + backgroud_id + '" /></td>' +
        '<td><input type="number" id="bgd_' + background_name + '" value="0" min="0" max="5" class="form-control" onclick="refillManager(bgd_' + background_name + ')" /></td>' +
        '<td><button id="bgd_remove_' + backgroud_id + '" type="button" class="btn btn-default btn-md" onclick="removeBackground(bgd_' + background_name + ', \'' + background_name + '\')"><span class="fa fa-minus" aria-hidden="true"></span></button></td>' +
      '</tr>'
    ); 
  } else {
    alert("O antecedente "+background_name+" já foi adicionado.");
  }
}

Answer 1

不需要传数据，通过document.getElementById()获取即可

JavaScript：

    function addBackground() {
        var select = document.getElementById("select_bgd");
        var backgroud_id = select.options[select.selectedIndex].value;
        var background_name  = select.options[select.selectedIndex].text;
        ...
   }

html：

<%= select_tag 'select_bgd', options_for_select(@backgrounds),
               include_blank: false, class: "form-control", id: "select_bgd" %>

并将其留空 onClick 函数

onclick="addBackground()"