Rails：如何创建一个添加更多按钮，该按钮使用 jquery 以 erb 形式添加一些文本字段

Posted 2023-05-09

【中文标题】Rails：如何创建一个添加更多按钮，该按钮使用 jquery 以 erb 形式添加一些文本字段

【英文标题】：Rails: How to create a Add more button which add some textfield in erb form with jquery

【发布时间】：2020-11-10 14:15:59

【问题描述】：

我正在创建一个表单，其中 quote_amounts 包含哈希。我想创建一个带有按钮的表单，当我点击按钮时，新的一组文本字段会打开

例如： 当表单打开时，应该有一个 2 个文本字段：标签和金额，以及当我向它发送数据时 参数应该是"quote_amounts"=> ["label"=> "website", "amount"=> 1000]

当我点击添加更多按钮时，应该打开一组 2 个新文本字段，然后我填充数据，然后参数应该是

"quote_amounts"=> ["label"=> "website", "amount"=> 1000, "label"=> "website1", "amount"=> 11000]

如果我添加更多文本字段，则相同。

quote_amounts 是一个 jsonb 字段

请帮我解决这个问题，卡了 2 天。

【参考方案1】：

您可能必须使用 javascript 或 jquery 来添加动态输入，然后必须使用 ajax 提交。我创建了一个简单的场景来查看您的问题。希望这对你有用。

您可以将其添加到您的 erb 文件中。

在您的控制器中，您必须定义一个操作方法来处理要返回的 format.json，以便您可以在 ajax 中获得成功或错误的响应。

希望您现在能够解决问题。

function addMore()
    $("#dynamic-inputs").append($("#original-inputs").html())
  

  function submiForm() 
    let data = []
    $("[name='label']").each((i, item)=>
    
      data.push('label': item.value, 'amount':  $("[name='amount']")[i].value)
    )
    console.log('quote_amounts': data)
    $.ajax(
        url: 'urlOfYourActionController',
        data: 'quote_amounts': data,
        type: 'POST',
        success: function(data)
            // handle your success here
            console.log(data);
        
    );
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="original-inputs">
  <label>Label</label>
  <input name='label' />
  <label>Amount</label>
  <input name='amount' />
  <br/>
</div>

<div id="dynamic-inputs"></div>

<button type='button' onclick="addMore()">Add More (+)</button>
<button id='sendRequest' onclick='submiForm()'>submit</button>

【讨论】：

我可以在视图文件中添加它吗？我有非常相似的问题

是的，您可以将其添加到您的视图文件中。您可以在同一个视图文件中添加 js，但您应该在资产管道文件 application.js 或任何其他文件中添加 js。

【参考方案2】：

您可以尝试在ajax 的帮助下添加这些附加字段。例如。该按钮将异步地在表单中附加新字段。

更多信息using JavaScript with rails