Javascript在线报价功能[关闭]答案

【问题标题】：Javascript Online Quote Function [closed]Javascript在线报价功能[关闭]
【发布时间】：2015-11-17 20:06:50
【问题描述】：

我正在寻找基于两个变量的在线报价。

用户需要输入邮政编码，然后从下拉列表中选择一个项目（1、2 或 3）。每个下拉菜单都有不同的费用（10.00 英镑、20.00 英镑和 30.00 英镑）。

用户必须输入他们的邮政编码，选择 1/2/3，然后按“获取报价”。

如果他们的邮政编码不是以 B 开头，后跟数字，则必须显示文字，告知我们不向该地区送货。如果邮政编码在 B1-B99 范围内，则必须显示文字说明费用为 10 英镑/20 英镑/30 英镑，具体取决于他们选择的下拉项目。

我已经设法让下拉菜单和价格提醒起作用，但我不确定你如何在上面集成邮政编码功能（我也不希望提醒我希望成本出现在按钮下方）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!</center>
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text"            name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price();"><br>
</form>
<script>
    function price() {
    var Amt = document.priceCalc.Product;
    var price = Amt.value;
    alert(price);
}
</script>
</body>
</html>

任何帮助将不胜感激，我不是 Javascript 专家，但这个问题困扰着我！谢谢

【问题讨论】：

您只显示 B1-B99 邮政编码。请检查。

标签： javascript forms quote submit-button

【解决方案1】：

您可以使用正则表达式来检查邮政编码。

/[B][1-9]-[B][0-99]/

类似这样的：

<div id="quote" style="padding:5%;">
  Gain an online quotation for your skip!
  <form name="priceCalc" action="">
    <input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
    <select name="Product">
      <option value="Please Select">Please Select</option>
      <option value="10">1</option>
      <option value="20">2</option>
      <option value="30">3</option>
    </select>
    <input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span>
    <br/>
  </form>
</div>
<script>
  function price() {
    var postcode = document.priceCalc.postcode;
    var Amt = document.priceCalc.Product;
    var price = Amt.value;

    var regex = /[B][1-9]-[B][0-99]/;

    if (!isNaN(price)) {
      if (postcode.value.match(regex) !== null) {
        document.getElementById('priceOut').innerHTML = "&pound;" + price;
      } else {
        document.getElementById('priceOut').innerHTML = "We do not deliver to this area.";
      }
    } else {
      document.getElementById('priceOut').innerHTML = price;
    }


  }
</script>

【讨论】：

非常感谢您的帮助，谢谢，关于上述内容，当我输入任何“B”邮政编码（例如 B9 4RL）时，我仍然收到消息“我们不向该地区送货“这应该在哪里显示价格？你有一个可能的解决办法吗？再次感谢。
解决了！替换了“var regex = /[B][1-9]-[B][0-99]/;”用“var regex = /^[B]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;”再次感谢您的帮助。

【解决方案2】：

你的问题不够精确，但我理解的就是这里，你可以使用这段代码：

<div id="quote" style="padding:5%;">
    Gain an online quotation for your skip!
    <form name="priceCalc" action="">
        <input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
        <select name="Product">
            <option value="Please Select">Please Select</option>
            <option value="10">1</option>
            <option value="20" >2</option>
            <option value="30">3</option>
        </select>
        <input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span><br/>
    </form>
</div>
<script>
    function price() {
        var Amt = document.priceCalc.Product;
        var price = Amt.value;
        document.getElementById('priceOut').innerHTML = price;
    }
</script>

价格会显示在按钮旁边（underneath到底是什么意思？）您可以移动 #priceOut div 以将价格放置在您想要的任何位置。

【讨论】：