javascript - HTML 表单数据转换为对象以传递方法

Question

我正在尝试制作一个基本的收银机应用程序。如何从中传递表单数据:

<form action="#" id="target">
<input type="text" required class="field1 col-md-3 col-md-offset-3" placeholder="Enter Item Name Here">
<input type="text" required class="field1 col-sm-2 " placeholder="Enter Item Quantity">
</div>
<div class="row">
<input type="text" class="field1 col-md-3 col-md-offset-3" placeholder="Enter Staff Name (Optional)">
<button type='submit' class="col-md-2 butn btn-one" id="check">Checkout</button>
</div>

每次提交内容时都进入下面列出的方法

cashRegister.scan('ITEM NAME', QUANTITY);
// Apply your staff discount
// applying a staff discount to the total amount

cashRegister.applyStaffDiscount(EMPLOYEE);

然后将脚本的结果从控制台打印到 HTML 页面

console.log('Your bill is ' + cashRegister.total.toFixed(2));

我希望能够以折扣价输入 5 个苹果，并让该表单输出以下 JavaScript 来执行此脚本 http://codepen.io/illusionelements/pen/xGQrxN

(item: apple, quantity: 5, Employee:me)
cashRegister.scan('apple',5);
cashRegister.applyStaffDiscount(me);

Answer 1

看起来您遇到的问题是您试图将表单的值传递给 JavaScript。如果是这种情况，请尝试这样的操作:

$('#check').on('click', function(e) {
    e.preventDefault(); //Stops the form from being posted
    var item = $('#item').val();
    var quantity = $('#quantity').val();
    var staff = $('#staff').val();

    cashregister.scan(item, quantity);
    if(staff.length > 0 && typeof staffMembers[staff] != 'undefined')
    {
        cashregister.applyStaffDiscount(staffMembers[staff]);
    }

    console.log('Your bill is ' + cashRegister.total.toFixed(2));

    $('#target2').fadeIn(5000)
      // .animate({opacity: 0.5}, 3000)
      .fadeOut(5000);
});

要完成这项工作，您需要做一些事情:

• 为您的输入提供唯一的类或 ID

• 以你的员工为对象

   var staffMembers = {};
   var sally = new StaffMember("Sally", 5);
   staffMembers['sally'] = sally;