如何让这两个javascript代码协同工作?

如何让这两个javascript代码协同工作?,javascript,jquery,Javascript,Jquery,我用html制作了一个表单 一开始我做的很简单。我输入的是用户输入的金额。然后,我编写javascript代码,根据用户输入的金额计算动态价格。代码如下: <input class="typeahead" type="text" placeholder="Amount" name="Gift-Card Amount"/> 计算值为常数0.95。所以我添加了一个新的输入。商店名称。因此,用户可以输入商店名称。金额: <input class="stores typeahead"

我用html制作了一个表单

一开始我做的很简单。我输入的是用户输入的金额。然后,我编写javascript代码,根据用户输入的金额计算动态价格。代码如下:

<input class="typeahead" type="text" placeholder="Amount" name="Gift-Card Amount"/>
计算值为常数0.95。所以我添加了一个新的输入。商店名称。因此,用户可以输入商店名称。金额:

<input class="stores typeahead" type="text" placeholder="Stores" name="name"/>
因此,可以根据输入的门店名称将该值替换为预设值,而不是常数0.95。我不知道如何让这两个人一起工作。也就是说,如何重新编码第一个javascript来重新编码var存储值,而不是0.95

jQuery("input[name='Gift-Card Amount']").change(function () {
    var amount = parseFloat(this.value);
    if (isNaN(amount) || !isFinite(amount)) {
        jQuery(this).val('');
        return false;
    }
    var storeName = jQuery(this).parents("form").find("input[name='name']").val();
    if (storeName in stores) {
        var calc = amount * stores[storeName];
        jQuery(this).parents("form").find("input[name='price']").val(calc);
    }
});
我还建议您将存储从文本输入更改为。这样,您就不需要依靠用户正确拼写存储,包括大写字母

<select name="name" class="storeName">
    <option value="">Please select a store</option>
    <option value=".90">McDonalds</option>
    <option value=".92">Target</option>
</select>

我会这样做:

function calcPrice(element) {
  // Use the element that called the listener to find the form
  var form = element.form;
  // Access form controls as named properties of the form
  var amt = form["Gift-Card Amount"].value;

  // Don't clear the value if it's not suitable, it's annoying
  // Let the user fix it themselves
  if (parseFloat(amt) != amt) {
    alert("Gift card amount is not a suitable value")
  }

  // Set the price
  form.price.value = amt * form.store.value;
}

</script>
示例表单,其中包含所有存储值。通过这种方式,您可以在服务器获取所有相关值的情况下进行回退,而不依赖于客户端计算

<form>
  Store:
  <select name="store" onchange="calcPrice(this)">
   <option value="0.90">McDonalds
   <option value="0.92">Target
  </select>
  <br>
  Gift card amount:
  <input name="Gift-Card Amount" onchange="calcPrice(this)">
  Price:
  <input name="price" readonly>
</form>

编写一个可能返回正确值的小函数

function retrieveStoreValue(store){
      return stores[store];
} // be sure stores is defined before the first call of this one
在你的改变函数中调用它

var storeName = jQuery(this).parents("form").find("input[name='name']").val();

var calc = parseFloat(this.value) * (retrieveStoreValue(storeName) );

将存储查找放入change函数中。Done.jQuerythis.val只是一种低效的方法。不需要parseFloat,this.value*0.95将返回一个数字。jQuerythis.parentsform.findinput[name='price'].valcalc可以是这样的.form.price.value=calc,这样效率更高。jQuery并不总是少代码。既然this.value是字符串而不是数字,他不需要在this.value上使用parseFloat吗@罗比:谢谢你的反馈,但这不是我的问题。我需要知道如何让change函数识别var存储值,而不是。95@user3784824-这就是为什么它是一个评论:@NobleMushtak–不,乘法运算符*会将字符串转换为数字(如果可以)。事实上,只计算价格并查看结果是否为NaN比测试输入更简单。然后我将把存储值放在哪里?我需要用另一种方法,用户在存储中键入。稍后,我可以返回并提醒用户他们输入了无效的存储名称。我喜欢你原来贴的东西。我只是不知道我现在把我的var存储值放在哪里。你可以把它放在任何你想要的地方。这只是上面函数访问的一个全局变量。你不知道这给了我偏头痛。你很容易就解决了。再次感谢。我想这样做。在页面中,存储值、.92…90等存储在哪里?从顶部开始的顺序是:var stores={..}|然后->function retrieveStoreValue|然后->你的changehandlerA函数返回stores[store]是低效的,只需使用stores[store]。这不符合我的需要。不过我很感激。
<form>
  Store:
  <select name="store" onchange="calcPrice(this)">
   <option value="0.90">McDonalds
   <option value="0.92">Target
  </select>
  <br>
  Gift card amount:
  <input name="Gift-Card Amount" onchange="calcPrice(this)">
  Price:
  <input name="price" readonly>
</form>
function retrieveStoreValue(store){
      return stores[store];
} // be sure stores is defined before the first call of this one
var storeName = jQuery(this).parents("form").find("input[name='name']").val();

var calc = parseFloat(this.value) * (retrieveStoreValue(storeName) );