重新使用JavaScript功能

创建一个蛋糕订购表单，并且可用的蛋糕数量可能因月份而异。我试图调整@Anderson Contreira创建的JS函数，但在我的小提琴中它不起作用。这是我到目前为止 -

当我输入数量时为什么没有改变？重新使用JavaScript功能

语法 JS

function calculate(el){ 
    var quantity = el.val(); 
    var id = el.attr("id").replace("item_","").replace("_qty",""); 
    var data = {quantity: quantity,id:id}; 
    var targetTax = $("#item_"+id+"_tax"); 
    var targetTotalPrice = $("#item_"+id+"_totalprice"); 
    $.post($.post(window.alert("It's been one or two or three entered"); 
    }); 
} 
var qty = $("#item_1_qty"); 
var qty1 = $("#item_2_qty"); 
var qty2 = $("#item_3_qty"); 
qty.on("keyup",function(){ 
    window.alert("It's been one or two or three entered"); 
});

HTML/PHP

<body> 
<form id="Form1" runat="server"> 
    <div id="Form1" runat="server"> 
    <table id="table1" border="1"> 
     <tr> 
      <th>Item</th> 
      <th>Price</th> 
      <th>Quantity</th> 
      <th>Tax</th> 
      <th>Total</th> 
     </tr> 
     <tr> 
      <td><label for="lblChoccake">Choc Cake</label></td> 
      <td><label for="lblitem1price">$25.00</label></td> 
      <td><input type="text" id="item_1_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td> 
      <td><input type ="text" id="item_1_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td> 
      <td><input type="text" id="item_1_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td> 
     </tr> 
     <tr> 
      <td><label for="lblLemonFudgecake">Lemon Fudge Cake</label></td> 
      <td><label for="lblitem2price">$15.00</label></td> 
      <td><input type="text" id="item_2_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td> 
      <td><input type ="text" id="item_2_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td> 
      <td><input type="text" id="item_2_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td> 
     </tr> 
     <tr> 
      <td><label for="lblCoconut">Coconut Cake</label></td> 
      <td><label for="lblitem3price">$35.00</label></td> 
      <td><input type="text" id="item_3_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td> 
      <td><input type ="text" id="item_3_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td> 
      <td><input type="text" id="item_3_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td> 
     </tr> 
    </table> 
    </div> 
</form> 
</body>

来源

2016-04-24 WooBin WooYeol

你似乎并没有在任何地方调用'calculate（）'。而你的小提琴不起作用，因为它不包括jQuery - 试试这个版本：https：//jsfiddle.net/2uack1w6/1/（尽管那时keyup处理程序只适用于第一个数量字段）。 – nnnnnn

@nnnnnn我相信OP是指警报功能不起作用，但你是对的。这应该在 –

这个问题中提到@nnnnnn - 如果第一个项目输入了一个数字，它将只显示一个提示，它忽略了后面的项目。 –

jQuery(function($) { 

    var qty = $("#item_1_qty"); 
    var qty1 = $("#item_2_qty"); 
    var qty2 = $("#item_3_qty"); 

    qty.on("keyup",function(){ 
    alert("It's been one or two or three entered"); 
    }); 
});

试试这个，你要分配variabl在文档实际加载之前。

来源

2016-04-24 03:44:15

你错过了关于'.on（）'的关闭'）'和关于'jQuery（）'的关闭'}）'（并且缺少空格......） – nnnnnn

@nnnnnn谢谢，我在移动设备上，一旦我可以访问我的电脑，我将对其进行编辑。感谢您的审查。 –

到这里看看：https://jsfiddle.net/andersoncontreira/mtu6syby/1/

你可以做出一些改变，并会工作得很好：

添加类项目的每个输入_数量例如：<input type="text" id="item_1_qty" class="item_qty" />

在JavaScript，你可以留下呼叫通用的：

jQuery(document).ready(function(){ 
    //you can use a class for help you 
    $(".item_qty").on("keyup",function(){ 
    //window.alert("It's been one or two or three entered"); 
    calculate($(this)); 
    }); 
});

来源

2016-05-02 22:30:11

重新使用JavaScript功能

回答

相关问题