Блог

У меня есть следующая таблица <th> и <td> следующим образом :

 Serial No.         Actual QTY            Input 1            Input 2
[  x1      ]        [ 5    ]             [      ]           [      ]
[  x2      ]        [ 9    ]             [      ]           [      ]
  

• обратите внимание, что это [ ] указывает как текстовое поле ввода

JS код :

 function myFunction(v){
        var minus = v.value; 
        var original = v.getAttribute('data-original');
        var x = document.getElementById(v.getAttribute('data-goto'));
        x.value = original - minus;
        if(x.value < 0){
            alert('Actual QTY is Less than Zero!');
      }
    }
  

PHP-код :

 while($row = mysql_fetch_assoc($result)){
    echo "<tr>";
    echo "<td>".$row['serial_no']."</td><td>";
    echo "<input class='original' type='text' id='c".$row['serial_no']."' value='".$row['qty']."' />";
    echo "</td>";
    for($i=0;$i<2;$i  ){
        echo "<td><input data-goto='c".$row['serial_no']."' data-original = '".$row['qty']."' onchange='myFunction(this);' type='text' name='n[]' /></td>";
    }
    echo "</tr>";
}
  

Основываясь на приведенной выше таблице, я все, что я хочу, это суммировать Input 1 и Input 2 для каждой строки и находит оставшееся, вычитая сумму двух входных данных из Actual QTY следующим образом:

 Actual QTY = (Input 1   Input 2) - Actual QTY
  

Код PHP и JS работает только для 1 поля ввода одновременно без суммирования двух входных данных, поэтому, когда пользователь вставляет значение в Input 1 , оно уменьшается по сравнению с фактическим количеством! Но при вставке обоих в Input 1 и Input 2 результат будет false.

Все, что я хочу, это найти способ связать оба поля ввода вместе.

Если вы собираетесь делать много подобных вещей, вы можете рассмотреть возможность использования MVVM-фреймворка, такого как knockout или kendo. Они очень помогут при синхронизации связанных элементов на странице.

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

http://jsbin.com/tapoxoke/1/edit?html ,js, вывод

 <table>
  <tr>
    <th>Actual Qty</td>
    <th>Input 1</td>
    <th>Input 2</td>
  </tr>
  <tr>
    <td class="actual-qty">5</td>
    <td><input/></td>
    <td><input/></td>
  </tr>    
<tr>
  <td class="actual-qty">7</td>
  <td><input/></td>
  <td><input/></td>
  </tr> 
  <tr>
    <td class="actual-qty">3</td>
    <td><input/></td>
    <td><input/></td>
  </tr> 
</table>

<script>
$('input').on('change', function(e) {
   var $inputElement = $(e.target);
   $tableRow = $inputElement.closest('tr');
   $bothInputs = $tableRow.find('input');
   var actualQtyElement = $tableRow.find('.actual-qty')[0];

   var sumOfInputs = getSumOfInputs($bothInputs);
   var actual = getValueFromString(actualQtyElement.textContent);

   if(actual < sumOfInputs) {
     alert('Actual QTY is Less than Zero!');
   }
});


var getSumOfInputs = function($inputs) {
  var sum = 0;
  $inputs.each(function(index) {
    var input = $inputs[index];
    sum  = getValueFromString(input.value);
  });
  return sum;
};

var getValueFromString = function(value) {
  value = parseInt(value);
  var isNan = Number.isNaN(value);
  return (isNan) ? 0 : value;
};
</script>