首页 > 解决方案 > 如何在不提交 Rails 的情况下同时播放两个 text_field 并显示在另一个 text_field 中(使用 jQuery 或 Javascript)

问题描述

嗨,我正在尝试同时播放两个 text_field(input) 值并将其显示在 Rails 的另一个 text_field(input) 中

例如像在 jquery 我们这样做请测试它http://jsfiddle.net/qw5xM/

我想要这个东西在rails中怎么做,我在这里缺少什么

我的表格如下

    <%= form_for @fills, url: { action: "show"}, method: :get do |f| %>
    //updated code
     <div class="row text-center row-create" style="margin-left: 0%">
        <div class="pull-right col-create" style="margin-right: 0%; border-radius: 50%;">
          <div class="col-xs-1 col-sm-1">
            <%= f.button "+" , class: 'btn btn-default bg-red', style: 'border-radius:50%' %>
          </div>
        </div>
// till here                      
      <div class="col-xs-2 col-sm-2">
        <div class="form-group has-feedback">
         <%= f.hidden_field :price, value: @price_log.price   %>
         <%= f.text_field :quantity, value: 1, required: true,  class:'form-control', id: 'quantiy', placeholder: 'Quantity' %>
        </div>
      </div>
      <div class="col-xs-2 col-sm-2">
        <div class="form-group has-feedback">
            <%= f.text_field :amount, value: :total_price ,  class:'form-control', placeholder: 'Amount', id: 'total_price' %>
        </div>
       </div>
     <% end %>

我的jQuery代码是

    $('text_field[name="quantity"]').keyup(function() {
     var a = $('hidden_field[name="price"]').val();
     var b = $(this).val();
     $('text_field[name="total_price"]').val(a * b);
    });

更新的问题

通过单击加号按钮创建新字段

<script type="text/javascript">
    $(document).on('click','.col-create',function(e){
        e.preventDefault();
        var cont = $(this).closest('.row-create').clone();
        $(cont).find(".col-create").remove().end().insertAfter($(this).closest('.row-create'));
        e.preventDefault()*;

    });

单击加号按钮时,它应该创建与上面相同的新字段,并且乘法脚本应该为每个新字段单独工作。我想创建一个新的并保存所有新创建的值。

但是这个只保存第一个值。

请务必给予任何帮助

非常感谢

标签: javascriptjqueryruby-on-railsajax

解决方案


你也可以写

 $('input[name="textbox2"]').keyup(function() {
        var first = $('input[name="textbox1"]').val();
        var second = $(this).val();
        $('input[name="textbox3"]').val(first * second);
    });

推荐阅读