Creé una interfaz de usuario usando campos de formulario usando HTML y CSS. Mi programación de backend en PHP. Tengo que ingresar el valor de una a muchas relaciones, por ejemplo, un pedido tiene muchos pasajeros. Así que creé campos de formulario como orden y los pasajeros se pueden insertar una sola vez en la base de datos.

Entonces, un usuario capaz de completar los datos del pedido, agregará los datos del pasajero utilizando la sección del apéndice de jquery. si un usuario hizo clic en el botón Agregar, la página generará otros campos de formulario de detalles del pasajero.

Entonces, el campo del formulario Mi problema son los pasajeros tiene algún campo de cálculo como *. total_tax = yq + yr + tax_3 + tax_4

Estas son las ecuaciones de campo de formulario de cada pasajero.

Entonces quiero, ¿cómo calcular cada pasajero individual? (Cuando escribo texto, calculo automáticamente el valor para formar el campo individualmente)

Estoy usando la última versión 7.3.10 de PHP. Ya probé el cálculo usando javascript y jquery. Solo funciona con los campos del formulario del primer pasajero. No funciona otros pasajeros (si agrego 10 pasajeros eso solo funciona como primer pasajero).

Entonces, quiero calcular todos los campos de formulario de pasajeros individualmente usando javascript o jquery keyup evento o lo que sea

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

}

Entonces, espero calcular todos los campos de formulario de pasajeros individualmente usando javascript o jquery keyup evento o lo que sea

¿Cómo calcular a cada pasajero individualmente?

0
Najathi 16 oct. 2019 a las 06:42

1 respuesta

La mejor respuesta

Encontré la respuesta de mi pregunta que funcionó al 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>

Codificación del archivo 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);



  }

}
0
Najathi 5 nov. 2019 a las 03:23