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

Question

我正在使用ruby-on-rails制作表单，但是表单中有一部分我不了解正在发生的事情。

表单中有一个名为antecedentes的字段，英语被翻译为背景。 我有一个带有所有不同背景的选择标签，还有一个按钮，它调用了一个名为addBackground的javascript函数。 addBackground函数将一些html字段追加到表单内的表格div上。

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

这是我的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()"