Question

我的代码实际上适用于原始html代码附带的第一个输入，但是当我添加一行时，它不计算在内。而且我也想在javascript中显示一个php var。最后，我想使用mysqli将添加的行发布到表中

<div class="card-body">
  <h3 align="center">
    <?php echo $products; ?>
  </h3>
  <table align="center">
    <thead>
      <tr>
        <th style="text-align:center;">
          <?php echo $code; ?>
        </th>
        <th style="text-align:center;">
          <?php echo $product; ?>
        </th>
        <th style="text-align:center;">
          <?php echo $quantity.' '.$total; ?> <a href="showproducts.php" target="_blank"><i class="fas fa-edit text-danger"></i></a></th>
        <th style="text-align:center;">
          <?php echo $quantity; ?>
        </th>
        <th style="text-align:center;">
          <?php echo $price.' '.$unit; ?>
        </th>
        <th style="text-align:center;">
          <?php echo $price.' '.$total; ?>
        </th>
      </tr>
    </thead>
    <tr>
      <td>
        <input name="codebar" onchange="codefetch()" type="text" class="form-control form-control-sm"></td>
      </td>
      <td>
        <input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />
      </td>
      <td>
        <div class=""><input id="quantity" name="quantity" readonly type="text" class="form-control form-control-sm"></td>
      <td><input id="neededquantity" name="neededquantity" type="text" class="form-control form-control-sm"></td>
      <td><input id="sellprice" name="sellprice" type="text" class="form-control form-control-sm sellprice"></td>
      <td><input id="totalprice" name="totalprice" readonly type="text" class="form-control form-control-sm"></td>
    </tr>
    <tbody id="orderTable">
    </tbody>
  </table>
  <center style="padding:10px;">
    <button id="add" style="width:150px;" onclick="addRow()" class="btn btn-success">Add</button>
    <button id="remove" style="width:150px;" class="btn btn-danger">Remove</button>
  </center>
  </div>
</div>

JavaScript：

function autofill() {

  var name = $('input[name=product]').val();
  $.ajax({
    url: 'gpin.php',
    data: 'name=' + name,
    success: function(data) {
      var json = data;
      obj = JSON.parse(json);
      $('input[name=quantity]').val(obj.quantity);
      $('input[name=sellprice]').val(obj.sellprice);
      $('input[name=codebar]').val(obj.code);
    }
  });
}

function codefetch() {
  var code = $("input[name=codebar]").val();
  $.ajax({
    url: 'gpic.php',
    data: 'code=' + code,
    success: function(data) {
      var json = data;
      obj = JSON.parse(json);
      $('input[name=product]').val(obj.name);
      $('input[name=quantity]').val(obj.quantity);
      $('input[name=sellprice]').val(obj.sellprice);
    }
  });
}

$(document).ready(function() {

  $('#prodname').typeahead({
    source: function(query, result) {
      $.ajax({
        url: "prodnameautofill.php",
        method: "POST",
        data: {
          query: query
        },
        dataType: "json",
        success: function(data) {
          result($.map(data, function(item) {
            return item;
          }));
        }
      })
    }
  });

});


function calculate() {
  var myBox1 = $('input[name=neededquantity]').val();
  var myBox2 = $('input[name=sellprice]').val();
  var result = $('input[name=totalprice]').val();
  var myResult = myBox1 * myBox2;
  $('input[name=totalprice]').val(myResult);
  var quantity = $('input[name=quantity]').val();
  var neededquantity = $('input[name=neededquantity]').val();
  var myResult2 = quantity - neededquantity;
  if (myResult2 < 0) {
    document.getElementsByName('neededquantity').className = ('form-control form-control-sm bg-danger text-light');
  } else {
    document.getElementsByName('neededquantity')[0].className = ('form-control form-control-sm bg-success text-light');
  }
}

function addRow() {
  var table = document.getElementById("orderTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  cell1.innerHTML = '<input name="codebar" onchange="codefetch()" type="text" class="form-control form-control-sm">';
  cell2.innerHTML = '<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />';
  cell3.innerHTML = '<input name="quantity" readonly type="text" class="form-control form-control-sm">';
  cell4.innerHTML = '<input name="neededquantity" type="text" oninput="calculate();" class="form-control form-control-sm">';
  cell5.innerHTML = '<input name="sellprice" type="text" oninput="calculate();" class="form-control form-control-sm sellprice">';
  cell6.innerHTML = '<input name="totalprice" readonly type="text" class="form-control form-control-sm">';
}

是否有可能像我打算在jscode中那样在javascript中回显php变量

cell2.innerHTML = '<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />';

Answer 1

基本上，PHP在页面存在之前就可以工作（仅当页面被屏蔽时才完成），并且当浏览器读取页面时JavaScript在页面中，因此无法进行通信。相反，您必须使用AJAX，后者可以通过异步调用+元数据（例如XML或JSON文件或元文件）来满足他们。

我想数很多输入javascript并提交给mysqli

1 个答案: