如何在不提交Rails的情况下（使用jQuery或Javascript）将两个文本字段相乘并显示在另一个文本字段中

您好，我正在尝试多播放两个文本字段（输入）值，并将其显示在Rails中的另一个文本字段（输入）中

例如，像在jquery中一样，我们喜欢这个，请测试它

我想要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 %>

更新的问题

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

<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()*;

    });

$（文档）.on（'click'，'.col create'，函数（e）{
e、 预防默认值（）；
var cont=$（this.close（'.row create'）.clone（）；
$（cont）.find（“.col create”）.remove（）.end（）.insertAfter（$（this）.closest（'.row create'））；
e、 preventDefault（）*；
});

单击“加号”按钮时，应创建与上述相同的新字段，并且乘法脚本应分别为每个新字段工作。 我想创建一个新的，并保存所有新创建的值

但这只保存了第一个值

请务必通知任何帮助

---

非常感谢

您应该像这样使用

parseInt

或

parseFloat

：

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

---

您应该像这样使用

parseInt

或

parseFloat

：

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

---

您需要将您的

文本\u字段

更改为

输入

，因为您不能与class或id一起使用。您可以使用以下代码

$（'input[name=“quantity”]）.keyup（函数（）{
var a=$（'input[name=“price”]）.val（）；
var b=$（this.val（）；
$（'input[name=“total_price”]）.val（a*b）；
});

您需要将

文本\u字段

更改为

输入

，因为您不能与class或id一起使用。与一起，您可以使用以下代码

$（'input[name=“quantity”]）.keyup（函数（）{
var a=$（'input[name=“price”]）.val（）；
var b=$（this.val（）；
$（'input[name=“total_price”]）.val（a*b）；
});更改以下代码

$('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);
});

到

在编写代码之前，请在浏览器中进行检查

<>也，在你的逻辑中有一些事情要考虑。

如果在第一个文本框中输入'3'，然后在第二个文本框中输入'4'，则第三个框将获得'12'作为值

但如果您再次访问，请转到第一个文本框并将其更改为“5”，它将不会打印“15”

因此，您可以按如下所示更改代码

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

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


$('input[name="quantity"]').keyup(multiply);
$('input[name="price"]').keyup(multiply);

更改下面的代码

$('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);
});

到

在编写代码之前，请在浏览器中进行检查

<>也，在你的逻辑中有一些事情要考虑。

如果在第一个文本框中输入'3'，然后在第二个文本框中输入'4'，则第三个框将获得'12'作为值

但如果您再次访问，请转到第一个文本框并将其更改为“5”，它将不会打印“15”

因此，您可以按如下所示更改代码

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

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


$('input[name="quantity"]').keyup(multiply);
$('input[name="price"]').keyup(multiply);

选择具有id或class的属性而不是名称属性始终是一种良好的做法，
为隐藏字段price提供一个id，以便轻松获取其值，其余的都很好，请尝试以下方法：-

<%= f.hidden_field :price, value: @price_log.price, id: "price"  %> 



  $('#quantiy').on('keyup', function(e) {
    var price = parseFloat($('#price').val());
    var quantity = $(this).val();
    $('#total_price').val((price * quantity).toFixed(2));
  });


$（'#quantiy'）。关于（'keyup'，函数（e）{
var price=parseFloat（$（'#price'）.val（））；
变量数量=$（this.val（）；
$（'总价格'）.val（（价格*数量）.toFixed（2））；
});
选择具有id或class而不是name属性的属性始终是一种好做法，
为隐藏字段price提供一个id，以便轻松获取其值，其余的都很好，请尝试以下方法：-

<%= f.hidden_field :price, value: @price_log.price, id: "price"  %> 



  $('#quantiy').on('keyup', function(e) {
    var price = parseFloat($('#price').val());
    var quantity = $(this).val();
    $('#total_price').val((price * quantity).toFixed(2));
  });


$（'#quantiy'）。关于（'keyup'，函数（e）{
var price=parseFloat（$（'#price'）.val（））；
变量数量=$（this.val（）；
$（'总价格'）.val（（价格*数量）.toFixed（2））；
});
您也可以编写

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

你也可以写

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

这是错误的，您不能使用
@Gabbar准确地选择名称属性。谢谢你的评论。答案已更新。您是否看到id为
price
的html属性？在编写这行代码之前，
var a=$（“#price”）.val（）：D lol，请不要复制答案以添加到您的答案中。这是错误的，您不能使用
@Gabbar准确地选择名称属性。谢谢你的评论。答案已更新。您是否看到id为
price
的html属性？在编写这行代码之前，
var a=$（“#price”）.val（）：D lol，请不要复制答案以添加到您的答案中。这很好，我想以Rails格式处理它。光标移动到下一个文本字段后，它会发生变化。不确定Rails way是什么意思。没有您期望的javascript rails格式。在rails中也使用同样的方法。但在此之前，必须包含jQuery库。您可以使用
jqueryrails
gem来实现这一点。光标移动到下一个文本字段后，它会发生变化。不确定Rails way是什么意思。没有您期望的javascript rails格式。在rails中也使用同样的方法。但在此之前，必须包含jQuery库。您可以使用
jquery rails
gem来实现这一点。耶，您可能会纠正它给出的精确值，但如何使该函数以rails的方式工作？耶，您可能会纠正它给出的精确值，但如何使该函数以rails的方式工作？您是否仍然面临这个问题，如果它对您有帮助，请随意接受/投票回答，这也将有利于未来的堆栈溢出搜索。如果您仍然面临此问题，请随时接受/向上投票答案。如果它对您有所帮助，这也将有利于未来的堆栈溢出搜索。这工作正常：）我愿意接受此答案。但在我的代码中，我有一个加号按钮，它复制了上面相同的代码（两个文本字段用于输入，一个用于输出），在这种情况下，它不起作用，希望你能解决它。很高兴看到你的答案：）任何我将如何把它也在我的代码（问题）请检查一次。请向任何一位推荐我changes@BharatMane据我猜测，您希望单击
+
添加带有
数量、价格和总数的新文本字段。我说得对吗？您还希望运行相同的脚本来