我想将在 javascript 函数中计算的值设置为使用 php 代码生成 id 的输入字段。将 php 代码分配给 javascript 函数内的变量，然后使用该变量分配以设置输入字段的值。<td> <input type="text" value="<?php echo $cartr['price'] * $value['quantity']; ?>" id="<?php echo $pricefield; ?>" readonly></td> function decrement(qty, priceid) { if (document.getElementById(qty).value >= 2) { var x=document.getElementById(qty).value; x--; document.getElementById(qty).value = x; var y = document.getElementById(priceid).value; var sum = x * y; var fieldname = "<?php echo $pricefield; ?>"; document.getElementById(fieldname).value = sum; }else{ alert("Quantity cannot be less than 1"); } }
1 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
我根据我对提供的代码片段的解释（类似于我今天早些时候看到的另一个问题）快速整理了一个演示，说明你如何做你想做的事~复制所有并保存为 php 文件以运行。本质上，您想完全分离 PHP 和 Javascript - 还要删除任何内联事件处理程序。通过使用querySelectorAll，sibling selectors您可以非常轻松地遍历 DOM 以识别感兴趣的元素并分配侦听器。如果您使用ID属性然后依赖document.getElementById您自己，因为您必须跟踪 ID - 这当然必须是唯一的。过去的情况是，ID 属性不能简单地是一个整数 - 随着引入的引入而放松了HTML5- 但在 imo 中，使用整数作为 ID 仍然不是一个好习惯。
以下内容可能无法完全满足您的要求，但可以很好地了解如何访问 DOM 中的元素并相应地触发函数。祝你好运。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Dynamic elements Price Increment & Decrement</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
Array.prototype.slice.call( document.querySelectorAll('td > input[ type="button" ]') ).forEach( input=>{
input.addEventListener('click',function(e){
let qty=this.parentNode.querySelector('input[name="qty[]"]');
let price=this.parentNode.querySelector('input[name="price[]"]');
let sum=this.parentNode.querySelector('input[name="sum[]"]');
switch( this.dataset.dir ){
case 'increment':
qty.value++;
break;
case 'decrement':
if( qty.value > 1 ) qty.value--;
else {
alert( 'Quantity cannot be less than 1' );
}
break;
}
sum.value=qty.value * price.value;
});
});
});
</script>
<style>
table{width:100%;}
tr{width:100%;}
td{display:flex;justify-content:space-between;align-items:center;align-content:center;}
[type='button']{ width:2rem; height:2rem; text-align:center; font-size:1rem; clear:none; cursor:pointer; margin:0.25rem; }
[type='text']{ height:2rem; margin:0.25rem; text-align:center; }
td *{ display:inline-block; }
label{width:20%;}
label > input{float:right}
label:before{content:attr(data-label)}
[readonly]{background:rgba(255,0,0,0.1)}
</style>
</head>
<body>
<form>
<table>
<?php
for( $i=1; $i <=10; $i++ ){
$qty=mt_rand(1,10);
$price=mt_rand(1,100);
printf('
<tr>
<td>
<input type="button" data-dir="decrement" value="-" />
<label data-label="Quantity" for="qty"><input type="number" name="qty[]" value="%d" min=1 /></label>
<label data-label="Price" for="price"><input type="number" name="price[]" value="%d" min=1 readonly /></label>
<label data-label="Total" for="sum"><input type="number" name="sum[]" value="%d" readonly /></label>
<input type="button" data-dir="increment" value="+" />
</td>
</tr>',
$qty,
$price,
$qty * $price );
}
?>
</table>
</form>
</body>
</html>
- 1 回答
- 0 关注
- 89 浏览
添加回答
举报
0/150
提交
取消