TA貢獻(xiàn)2003條經(jīng)驗 獲得超2個贊
您需要做的是使用 JavaSript 提取值然后應(yīng)用計算并更新您的總數(shù)
//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;
}
<form >
quantity:<br>
<input type='text' name='quantity' id='quantity'><br>
price :<br>
<input type='text' name='price' id='price'><br>
<input type="button" value="Calculate " onclick="calc()" ><br>
</form ><br>
total = <div id = 'result'></div>
TA貢獻(xiàn)1828條經(jīng)驗 獲得超6個贊
您可以使用父表單作為特定項目的參考。如果您有多個表單，這將很有幫助?？紤]以下：
$(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>
TA貢獻(xiàn)1829條經(jīng)驗 獲得超4個贊
好的，我通過使用 echo 而不是純 hTML 標(biāo)記對您的腳本進行了很多更改，因此我可以只使用點符號
當(dāng)用戶更新提交的數(shù)量時，腳本會更新，它會自動計算
該腳本使用枚舉器 $i 迭代您的列表并允許 Javascript 基于該迭代器計算項目鍵的事物
然后圖像是一個直接的字符串提取，基于它在文件夾中
我通過 $Coffee['retail_price'] 調(diào)用 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>
舉報