рассчитать массив текстового поля в jquery / javascript, используя раздел приложения jquery? - PullRequest
Новая
       3

рассчитать массив текстового поля в jquery / javascript, используя раздел приложения jquery?

0 голосов
/ 16 октября 2019

Я создал пользовательский интерфейс, используя поля формы, используя HTML и CSS. Мой бэкэнд-программирование на PHP. Я должен ввести значение один ко многим отношениям, таким как один заказ имеет много пассажиров. Поэтому я создал поля формы, такие как заказ, и пассажиры могут быть одноразово вставлены в базу данных.

Итак, пользователь может заполнить данные заказа, а затем добавить данные пассажира, используя раздел приложения jquery. если пользователь нажал кнопку «Добавить», на странице будут сгенерированы поля формы с другой информацией о пассажире.

Таким образом, поле «Моя проблема - пассажиры» имеет поле для подсчета, например *. total_tax = yq + yr + tax_3 + tax_4

Это уравнение поля каждого пассажира.

Итак, я хочу узнать, как рассчитать каждого отдельного пассажира? (Когда я набираю текст, автоматически вычисляю значение для поля формы индивидуально)

Я использую последнюю версию PHP 7.3.10. Я уже попробовал расчет с использованием JavaScript и JQuery. Работают только первые поля формы для пассажиров. Это не работает другим пассажирам (если я добавил 10 пассажиров, это работает только первый пассажир).

Итак, я хочу рассчитать все поля формы пассажиров по отдельности, используя javascript или jquery keyup событие или что-то еще?

order.php: 

<form action="includes/exchange-order.inc.php" method="post">
   <div id="main_div" class="main_sec_div">
      <button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
      <br />
      <br />

      <label for="validationCustom04">Tax-3 (0.00)</label>
      <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc()" required>
      <br />

      <label for="validationCustom03">Tax-4 (0.00)</label>
      <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc()" required>
      <br />

      <label for="validationCustom04">Total Tax (0.00)</label>
      <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
      <br />

    <button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>

</div>
  </form>


<script>
        $(document).ready(function() {

          var i = 0;

          // add button
          $(document).on('click', '#add', function() {
            i++;
            console.log('Add', i);
            html = `<div id="sub_div${i}" class="second-div">

            <button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>

            <br />
            <br />

            <label for="validationCustom04">Tax-3 (0.00)</label>
            <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc()" required>
            <br />

            <label for="validationCustom03">Tax-4 (0.00)</label>
            <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc()" required>
            <br />

            <label for="validationCustom04">Total Tax (0.00)</label>
            <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
            <br />

          </div>`;

            $('#main_div').append(html);
          });

          // remove button
          $(document).on('click', '.remove', function(e) {
            var remove_btn_id = $(this).attr('id');
            $('#sub_div' + remove_btn_id).remove();
            i--;
            console.log('Remove', i);
          });

        });
      </script>

tex_calc.js:

//Total Tax[Tax - 3, Tax - 4]
function calc(obj) {
  var tax_3 = 0;
  var tax_4 = 0;
  var total_tax = 0;

  var e = obj.id.toString();

  if (e == 'tax_3') {

    tax_3 = Number(obj.value);
    tax_4 = Number(document.getElementById('tax_4').value);
    total_tax = Number(document.getElementById('total_tax').value);

  }
  else if (e == 'tax_4') {

    tax_3 = Number(document.getElementById('tax_3').value);
    tax_4 = Number(obj.value);
    total_tax = Number(document.getElementById('total_tax').value);

  }
  else if (e == 'total_tax') {

    tax_3 = Number(document.getElementById('tax_3').value);
    tax_4 = Number(document.getElementById('tax_4').value);
    total_tax = Number(obj.value);

  }


  // Total Tax
  total_tax = tax_3 + tax_4;
  document.getElementById('total_tax').value = total_tax.toFixed(2);

}

Итак, я рассчитываю рассчитать все поля формы для пассажиров индивидуально, используя событие javascript или jquery keyup или что-то еще?

Как рассчитать каждого пассажира индивидуально?

1 Ответ

0 голосов
/ 27 октября 2019

Я нашел ответ на мой вопрос, что 100% сработало.

Order.php: 

<form action="includes/exchange-order.inc.php" method="post">

    <div id="main_div" class="main_sec_div">
      <button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
      <br />

      <label for="validationCustom04">Tax-3 (0.00)</label>
      <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc(this)" required>
      <br />

      <label for="validationCustom03">Tax-4 (0.00)</label>
      <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc(this)" required>
      <br />

      <label for="validationCustom04">Total Tax (0.00)</label>
      <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
      <br />


    </div>

    <button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>    

  </form>


<script>
    $(document).ready(function() {

      var i = 0;

      // add button
      $(document).on('click', '#add', function() {
        i++;
        console.log('Add', i);
        html = `<div id="sub_div${i}" class="second-div">

        <button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>

        <br />
        <br />

        <label for="validationCustom04">Tax-3 (0.00)</label>
        <input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc(this)" required>
        <br />

        <label for="validationCustom03">Tax-4 (0.00)</label>
        <input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc(this)" required>
        <br />

        <label for="validationCustom04">Total Tax (0.00)</label>
        <input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
        <br />    

      </div>`;

        $('#main_div').append(html);
      });

      // remove button
      $(document).on('click', '.remove', function(e) {
        var remove_btn_id = $(this).attr('id');
        $('#sub_div' + remove_btn_id).remove();
        i--;
        console.log('Remove', i);
      });

    });
  </script>

tex_calc.js Кодировка файла: 

//Total Tax[YQ, YR, Tax - 3, Tax - 4]

var tax_3 = [];
var tax_4 = [];
var total_tax = [];

function calc(obj) {

    var e = obj.id.toString();

    if (e == 'tax_3' + i) {
      tax_3[i] = Number(obj.value);
      tax_4[i] = Number(document.getElementById('tax_4' + i).value);
      total_tax[i] = Number(document.getElementById('total_tax' + i).value);

    }
    else if (e == 'tax_4' + i) {

      tax_3[i] = Number(document.getElementById('tax_3' + i).value);
      tax_4[i] = Number(obj.value);
      total_tax[i] = Number(document.getElementById('total_tax' + i).value);

    }
    else if (e == 'total_tax' + i) {

      tax_3[i] = Number(document.getElementById('tax_3' + i).value);
      tax_4[i] = Number(document.getElementById('tax_4' + i).value);
      total_tax[i] = Number(obj.value);

    }


    // Total Tax
    total_tax[i] = Number(tax_3[i] + tax_4[i]);
    // console.log('Total ', total_tax[i]);
    document.getElementById('total_tax' + i).value = total_tax[i].toFixed(2);



  }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...