Question

我有一个使用循环显示输入字段的表单。所有字段都有类。基本上有3个字段。 1-数量 2-价格 3-总计

，因为输入字段在循环中。所以这是我想从数量*价格==总计中显示总计的问题但我想计算点击总数。

请帮助

Answer 1

您需要做的是使用JavaSript提取值，然后应用计算并更新总数

model.compile(optimizer='adam',
              loss='sparse_categorical_crossentropy',
              metrics=['accuracy'])
model.fit(train_images, train_labels, batch_size= 200, epochs=6, validation_data=(test_images, test_labels))

//get the HTML elements

var quantity = document.getElementById('quantity');
var price = document.getElementById('price');
var total = document.getElementById('total');
var result = document.getElementById('result');

function calc(){

var calc= quantity.value * price.value;
result.innerHTML = calc;

}

Answer 2

您可以使用父表单作为对特定项目的引用。如果您有多种形式，这将很有帮助。请考虑以下内容：

$(function() {
  function calcTotal(p, q) {
    var t = parseFloat(p) * parseInt(q);
    t = t.toFixed(2);
    return t;
  }

  $(".first_field_quantity").change(function(e) {
    var l = $(this).closest("ul");
    var pr = $(".first_field_price", l).val();
    if (pr.slice(0, 1) == "$") {
      pr = pr.slice(1);
    }
    $(".first_field_total", l).val("$" + calcTotal(pr, $(this).val()));
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4">
  <div class="stats-widget stats-widget">
    <div class="widget-header">
      <h3>Coffee Product</h3>
      <p>Retail Price: 12.00</p>
      <p>Description 1</p>
    </div>
    <div class="col-md-12 unit">
      <img src="https://i.imgur.com/PGPviCM.jpg" width="240px">
    </div>
    <div class="widget-stats-list">
      <ul>
        <li>
          <label class="label">Quantity</label>
          <div class="input quantity-events">
            <input class="form-control first_field_quantity" type="text" name="first_field_quantity" value="1">
          </div>
        </li>
        <li>
          <label class="label">Customer Pays</label>
          <div class="input">
            <input class="form-control first_field_price" type="text" value="$12.00" name="first_field_price" readonly>
          </div>
        </li>
        <li>
          <label class="label">Total</label>
          <div class="input">
            <input class="form-control first_field_total" type="text" name="first_field_total" value="$12.00" readonly>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

好吧，我通过使用echo而不是纯hTML标签对脚本进行了很多更改，因此我只能使用点符号

该脚本会在用户更新归档数量时自动更新，并自动进行计算
该脚本使用枚举$ i进行列表迭代，并允许Javascript基于该迭代器为项目键计算事物
然后图像是基于文件夹中的直线字符串

我用$ Coffee ['retail_price']调用的PHP值，而不是$ Coffee->'retail_price'的箭头语法

    <?


$Coffees = array(
    "item1" => array(
        "retail_price" => "31",
        "image" => "img.jpg",
        "product_name" => "Machanto",
        "description" => "Machanto Creamy ",
    ),
       "item2" => array(
        "retail_price" => "22",
        "image" => "img.jpg",
        "product_name" => "Espresso",
        "description" => "Machanto Strong ",
    ),
       "item3" => array(
        "retail_price" => "12",
        "image" => "img.jpg",
        "product_name" => "Chochlate",
        "description" => "Machanto sweet ",
    )
);

// Printing all the keys and values one by one
//$keys = array_keys($Coffees);
//for($i = 0; $i < count($Coffees); $i++) {
//    echo $keys[$i] . "{<br>";
//   foreach($Coffees[$keys[$i]] as $key => $value) {
//       echo $key . " : " . $value . "<br>";
//    }
//    echo "}<br>";
//}



//set an iteration Value
$i = 0;
$File = '';
foreach($Coffees as $Coffee) {

if (isset($Coffee['image'])) {
    //$File = Storage::url('Products/'.$Coffee['image']); 
    $File = 'Products/'.$Coffee['image']; 
    echo $File;
}

//print_r($Coffee);

    echo '<div class="col-md-4 col-sm-4"> <div class="stats-widget stats-widget">';
    echo '<div class="widget-header"> <h3>'. $Coffee['product_name'] .'</h3> ';

echo '<p>Retail Price: '.$Coffee['retail_price'].'</p> <p>'.$Coffee['description'].'</p> </div>';

echo '<div class="col-md-12 unit">';
echo ' <img src="'. $File .'"> </div> ';
echo ' <div class="widget-stats-list"> <table> ';
echo ' <td> ';

 // Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

echo '  <label class="label">Quantity</label> <div class="input quantity-events">';
echo '  <input class="form-control first_field_quantity" type="number" id="quantity'.$i.'" name="first_field_quantity" min="1" max="5" onChange="calc('.$i.')"> </div> </td> ';
echo ' <td> ';

echo '  <label class="label">Customer Pays</label> <div class="input"> ';
echo '      <input class="form-control first_field_price" type="text" id="price'.$i.'" value="'.$Coffee['retail_price'].'" name="first_field_price" readonly> </div> </td> ';

echo '      <td>';
echo '      <label class="label" >Total</label> <div class="input"> ';

echo '<input class="form-control first_field_total" id="total'.$i.'" type="text" name="first_field_total"> </div> </td> ';
echo '</table> ';
echo '</div> ';
echo '</div> ';
echo '</div>';


    $i++;
} ?>

<script>
function calc(i)
{
//alert(i);

var quantity = document.getElementById('quantity'+i);
var price = document.getElementById('price'+i);
var total = document.getElementById('total'+i);




var cal= quantity.value * price.value;
total.value = cal;



}
</script>

Answer 4

我使用jquery插件解决了我的问题。 https://www.jqueryscript.net/form/Do-Calculations-Form-Fields-AutoCalc.html

谢谢大家的宝贵时间。

如何基于类获取输入字段值

4 个答案: