Как воспроизвести два текстовых поля и отобразить их в другом текстовом поле без отправки в Rails (используя jQuery или Javascript)

Question

Привет, я пытаюсь воспроизвести два значения text_field (input) и отобразить их в другом текстовом поле (input) в Rails

например, как в jquery, мы делаем это, пожалуйста, проверьте его http://jsfiddle.net/qw5xM/

Я хочу эту вещь в рельсах, как это сделать, чего мне здесь не хватает

моя форма ниже

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

    });

При нажатии кнопки «плюс» необходимо создать новое поле, аналогичное описанному выше, и скрипт умножения должен работать отдельно для каждого нового поля. Я хочу создать новый и сохранить все новые созданные значения.

Но этот, сохраняя только первое значение.

пожалуйста, любая помощь должна быть оценена

Большое спасибо

Answer 1

Вы также можете написать

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

Answer 2

Всегда рекомендуется выбирать атрибут с идентификатором или классом вместо атрибута name, предоставьте идентификатор для скрытой цены поля, чтобы получить ее значение легко, остальное пока все хорошо и попробуйте это: -

<%= 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));
  });

Answer 3

Вам нужно изменить text_field на input, потому что вы не можете использовать селектор атрибута с классом или идентификатором.С селектором атрибута вы можете сделать следующий код:

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

И с селектором вам нужно.для класса и # для идентификатора.Вот рабочий код.

$("#quantity").keyup(function() {
  var a = $("#price").val();
  var b = $(this).val();
  $("#total_price").val(a * b);
});

Answer 4

Измените код ниже

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

до

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

Перед написанием кода, проверьте в вашем браузере.

Кроме того, есть что-то, что следует учитывать в вашей логике.

Если вы введете «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);

Answer 5

Вы должны использовать 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));
});