sx-fc/app/views/oqs/edit/index.html.erb

<!-- <div class="page-header">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
    <li class="breadcrumb-item active">OQS</li>
    <span class="float-right">
      <%= link_to 'Back', oqs_root_path %>
    </span>
  </ol>
</div> -->
<div class="row">
  <div class="col-md-5">
    <div class="card">
      <div class="card-header">Update Quantity</div>
      <div class="card-body">

        <!-- <div class="col-md-12">
          <h6><%= @order_item[0].item_name + " - [" + @order_item[0].qty.to_s + "]" %></h6>
          <div class="form-group">
            <label class="col-md-1">Quantity: </label>
            <input type="text" name="qty_weight" class="text-right form-control" value="<%= @order_item[0].qty %>" />
          </div>
          <div class="form-group">
            <label class="col-md-1">Remark: </label>
            <textarea rows="2" cols="22" name="remarks" class="form-control"></textarea>
          </div>
          <div class="form-group">
            <a href="<%= oqs_root_path %>" class="btn btn-primary">
              <i class="fa fa-arrow-left"></i> Back
            </a>
            <button id="qty-update" class="btn btn-info" data-id="<%= @order_item[0].order_items_id %>">Update</button>
          </div>
        </div> -->
        <div class="row clearfix">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 form-control-label">
          <label for="">QTY :</label>
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-6">
            
              <input type="text" name="qty_weight" class="text-center form-control qty" id="qty" value="<%= @order_item[0].qty %>" /> 
               <!--  <input type="text" id="email_address_2" class="form-control" placeholder="Enter your email address"> -->
              
          </div>
        </div>
        <div class="row clearfix">
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-control-label">
          <label class ="m-t-20">Remark :</label>
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
            
               <textarea  name="remarks" class="form-control"></textarea>
               <!--  <input type="text" id="email_address_2" class="form-control" placeholder="Enter your email address"> -->
             
          </div>
        </div>
        <br><br>
        <button id="qty-update" class="btn btn-info float-right" data-id="<%= @order_item[0].order_items_id %>">Update</button>
      </div>      
    </div>
  </div>
  <div class="col-md-5">
      <div class="m-t- p-l-20">
        <div class="row">
          <div class="col-lg-11 col-md-11 col-sm-11">
            <div class="row bottom">
              <div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
              <div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
              <div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
            </div>
            <div class="row bottom">
              <div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
              <div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
              <div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
            </div>
            <div class="row bottom">
              <div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
              <div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
              <div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
            </div>
            <div class="row bottom">
              <div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
               <div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
              <div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
            </div>
            
          </div>
          
        </div>
      </div>
  </div>
  <div class="col-md-1">
    <button type="button" class="btn btn-block btn-default waves-effect" id='back'>
      <i class="material-icons m-t--10">reply</i>
      Back
    </button>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
  original_value = $('#qty').val();

  // Qty update for OQS Edit Controller
  $('#qty-update').on('click', function(){
    var qty_weight = $("input[name='qty_weight']").val();
    if(qty_weight > original_value){      
      swal("Alert!", "Not allowed over quantity", "warning");
      return;
    }
    
    var remarks = $("textarea[name='remarks']").val();
    var order_items_id = $(this).attr('data-id');
    var params = { 'order_items_id': order_items_id, 'qty_weight': qty_weight, 'remarks': remarks }
    $.ajax({
      type: 'POST',
      url: '/oqs/' + order_items_id,
      data: params,
      success: function(result){
        alert("Updated!");
        window.location.href = '/oqs';
      }
    });
  });

   $('#back').on('click', function () {
        window.location.href = '/oqs';
    })

   // number key pad
$(document).on('click', '.cashier_number', function(event){

    qty = $('#qty').val();
    var input_value = $(this).attr("data-value");

    var input_type = $(this).attr("data-type");
    switch (input_type) {
      case 'num':
      if (original_value == qty){
        $('#qty').val(input_value);
      }else{
        $('#qty').val(qty+input_value);
      }
      break;

      break;
      case 'clr':
      $('#qty').val(original_value);
      break;
      case 'del' :
      $('#qty').val(original_value);
      break;
    }
});
});
</script>